外部アイデンティティプロバイダー
Amplify Authで外部サインインを設定する前に、使用する各プロバイダーで開発者アカウントを設定する必要があります。
- Facebookの開発者アカウントを作成します。
- Facebook認証情報でサインインします。
- トップナビゲーションバーから「My Apps」を選択し、読み込まれたページで「Create App」を選択します。
- ユースケースについて「Set up Facebook Login」を選択します。
- プラットフォームについて「Website」を選択し、「No, I'm not building a game」を選択します。
- FacebookアプリにはAppスププやDiscoveryに名前を付け、「Create app」を選択します。
- 左側のナビゲーションバーから「Settings」を選択し、「Basic」を選択します。
- 「App ID」と「App Secret」をメモします。次のセクションでCLIフローで使用します。
- Google開発者コンソールに移動します。
- 「Select a project」をクリックします。
- 「NEW PROJECT」をクリックします。
- プロジェクト名を入力して「CREATE」をクリックします。
- プロジェクトが作成されたら、左側のナビゲーションメニューから「APIs & Services」を選択し、次に「Credentials」を選択します。
- 「CONFIGURE CONSENT SCREEN」をクリックします。
- 「CREATE」をクリックします。
- 「App Information」と「Developer contact information」に入力します。これらは必須フィールドで、「SAVE AND CONTINUE」を3回クリック(OAuth同意画面->スコープ->テストユーザー)して同意画面のセットアップを完了します。
- 「Credentials」タブに戻り、「Create credentials」ドロップダウンリストから「OAuth client ID」を選択してOAuth2.0認証情報を作成します。
- 「Application type」として「Web application」を選択し、OAuth Clientに名前を付けます。
- 「Create」をクリックします。
- 「Your client ID」と「Your Client Secret」をメモします。次のセクションでCLIフローで必要になります。
- 「OK」を選択します。
- Amazonの開発者アカウントを作成します。
- Amazon認証情報でサインインします。
- Amazon Client IDとClient Secretを受け取るには、Amazonセキュリティプロファイルを作成する必要があります。「Create a Security Profile」を選択します。
- 「Security Profile Name」、「Security Profile Description」、「Consent Privacy Notice URL」に入力します。
- 「Save」を選択します。
- 「Show Client ID」と「Client Secret」を選択してクライアントIDとシークレットを表示します。次のセクションでCLIフローで必要になります。
- Apple開発者認証情報でサインインします。
- メインの開発者ポータルページで、「Certificates, IDs, & Profiles」を選択します。
- 左側のナビゲーションバーで「Identifier」を選択します。
- 「Identifiers」ページでプラスアイコン(+)を選択します。
- 「Register a New Identifier」ページで「App IDs」を選択します。
- 「Register an App ID」ページの「App ID Prefix」の下から「Team ID」の値をメモします。
- 「Description」テキストボックスに説明を入力し、iOSアプリの
bundleIDを入力します。 - 「Capabilities」の下で「Sign in with Apple」を選択します。
- 「Continue」を選択し、設定を確認してから「Register」を選択します。
- 「Identifiers」ページで、右側から「App IDs」を選択し、次に「Services ID」を選択します。
- プラスアイコン(+)を選択し、「Register a New Identifier」ページで「Services IDs」を選択します。
- 「Description」テキストボックスに説明を入力し、Service IDの識別子を入力します。
- 「Continue」を選択してService IDを登録します。
外部プロバイダーの開発者アカウントが設定されたので、Amplify固有の設定に戻ることができます。
外部サインインバックエンドを設定する
amplify/auth/resource.ts内で外部プロバイダーを追加する必要があります。
以下は、Amplify Authがサポートするすべての外部プロバイダーへのアクセスをセットアップする方法の例です。アプリケーションのcallbackUrlsとlogoutUrls URLを設定する必要があります。これらはバックエンドリソースに対してアプリでのサインインおよびサインアウト操作の開始時に動作するかを指示します。
import { defineAuth, secret } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { google: { clientId: secret('GOOGLE_CLIENT_ID'), clientSecret: secret('GOOGLE_CLIENT_SECRET') }, signInWithApple: { clientId: secret('SIWA_CLIENT_ID'), keyId: secret('SIWA_KEY_ID'), privateKey: secret('SIWA_PRIVATE_KEY'), teamId: secret('SIWA_TEAM_ID') }, loginWithAmazon: { clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET') }, facebook: { clientId: secret('FACEBOOK_CLIENT_ID'), clientSecret: secret('FACEBOOK_CLIENT_SECRET') }, callbackUrls: ["myapp://callback/"], logoutUrls: ["myapp://signout/"], } }});新しく設定された認証リソースとそのOAuthリダイレクトURIについて外部プロバイダーに通知する必要があります。
-
Facebook認証情報でFacebook開発者アカウントにサインインします。
-
トップナビゲーションバーから「My Apps」を選択し、「Apps」ページで以前作成したアプリを選択します。
-
左側のナビゲーションバーで「Products」を選択します。まだ追加されていない場合は「Facebook Login」を追加します。
-
既に追加されている場合は、「Configure」ドロップダウンの下から「Settings」を選択します。
-
「Valid OAuth Redirect URIs」の下に、ユーザープールドメインと
/oauth2/idpresponseエンドポイントを入力します。https://<your-user-pool-domain>/oauth2/idpresponse
- 変更を保存します。
-
Google開発者コンソールに移動します。
-
左側のナビゲーションバーで、「Pinned」または「More Products」の下にある「APIs and Services」を探します。
-
「APIs and Services」サブメニュー内で「Credentials」を選択します。
-
最初のステップで作成したクライアントを選択して「Edit」ボタンをクリックします。
-
「Authorized JavaScript origins」フォームにユーザープールドメインを入力します。
-
「Authorized Redirect URIs」にユーザープールドメインと
/oauth2/idpresponseエンドポイントを入力します。注釈: エンドポイントを追加するときに
Invalid Redirect: domain must be added to the authorized domains list before submitting.というエラーメッセージが表示された場合は、「Authorized Domains List」に移動してドメインを追加してください。 -
「Save」をクリックします。
- Amazon認証情報でサインインします。
- ギアにカーソルを合わせて、前のステップで作成したセキュリティプロファイルに関連する「Web Settings」を選択して、「Edit」を選択します。
- ユーザープールドメインを「Allowed Origins」に入力し、ユーザープールドメインと
/oauth2/idpresponseエンドポイントを「Allowed Return URLs」に入力します。 - 「Save」を選択します。
- Apple開発者認証情報でサインインします。
- メインの開発者ポータルページで、「Certificates, IDs, & Profiles」を選択します。
- 左側のナビゲーションバーで「Identifiers」を選択してから、右側のドロップダウンリストから「Service IDs」を選択します。
- 上記のセクションで設定したときに作成したService IDを選択します。
- 「Sign In with Apple」を有効にして「Configure」を選択します。
- 「Primary App ID」の下で、前に作成したApp IDを選択します。
- ユーザープールドメインを「Domains and Subdomains」に入力します。
- ユーザープールドメインと
/oauth2/idpresponseエンドポイントを「Return URLs」に入力します。 - 「Next」をクリックして情報を確認し、「Done」を選択します。
- 「Edit your Services ID Configuration」で「Continue」をクリックして情報を確認し、「Save」を選択します。
- メイン「Certificates, Identifiers & Profiles」で「Keys」を選択します。
- 「Keys」ページでプラスアイコン(+)を選択します。
- 「Key Name」の下でキーの名前を入力します。
- 「Sign in with Apple」を有効にして「Configure」を選択します。
- 「Primary App ID」の下で前に作成したApp IDを選択します。
- 「Save」をクリックします。
- 「Register a New Key」で「Continue」をクリックして情報を確認し、「Register」を選択します。
- 新しいページにリダイレクトされます。「Key ID」をメモして、秘密鍵を含む.p8ファイルをダウンロードします。
ユーザープールを使用したソーシャルアイデンティティプロバイダーの詳細については
外部プロバイダーからユーザーデータを取得するためのスコープのカスタマイズ
amplify/auth/resource.tsファイルでscopesを使用して、各外部プロバイダーをセットアップするときに取得するデータの詳細を決定できます。
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { loginWithAmazon: { clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'), scopes: ['email'] }, callbackUrls: ["myapp://callback/"], logoutUrls: ["myapp://signout/"], } }});属性マッピング
アイデンティティプロバイダー(IdP)サービスはユーザー属性をさまざまな形式で保存しています。Amazon Cognitoユーザープールで外部IdPを使用する場合、属性マッピングを使用すると、これらのさまざまな形式を一貫したスキーマに標準化できます。
IdP属性をユーザープールプロファイルとトークンにマッピングするについてさらに詳しく学びます。
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { loginWithAmazon: { clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'), attributeMapping: { email: 'email' } }, callbackUrls: ["myapp://callback/"], logoutUrls: ["myapp://signout/"], } }});OIDCプロバイダーを設定する
OIDCプロバイダーを設定するには、amplify/auth/resource.tsファイルで設定します。例えば、Microsoft EntraIDプロバイダーをセットアップしたい場合は、以下のようにできます。
import { defineAuth, secret } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { oidc: [ { name: 'MicrosoftEntraID', clientId: secret('MICROSOFT_ENTRA_ID_CLIENT_ID'), clientSecret: secret('MICROSOFT_ENTRA_ID_CLIENT_SECRET'), issuerUrl: '<your-issuer-url>', }, ], callbackUrls: ["myapp://callback/"], logoutUrls: ["myapp://signout/"], }, },});SAMLプロバイダーを設定する
SAMLプロバイダーを設定するには、amplify/auth/resource.tsファイルで設定します。例えば、Microsoft EntraIDプロバイダーをセットアップしたい場合は、以下のようにできます。
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { saml: { name: 'MicrosoftEntraIDSAML', metadata: { metadataContent: '<your-url-hosting-saml-metadata>', // or content of the metadata file metadataType: 'URL', // or 'FILE' }, }, callbackUrls: ["myapp://callback/"], logoutUrls: ["myapp://signout/"], }, },});フロントエンドをセットアップする
外部アイデンティティプロバイダーでサインインを開始するには、signInWithRedirect APIを使用します。
import { signInWithRedirect } from 'aws-amplify/auth';
signInWithRedirect({ provider: 'Apple'});リダイレクトURL
_Sign in_と_Sign out_リダイレクトURL(複数の場合もあります)は、サインインまたはサインアウト操作が発生した後にエンドユーザーをリダイレクトするために使用されます。開発/本番環境に異なるURLを使用したり、エンドユーザーを中間URLにリダイレクトしてからアプリに返したりするなど、様々なユースケースに対応するために複数のURLを指定したい場合があります。
サインアウト時にリダイレクトURLを指定する
複数のサインアウトリダイレクトURLが設定されている場合は、リダイレクトURLを選択する際のデフォルトの動作をオーバーライドして、signOutを呼び出すときに選択するURLを指定することができます。提供されるリダイレクトURLは、設定されているリダイレクトURLの少なくとも1つと一致する必要があります。signOutにリダイレクトURLが指定されていない場合は、設定されたリダイレクトURLリストから、HTTPまたはHTTPSプリフィックスを含まない最初のアイテムが選択されます。
import { signOut } from 'aws-amplify/auth';
// 次のURLが手動で提供されたか、Amplify設定ファイル経由で提供されたと仮定します。// redirectSignOut: 'myDevApp://,https://authProvider/logout?logout_uri=myDevApp://'
signOut({ global: false, oauth: { redirectUrl: 'https://authProvider/logout?logout_uri=myapp://' }});