システム開発部のTです。以前、iOS＆Android開発でAuth0を組み込んだことがありましたが、今回はFlutterでAuth0を組み込んでみようと思います。記事が長くなるので、本編ではAndroidの実装のみにとどめます。iOSについては、別記事にてiOS編として説明いたします。 Auth0とは 簡単に言うと、TwitterやFacebookなどが提供しているOAuth認証システムをひとまとめにしたような認証システムで、統合認証プラットフォームとも呼ばれています。Auth0を利用することで、Twitter、Facebook、Google、Apple等のSNS認証を個別に実装する必要が無くなり、個別で実装するよりも工数が削減できるというメリットがあります。 詳しいことは、Auth0のサイトをご覧いただければと思います。 https://auth0.com/jp 前提準備 Auth0のアカウントはあらかじめ作成してください。アカウント作成の手順は省略いたします。 Auth0管理画面でアプリ登録 まずはAuth0のアプリケーション一覧画面を表示し、画面右上の「+Create Application」ボタンを押下します。 次にNameに任意のアプリ名を設定し、Choose an application typeからNativeを選択後、「Create」ボタンを押下してください。 以下の画面が表示されます。ここでSelect a native SDKと表示されていますが、各プラットフォームを押下すると簡単なセットアップ手順が記載された画面に遷移します。本章でセットアップ手順を記載していくので、ここでは「Settings」を押下してください。 設定画面に切り替わるので、画面はこのままでAndroidStudioに切り替えてください。また、Domain、ClientIDについては、AndroidStudioのプロジェクト設定時に使用します。 実装前事前準備 Android Studioを起動し、「New Flutter Project」を押下してください。 FlutterSDKのPathを入力後、「Next」ボタンを押下してください。 Project nameに任意のアプリ名を設定し、「Finish」を押下してください。Organizationについても任意のドメインを設定してください。本件では特にリリース予定もないため、初期値としています。 上記後、以下の画面が出ることを確認してください。 プロジェクトのツリーを展開し、ツリー上の「Android」を選択後、右クリックメニューから「Flutter」→「Open Android module in Android Studio」を押下すると、Flutterプロジェクト内部のAndroidプロジェクトを開くことができます。この手順で開かなくても直接設定を変更することは可能ですが、コード補完ができないので、個人的にはこの手順で開くことを勧めています。 サブプロジェクトのAndroidプロジェクトが開きます。 以降で説明する手順については、QuickStartに記載されているセットアップ手順を元に記載しております。以降の手順にて動作しない場合、セットアップ手順が更新されている場合もあるので、その場合、以下の画面から参照ください。 appのbuild.gradleを開き、dependenciesにAuth0のライブラリを追加します。 同じく、defaultConfigに以下の内容を追加し、「Sync Now」を押下してください。 AndroidManifest.xmlを開き、以下の内容を追記してください。 Auth0のアプリ設定画面に戻って、Allowed Callback URLsとAllowed Logout URLsに以下の内容を設定してください。（※「○○○○」にはAuth0のユーザーIDを設定してください） その後、画面下までスクロールして、「Save Changes」を押下してください。 事前準備は以上になります。ここから実装になります。 MainActivityの実装 Androidプロジェクト上のMainActivityに実装します。まず、MainActivityの中身を覗いてみましょう。 ごらんのとおり、基本的にはFlutter上で処理を行っている関係上、本来Androidネイティブ側の実装は必要ないため、上記のようになっています。 今回、FlutterとAndroid（およびiOS）側との連携が必要なため、上記画面にMethodChannelを通じてインターフェースを構築していきたいと思います。MethodChannelとは異なるプラットフォームを接続するためのFlutterAPIになります。 以下の内容にて実装していきましょう。 onMethodCall内部の実装については、以降で説明します。 本件では、MethodChannelについての説明については省略しますが、AUTH0_CHANNELの文字列については、大体「アプリパッケージ名/任意の文字列」とすることが多いようなので、本編でもそれに習って「com.example.flutterauthapp/auth0」と定義しました。 […]

Read more of this post