システム開発部のTです。以前、iOS＆Android開発でAuth0を組み込んだことがありましたが、今回はFlutterでAuth0を組み込んでみようと思います。記事が長くなるので、本編ではiOSの実装のみにとどめます。Androidについては、別記事にてAndroid編として説明いたします。 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」を押下してください。 設定画面に切り替わるので、画面はこのままでXCodeに切り替えてください。また、Domain、ClientIDについては、XCodeのプロジェクト設定時に使用します。 実装前事前準備 Android Studioを起動し、「New Flutter Project」を押下してください。 FlutterSDKのPathを入力後、「Next」ボタンを押下してください。 Project nameに任意のアプリ名を設定し、「Finish」を押下してください。Organizationについても任意のドメインを設定してください。本件では特にリリース予定もないため、初期値としています。 上記後、以下の画面が出ることを確認してください。 プロジェクトのツリーを展開し、ツリー上の「iOS」を選択後、右クリックメニューから「Flutter」→「Open iOS module in Xcode」を押下すると、Flutterプロジェクト内部のXcodeプロジェクトを開くことができます。この手順で開かなくても直接設定を変更することは可能ですが、コード補完ができないので、個人的にはこの手順で開くことを勧めています。 サブプロジェクトのXcodeプロジェクトが開きます。 以降で説明する手順については、QuickStartに記載されているセットアップ手順を元に記載しております。以降の手順にて動作しない場合、セットアップ手順が更新されている場合もあるので、その場合、以下の画面から参照ください。 まずは、以下のようにRunner下にAutho.plistファイルを追加します。 Auth0.plistをSource Codeで開いてください。その後、以下の内容を設定してください。（※ClientID、Domainについては、Auth0の設定画面に記載されている内容を設定） 続けて、info.plistをSource Codeで開いてください。 以下の内容を追記します。 以下のように追記します。 Auth0のアプリ設定画面に戻って、Allowed Callback URLsとAllowed Logout URLsに以下の内容を設定してください。（※「○○○○」にはAuth0のユーザーIDを設定ください） その後、画面下までスクロールして、「Save Changes」を押下してください。 事前準備は以上になります。ここから実装になります。 AppDelegateの実装 Xcodeプロジェクト上のAppDelegateに実装します。まず、AppDelegateの中身を覗いてみましょう。 基本的にはFlutter関連の最低限の実装のみの状態です。 今回、FlutterとiOS側との連携が必要なため、上記画面にMethodChannelを通じてインターフェースを構築していきたいと思います。MethodChannelとは異なるプラットフォームを接続するためのFlutterAPIになります。 以下の内容にて実装していきましょう。 […]

Read more of this post