[第6回] 既存のログインシステムとの併用 – Facebookログイン

AWS Amplify

はじめに

皆さん。こんにちは!

DreamHanksのエルムです。

今回はFacebookソーシャルログインの導入方法について説明していきます。

前回の記事はサインアップ、サインイン、サインアウトです。

 

Auth Providerの設定

 

AmplifyでのOAuthサポートは、Cognito User Poolsを使用し、ソーシャルプロバイダとのフェデレーションをサポートしています。ソーシャルプロバイダは、ログイン後に自動的に対応するユーザーをUser Poolに作成します。OIDCトークンは、アプリケーションがこのプロセスを完了した後、アプリで利用可能になります。

  1. Facebookで開発者アカウントを作成します。
  2. Facebookの認証情報を使ってサインインします。
  3. My Apps メニューから「Add New App」を選択します。

 

4. Facebookアプリに名前をつけ、「Create App ID」を選択します。

 

5. 左のナビゲーションバーで、「設定」を選択し、「基本」を選択します。

 

App IDとApp Secretを覚えておいてください。これらは、次のセクションのCLIフローで使用します。

 

Auth Categoryの設定

 

ソーシャル・プロバイダーの設定が完了したら、プロジェクトのルート・フォルダーで以下を実行します。

 

Default configuration with Social Provider (Federation)” を選択します。

 

URIのリダイレクト

Sign in Redirect URI(s)の入力では、ローカル開発用のURIと本番用のURIを1つずつ入れることができます。例: http://localhost:3000/ が開発、 https://www.example.com/ が本番。Sign out redirect URI(s)についても同様です。

 

注意:複数のリダイレクトURI入力がある場合は、Amplifyプロジェクトを設定するところで、両方を処理する必要があります。

例えば、以下のように。

 

React Native – URIのリダイレクト

React Nativeアプリケーションでは、ローカルでのテストやアプリストアへの公開の前に、アプリケーションのカスタムURLスキームを定義する必要があります。

これはExpoやバニラのReact Nativeでは異なります。URLスキームの名前にmyappを使っていると仮定して、(あるいは選んだフレンドリーな名前でもよいのですが)、これらのURLをサインイン・リダイレクトURI(s)および/またはサインアウト・リダイレクトURI(s)の入力として使用することになります。

URIは以下のようになります:

  • myapp://
  • exp://127.0.0.1:19000/--/

 

React Native – iOS – Info.plist

 

Sign in with AppleはまだCLIに追加されていないので、以下の手順で有効にしてください。

 

完了したら、amplify pushを実行して変更内容を公開します。完了すると、自動生成されたWeb UI用のURLが表示されます。

 

このURLを認証機関に通知する必要があります:

  1. Facebookの認証情報を使ってサインインします。
  2. My Appsメニューから「Your App」を選択します。

  3. 左のナビゲーションバーで、「設定」を選択し、「基本」を選択します。

  4. ページ下部の「Add Platform」を選択し、「ウェブサイト」を選択します。

  5. Website “の “Site URL “には、ユーザープールのドメインと/oauth2/idpresponseエンドポイントを入力します。

  6. 変更を保存します。
  7. App Domainsにユーザープールのドメインを入力します。

  8. 変更を保存します。
  9. ナビゲーションバーから「製品」を選択し、「Facebookログインから設定」を選択します。

  10. ナビゲーションバーから「Facebookログイン」を選択し、「設定」を選択します。
  11. リダイレクトURLを「Valid OAuth Redirect URIs」に入力します。ユーザープールのドメインと/oauth2/idpresponseエンドポイントで構成されています。

  12. 変更を保存します。

 

フロントエンドの設定

 

OAuthエンドポイントを設定したら、Auth.federatedSignIn()を使って、そのエンドポイントやHosted UIを使うことができます。

LoginWithAmazon、Facebook、Google、またはSignInWithAppleを渡すと、以下のReactの例に示すように、ホストされたUIをバイパスして、ソーシャルプロバイダと直ちに連携します。

カスタムステートを追加したい場合は、文字列(例:Auth.federatedSignIn({ customState: ‘xyz’ }) )の値を渡し、Hub経由でカスタムステートをリッスンすることで追加できます。

 

 

Amplify Consoleへのデプロイメント

フロントエンドとバックエンドの継続的なデプロイで、アプリをAmplify Consoleにデプロイすること。

サンプル

 

終わりに

 

今回の記事は以上になります。

次回は[第7回] Multi-factor 認証 (Multi-factor authentication)を学びましょう。

ご覧いただきありがとうございます。

 

 

コメント