Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Fullstack TypeScript

Write your app's data model, auth, storage, and functions in TypeScript; Amplify will do the rest.

Built with the AWS CDK

Use any cloud resource your app needs. Never worry about scale.

Back to Gen 1 DocsLearn more about Gen 2
Build a BackendFrontend LibrariesUI LibrariesDevelop with AIHostingReference

Choose your framework/language

Gen1 DocsLegacy
Edit on GitHub

Page updated Mar 26, 2026

Looking for how to use this in your app?See Frontend Libraries →

外部アイデンティティプロバイダー

Amplify Authで外部サインインを設定する前に、使用する各プロバイダーで開発者アカウントを設定する必要があります。

注釈: Amazon Cognitoは、Facebook Login、Google Sign-In、Login with Amazon、Sign in with Appleのファーストクラスサポートを提供し、シームレスなセットアップを実現します。ただし、SAMLまたはOpenID Connect（OIDC）をサポートする他のアイデンティティプロバイダーを設定することもできます。

警告: 外部サインインを設定する際は、属性を「必須」として指定する場合は注意が必要です。外部アイデンティティプロバイダーによって、Cognitoに返される情報のスコープが異なります。最初に「必須」として設定されたユーザープール属性は後から変更することはできず、ユーザーの移行または新しいユーザープールの作成が必要になる可能性があります。

  1. Facebookの開発者アカウントを作成します。
  2. Facebook認証情報でサインインします。
  3. トップナビゲーションバーから「My Apps」を選択し、読み込まれたページで「Create App」を選択します。Facebook開発者アカウントのMy Appsページの[Create App]ボタン。
  4. ユースケースについて「Set up Facebook Login」を選択します。リストから選択された[Set up Facebook Login]オプション。
  5. プラットフォームについて「Website」を選択し、「No, I'm not building a game」を選択します。
  6. FacebookアプリにはAppスププやDiscoveryに名前を付け、「Create app」を選択します。Facebookアプリをまとめるフォームのフォームフィールド。
  7. 左側のナビゲーションバーから「Settings」を選択し、「Basic」を選択します。ダッシュボードの[基本設定]タブのApp IDとApp Secret。
  8. 「App ID」と「App Secret」をメモします。次のセクションでCLIフローで使用します。
  1. Google開発者コンソールに移動します。
  2. 「Select a project」をクリックします。ナビゲーションバーの[プロジェクトを選択]ボタンが丸で囲まれています。
  3. 「NEW PROJECT」をクリックします。プロジェクト選択ポップアップの新規プロジェクトボタンが丸で囲まれています。
  4. プロジェクト名を入力して「CREATE」をクリックします。新しいプロジェクトページの[作成]ボタンが丸で囲まれています。
  5. プロジェクトが作成されたら、左側のナビゲーションメニューから「APIs & Services」を選択し、次に「Credentials」を選択します。左上のメニューアイコンが選択され、次にAPIs and servicesオプション、次にcredentialsオプションが選択されています。
  6. 「CONFIGURE CONSENT SCREEN」をクリックします。OAuth同意画面セクションの[同意画面を設定]ボタンが丸で囲まれています。
  7. 「CREATE」をクリックします。OAuth同意画面セクションの[作成]ボタンが丸で囲まれています。
  8. 「App Information」と「Developer contact information」に入力します。これらは必須フィールドで、「SAVE AND CONTINUE」を3回クリック（OAuth同意画面->スコープ->テストユーザー）して同意画面のセットアップを完了します。
  9. 「Credentials」タブに戻り、「Create credentials」ドロップダウンリストから「OAuth client ID」を選択してOAuth2.0認証情報を作成します。「認証情報を作成」ボタンが丸で囲まれ、次に「認証情報」セクションのOAuthクライアントIDボタンが丸で囲まれています。
  10. 「Application type」として「Web application」を選択し、OAuth Clientに名前を付けます。
  11. 「Create」をクリックします。
  12. 「Your client ID」と「Your Client Secret」をメモします。次のセクションでCLIフローで必要になります。
  13. 「OK」を選択します。
  1. Amazonの開発者アカウントを作成します。
  2. Amazon認証情報でサインインします。
  3. Amazon Client IDとClient Secretを受け取るには、Amazonセキュリティプロファイルを作成する必要があります。「Create a Security Profile」を選択します。新しいセキュリティプロファイルを作成するボタンが表示されたLogin with Amazonコンソール。
  4. 「Security Profile Name」、「Security Profile Description」、「Consent Privacy Notice URL」に入力します。新しいセキュリティプロファイルのフォームに入力するステップを示すセキュリティプロファイル管理ページ。
  5. 「Save」を選択します。
  6. 「Show Client ID」と「Client Secret」を選択してクライアントIDとシークレットを表示します。次のセクションでCLIフローで必要になります。クライアントIDとクライアントシークレットの選択。
  1. Apple開発者認証情報でサインインします。
  2. メインの開発者ポータルページで、「Certificates, IDs, & Profiles」を選択します。
  3. 左側のナビゲーションバーで「Identifier」を選択します。
  4. 「Identifiers」ページでプラスアイコン（+）を選択します。
  5. 「Register a New Identifier」ページで「App IDs」を選択します。
  6. 「Register an App ID」ページの「App ID Prefix」の下から「Team ID」の値をメモします。
  7. 「Description」テキストボックスに説明を入力し、iOSアプリのbundleIDを入力します。証明書、識別子、プロファイルセクションのApp IDを登録します。
  8. 「Capabilities」の下で「Sign in with Apple」を選択します。
  9. 「Continue」を選択し、設定を確認してから「Register」を選択します。
  10. 「Identifiers」ページで、右側から「App IDs」を選択し、次に「Services ID」を選択します。
  11. プラスアイコン（+）を選択し、「Register a New Identifier」ページで「Services IDs」を選択します。
  12. 「Description」テキストボックスに説明を入力し、Service IDの識別子を入力します。証明書、識別子、プロファイルセクションのサービスIDを登録します。
  13. 「Continue」を選択してService IDを登録します。

外部プロバイダーの開発者アカウントが設定されたので、Amplify固有の設定に戻ることができます。

外部サインインバックエンドを設定する

amplify/auth/resource.ts内で外部プロバイダーを追加する必要があります。

以下は、Amplify Authがサポートするすべての外部プロバイダーへのアクセスをセットアップする方法の例です。アプリケーションのcallbackUrlsとlogoutUrls URLを設定する必要があります。これらはバックエンドリソースに対してアプリでのサインインおよびサインアウト操作の開始時に動作するかを指示します。

シークレットは、クラウドサンドボックスで使用するためにampx sandbox secretで手動で作成するか、ブランチ環境のAmplify Consoleで作成する必要があります。

amplify/auth/resource.ts
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: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile'
      ],
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
    }
  }
});

新しく設定された認証リソースとそのOAuthリダイレクトURIについて外部プロバイダーに通知する必要があります。

  1. Facebook認証情報でFacebook開発者アカウントにサインインします。

  2. トップナビゲーションバーから「My Apps」を選択し、「Apps」ページで以前作成したアプリを選択します。

  3. 左側のナビゲーションバーで「Products」を選択します。まだ追加されていない場合は「Facebook Login」を追加します。

  4. 既に追加されている場合は、「Configure」ドロップダウンの下から「Settings」を選択します。「Configure」ドロップダウンから選択された[Settings]オプション。

  5. 「Valid OAuth Redirect URIs」の下に、ユーザープールドメインと/oauth2/idpresponseエンドポイントを入力します。

    https://<your-user-pool-domain>/oauth2/idpresponse

ユーザープールドメインが/oauth2/エンドポイント付きでテキストフィールドに貼り付けられています。

  1. 変更を保存します。

  1. Google開発者コンソールに移動します。

  2. 左側のナビゲーションバーで、「Pinned」または「More Products」の下にある「APIs and Services」を探します。

  3. 「APIs and Services」サブメニュー内で「Credentials」を選択します。

  4. 最初のステップで作成したクライアントを選択して「Edit」ボタンをクリックします。

  5. 「Authorized JavaScript origins」フォームにユーザープールドメインを入力します。

  6. 「Authorized Redirect URIs」にユーザープールドメインと/oauth2/idpresponseエンドポイントを入力します。

    「Authorized JavaScript origins」と「Authorized redirect URLs」のURLフォームフィールドが丸で囲まれています。

    注釈: エンドポイントを追加するときにInvalid Redirect: domain must be added to the authorized domains list before submitting.というエラーメッセージが表示された場合は、「Authorized Domains List」に移動してドメインを追加してください。

  7. 「Save」をクリックします。

  1. Amazon認証情報でサインインします。
  2. ギアにカーソルを合わせて、前のステップで作成したセキュリティプロファイルに関連する「Web Settings」を選択して、「Edit」を選択します。ギアアイコンのドロップダウンメニューから選択されたWeb Settingsオプション。
  3. ユーザープールドメインを「Allowed Origins」に入力し、ユーザープールドメインと/oauth2/idpresponseエンドポイントを「Allowed Return URLs」に入力します。ユーザープールドメインが[Allowed Origins]フィールドに入力され、/oauth2/が[Allowed Return URLs]フィールドのエンドポイントとして入力されています。
  4. 「Save」を選択します。
  1. Apple開発者認証情報でサインインします。
  2. メインの開発者ポータルページで、「Certificates, IDs, & Profiles」を選択します。
  3. 左側のナビゲーションバーで「Identifiers」を選択してから、右側のドロップダウンリストから「Service IDs」を選択します。
  4. 上記のセクションで設定したときに作成したService IDを選択します。
  5. 「Sign In with Apple」を有効にして「Configure」を選択します。
  6. 「Primary App ID」の下で、前に作成したApp IDを選択します。
  7. ユーザープールドメインを「Domains and Subdomains」に入力します。
  8. ユーザープールドメインと/oauth2/idpresponseエンドポイントを「Return URLs」に入力します。「Return URLs」テキストフィールドが選択されています。
  9. 「Next」をクリックして情報を確認し、「Done」を選択します。
  10. 「Edit your Services ID Configuration」で「Continue」をクリックして情報を確認し、「Save」を選択します。
  11. メイン「Certificates, Identifiers & Profiles」で「Keys」を選択します。
  12. 「Keys」ページでプラスアイコン（+）を選択します。
  13. 「Key Name」の下でキーの名前を入力します。
  14. 「Sign in with Apple」を有効にして「Configure」を選択します。「Sign in with Apple」オプションが有効になり、キー名のテキストフィールドが入力されています。
  15. 「Primary App ID」の下で前に作成したApp IDを選択します。
  16. 「Save」をクリックします。
  17. 「Register a New Key」で「Continue」をクリックして情報を確認し、「Register」を選択します。
  18. 新しいページにリダイレクトされます。「Key ID」をメモして、秘密鍵を含む.p8ファイルをダウンロードします。ダウンロードキーページが表示され、秘密鍵を含む.p8ファイルをダウンロードするオプション。

ユーザープールを使用したソーシャルアイデンティティプロバイダーの詳細については

外部プロバイダーからユーザーデータを取得するためのスコープのカスタマイズ

amplify/auth/resource.tsファイルでscopesを使用して、各外部プロバイダーをセットアップするときに取得するデータの詳細を決定できます。

amplify/auth/resource.ts
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: ['profile']
      },
      callbackUrls: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile'
      ],
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
    }
  }
});

属性マッピング

アイデンティティプロバイダー（IdP）サービスはユーザー属性をさまざまな形式で保存しています。Amazon Cognitoユーザープールで外部IdPを使用する場合、属性マッピングを使用すると、これらのさまざまな形式を一貫したスキーマに標準化できます。

IdP属性をユーザープールプロファイルとトークンにマッピングするについてさらに詳しく学びます。

注釈: フェデレーテッドユーザーがアプリケーションにサインインすると、ユーザープールが必要とする各属性のマッピングが必要です。さらに、各属性マッピングのターゲットがミュータブルであることを確認する必要があります。Amazon Cognitoは、最新の値が既存の情報と一致するかどうかに関係なく、ユーザーがサインインするときに各マップされた属性を更新しようとします。これらの条件が満たされない場合、Amazon Cognitoはエラーを返し、サインイン試行は失敗します。

amplify/auth/resource.ts
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: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile'
      ],
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
    }
  }
});

React Authenticatorコンポーネントを外部プロバイダー用に設定する方法についてさらに詳しく学びます

OIDCプロバイダーを設定する

OIDCプロバイダーを設定するには、amplify/auth/resource.tsファイルで設定します。例えば、Microsoft EntraIDプロバイダーをセットアップしたい場合は、以下のようにできます。

amplify/auth/resource.ts
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>',
        },
      ],
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
      callbackUrls: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile',
      ],
    },
  },
});

OIDCアイデンティティプロバイダーでサインインを開始するには、signInWithRedirect APIを使用します。

src/my-client-side-js.js
import { signInWithRedirect } from 'aws-amplify/auth';


await signInWithRedirect({
  provider: {
    custom: 'MicrosoftEntraID'
  }
});

SAMLプロバイダーを設定する

SAMLプロバイダーを設定するには、amplify/auth/resource.tsファイルで設定します。例えば、Microsoft EntraIDプロバイダーをセットアップしたい場合は、以下のようにできます。

amplify/auth/resource.ts
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'
        },
      },
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
      callbackUrls: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile',
      ],
    },
  },
});

SAMLアイデンティティプロバイダーでサインインを開始するには、signInWithRedirect APIを使用します。

src/my-client-side-js.js
import { signInWithRedirect } from 'aws-amplify/auth';


await signInWithRedirect({
  provider: {
    custom: 'MicrosoftEntraIDSAML'
  }
});

フロントエンドをセットアップする

AmplifyでAuthenticatorコンポーネントを使用している場合、この機能は追加のコードなしで機能します。以下のガイドは独自の実装を書くためのものです。

外部アイデンティティプロバイダーでサインインを開始するには、signInWithRedirect APIを使用します。

src/my-client-side-js.js
import { signInWithRedirect } from 'aws-amplify/auth';


await signInWithRedirect({
  provider: 'Apple'
});

リダイレクトURL

_Sign in_と_Sign out_リダイレクトURL（複数の場合もあります）は、サインインまたはサインアウト操作が発生した後にエンドユーザーをリダイレクトするために使用されます。開発/本番環境に異なるURLを使用したり、エンドユーザーを中間URLにリダイレクトしてからアプリに返したりするなど、様々なユースケースに対応するために複数のURLを指定したい場合があります。

サインアウト時にリダイレクトURLを指定する

複数のサインアウトリダイレクトURLが設定されている場合は、リダイレクトURLを選択する際のデフォルトの動作をオーバーライドして、signOutを呼び出すときに選択するURLを指定することができます。提供されるリダイレクトURLは、設定されているリダイレクトURLの少なくとも1つと一致する必要があります。signOutにリダイレクトURLが指定されていない場合は、現在のアプリドメインに基づいてURLが選択されます。

import { Amplify } from 'aws-amplify';
import { signOut } from 'aws-amplify/auth';


// 次のURLが手動で提供されたか、Amplify設定ファイル経由で提供されたと仮定します。
// redirectSignOut: 'http://localhost:3000/,https://authProvider/logout?logout_uri=https://mywebsite.com/'


signOut({
  global: false,
  oauth: {
    redirectUrl: 'https://authProvider/logout?logout_uri=https://mywebsite.com/'
  }
});

（マルチページアプリケーションの場合）リダイレクト後に外部サインインを完了する

マルチページアプリケーションを開発していて、リダイレクトされたページがサインインを開始したページと異なる場合は、サインインが確実に完了されるように、リダイレクトされたページに次のコードを追加する必要があります。

src/my-redirected-page.ts
import 'aws-amplify/auth/enable-oauth-listener';
import { getCurrentUser, fetchUserAttributes } from 'aws-amplify/auth';
import { Hub } from 'aws-amplify/utils';


Hub.listen("auth", async ({ payload }) => {
  switch (payload.event) {
    case "signInWithRedirect":
      const user = await getCurrentUser();
      const userAttributes = await fetchUserAttributes();
      console.log({user, userAttributes});
      break;
    case "signInWithRedirect_failure":
      // サインイン失敗を処理する
      break;
    case "customOAuthState":
      const state = payload.data; // これはsignInWithRedirect関数で提供されるcustomStateになります
      console.log(state);
      break;
  }
});

注釈: リスナーはSSR対応プロジェクトのコンテキスト内でクライアント側でのみ機能するため、クライアント側のみでリスナーをインポートするようにしてください。例えば、Next.jsプロジェクトでは、'use client'で上記のインポートステートメントをクライアント側のみでレンダリングするコンポーネントに追加する必要があります。

内部では
マルチページアプリケーションで外部サインインを明示的に処理する必要がある理由

signInWithRedirect関数をインポートして使用すると、エンドユーザーがアプリにリダイレクトされたときに外部サインインを完了するリスナーがサイドエフェクトとして追加されます。これはシングルページアプリケーションではうまく機能しますが、マルチページアプリケーションでは、元々サイドエフェクトとして追加されたリスナーを含まないページにリダイレクトされる可能性があります。したがって、ログイン成功ページに特定のOAuthリスナーを含める必要があります。

次のステップ

PREVIOUS
多要素認証
NEXT
ゲストアクセス
Site color mode

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2026, Amazon Web Services, Inc. and its affiliates.

All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.