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.

Learn more about Gen 2

Choose your framework/language

v5v6
Edit on GitHub

Page updated Sep 11, 2024

Maintenance ModeYou are viewing Amplify Gen 1 documentation. Amplify Gen 1 has entered maintenance mode and will reach end of life on May 1, 2027. New project should use Amplify Gen 2. For existing Gen 1 projects, a migration guide and tooling are available to help you upgrade. Switch to the latest Gen 2 docs →

ソーシャルプロバイダーのサインインを追加

アプリにソーシャルプロバイダー（Apple、Amazon、Facebook、Google など）の既存アカウントを使用したサインインと認証を有効にできます。バックエンドリソースを設定した後、そのプロバイダーのサインインアプリを設定できます。このプロセスはセキュアに認証情報を交換し、ユーザー情報を収集します。この情報は、アプリで新しいユーザーを作成するか、ソーシャルアカウントを既存ユーザーにリンクするために使用できます。ソーシャルプロバイダーのサインインを組み込むことで、ユーザーに合理化された登録、より多くのサインインオプション、および既存アカウントとアプリ間の統合エクスペリエンスを提供します。

このガイドでは、まずプロバイダーで開発者アカウントをセットアップし、その後、Auth カテゴリを設定し、ソーシャルサインインをアプリに統合する方法を説明します。

開始する前に、以下が必要です:

  • Amplify プロジェクト
  • インストールして設定された Amplify ライブラリ
詳細を学ぶ
OAuth 認証の仕組みを確認

ソーシャルプロバイダーのサインインを組み込む推奨される方法は、OAuth リダイレクトを使用することです。これによりユーザーはソーシャルメディアアカウントを使用してサインインでき、Cognito ユーザープールに対応するユーザーが作成されます。

OAuth 2.0 は、Web およびモバイルアプリケーションがユーザー情報（「スコープ」）に限定的にアクセスするために使用する一般的な認可フレームワークです。OAuth で一般的に聞かれるアナロジーは飛行機の搭乗またはホテルの宿泊です。身分証明書の提示は認証部分（アプリへのサインイン）であり、搭乗券/ホテルキーの使用はアクセスを許可されている部分です。

Amplify での OAuth サポートは Cognito ユーザープールを使用し、ソーシャルプロバイダーでのフェデレーションをサポートしており、ユーザーがサインイン後、ユーザープールに対応するユーザーが自動的に作成されます。この設計では、アプリにソーシャルプロバイダーの SDK を含める必要はありません。これらのソーシャルプロバイダーで開発者アカウントをセットアップした後、amplify add auth を実行し、ソーシャルプロバイダーオプションを選択することで、Auth カテゴリを設定できます。その後、アプリで signInWithRedirect() を使用して、事前構築された「ホストされた UI」を表示するか、プロバイダー名を渡す（例：signInWithRedirect({provider:'Facebook'})）ことで、直接インターフェースし、独自の UI を構築できます。Image

ソーシャル認証プロバイダーをセットアップ

Amplify Auth でソーシャルサインインを設定する前に、使用している各プロバイダーで開発者アカウントをセットアップする必要があります。

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

  1. Facebook で開発者アカウントを作成します。

  2. Facebook の認証情報でサインインします。

  3. トップナビゲーションバーから My Apps を選択し、ロードされたページで Create App を選択します。Facebook 開発者アカウントの [マイアプリ] ページの [アプリを作成] ボタン。

  4. ユースケースについて、Set up Facebook Login を選択します。リストから選択された [Facebook ログインのセットアップ] オプション。

  5. プラットフォームについて、Website を選択し、No, I'm not building a game を選択します。

  6. Facebook アプリに名前を付け、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 を選択します。左上のメニューアイコンが選択され、次に [API とサービス] オプション、次に認証情報オプションが選択されます。

  6. CONFIGURE CONSENT SCREEN をクリックします。OAuth 同意画面セクションの [同意画面を設定] ボタンが円で囲まれています。

  7. CREATE をクリックします。OAuth 同意画面セクションの [作成] ボタンが円で囲まれています。

  8. App Information と Developer contact information を入力します。これらは必須フィールドであり、3 回（OAuth 同意画面 -> スコープ -> テストユーザー）SAVE AND CONTINUE をクリックして、同意画面のセットアップを完了します。

  9. Credentials タブに戻り、Create credentials ドロップダウンリストから OAuth client ID を選択して OAuth2.0 認証情報を作成します。認証情報セクションで [認証情報を作成] ボタンが円で囲まれ、次に oauth クライアント ID ボタンが円で囲まれています。

  10. Application type として Web application を選択し、OAuth クライアントに名前を付けます。

  11. Create をクリックします。

  12. Your client ID と Your Client Secret をメモしておきます。次のセクションの CLI フローで必要です。

  13. OK を選択します。

  1. Amazon で開発者アカウントを作成します。

  2. Amazon の認証情報でサインインします。

  3. Amazon クライアント ID とクライアントシークレットを受け取るために、Amazon セキュリティプロファイルを作成する必要があります。Create a Security Profile を選択します。ログイン 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 ページで、plus icon (+) を選択します。

  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. plus icon (+) を選択し、Register a New Identifier ページで Services IDs を選択します。

  12. Description テキストボックスに説明を入力し、Service ID の識別子を入力します。証明書、識別子およびプロファイルセクションでサービス ID を登録します。

  13. Continue を選択して Service ID を登録します。

ソーシャルプロバイダーでの開発者アカウントのセットアップが完了し、Amplify プロジェクトに戻って次のステップに進むことができます。

Auth カテゴリを設定

ソーシャルプロバイダーを設定したら、Amplify CLI を通じて Auth 設定を更新できます。

Amplify CLI を通じてソーシャルサインインを設定する場合、属性を「必須」として指定する際は慎重に行うことが重要です。各ソーシャル ID プロバイダーは、Cognito に返すさまざまな情報を持っています。最初は「必須」として設定されたユーザープール属性は後で変更できません。要件を変更する必要がある場合は、ユーザーをマイグレートするか、新しいユーザープールを作成する必要があります。

CLI を開始するには、プロジェクトのルートフォルダで以下を実行します:

amplify add auth     ## すでに設定されている場合は「amplify update auth」

次のオプションを選択します:

? Do you want to use the default authentication and security configuration?
    `Default configuration with Social Provider (Federation)`
? How do you want users to be able to sign in?
    `Username`
? Do you want to configure advanced settings?
    `No, I am done.`
? What domain name prefix you want us to create for you?
    `(default)`
? Enter your redirect signin URI:
    `myapp://`
? Do you want to add another redirect signin URI
    `No`
? Enter your redirect signout URI:
    `myapp://`
? Do you want to add another redirect signout URI
    `No`
? Select the social providers you want to configure for your user pool:
    `<適切なトークンを入力するようにプロバイダーを選択して、プロンプトに従います>`

注: 複数のリダイレクト URL を使用するようにアプリケーションを設定できます。詳細については、以下のリダイレクト URL セクションを参照してください。

次に、amplify push を実行して変更を公開します。完了すると、Web UI の自動生成 URL が表示されます。CLI で amplify status を実行することにより、いつでもユーザープールドメイン URL を取得できます。

ここで、このURL をソーシャルプロバイダーに知らせる必要があります:

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

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

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

  4. すでに追加されている場合は、Configure ドロップダウンの下の Settings を選択します。構成ドロップダウンから Settings オプションが円で囲まれています。

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

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

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

  1. 変更を保存します。

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

  2. 左のナビゲーションバーで、Pinned の下の APIs and Services、またはピン留めされていない場合は More Products の下を探します。

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

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

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

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

    許可された Javascript オリジンと許可されたリダイレクト URL の URL 1 フォームフィールドが円で囲まれています。

    注: エンドポイントを追加するときにエラーメッセージ 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 設定] オプションが選択されています。

  3. ユーザープールドメインを Allowed Origins に入力し、/oauth2/idpresponse エンドポイント付きのユーザープールドメインを Allowed Return URLs に入力します。ユーザープールドメインが許可された生成フィールドに入力され、/oauth2/ がエンドポイントとして許可されたリターン URL フィールドに入力されます。

  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. Return URLs に、/oauth2/idpresponse エンドポイント付きのユーザープールドメインを入力します。Return URLs テキストフィールドが選択されています。

  9. Next をクリックし、情報を確認してから Done を選択します。

  10. Edit your Services ID Configuration で Continue をクリックし、情報を確認してから Save を選択します。

  11. メイン Certificates, Identifiers & Profiles で、Keys を選択します。

  12. Keys ページで、plus icon (+) を選択します。

  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 ファイルをダウンロードするオプション付きのダウンロードキーページが表示されています。

注: フェデレーションサインインは、ユーザープール内のカスタム認証チャレンジ Lambda トリガー、ユーザーマイグレーション Lambda トリガー、カスタムメッセージ Lambda トリガー、またはカスタム送信者 Lambda トリガーを呼び出しません。サポートされている Lambda トリガーについては、AWS ドキュメントを参照してください。

Auth カテゴリを設定し、ソーシャルプロバイダーで URL を更新しました。これでアプリのフロントエンドをセットアップできます。

ネイティブモジュールをインストール

signInWithRedirect はプラットフォーム固有の webview 内にサインイン UI を表示します。iOS デバイスでは ASWebAuthenticationSession が起動され、Android では Custom Tab が起動されます。サインインプロセスが完了した後、サインイン UI はアプリにリダイレクトバックされます。

この機能を有効にするには、追加の依存関係をインストールする必要があります。

npm install @aws-amplify/rtn-web-browser

プラットフォームセットアップ

iOS では、追加のセットアップステップは不要です。

Android

サインインが成功した後、サインイン UI はアプリケーションにリダイレクトバックを試みます。上で設定したリダイレクト URI スキームをデバイスに登録するには、React Native アプリの android/app/src/main ディレクトリにあるはずのアプリケーションの AndroidManifest.xml ファイルに intent-filter を追加する必要があります。

必要に応じて、intent-filter をアプリケーションのメインアクティビティに追加し、myapp をリダイレクト URI スキームに置き換えます。

<application ...>
    <activity android:name=".MainActivity" ...>
        ...
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="myapp" />
        </intent-filter>
        ...
    </activity>
</application>

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

OAuth エンドポイント（Cognito ホストされた UI）を設定した後、signInWithRedirect 関数を呼び出すことでアプリを統合できます。これによりユーザーは Cognito ホストされた UI にリダイレクトされ、ユーザー名とパスワードでのサインイン、および設定したソーシャルプロバイダーのいずれでもサインインするオプションが表示されます。また、provider 引数に Amazon、Apple、Facebook、または Google を渡す（例：signInWithRedirect({ provider: 'Amazon' })）と、ホストされた UI をバイパスし、以下の例に示すようにソーシャルプロバイダーと直接フェデレーションできます。

注: Authenticator UI コンポーネントを使用してソーシャルサインインフローをアプリケーションに追加することもできます。Authenticator は設定済み Amplify socialProviders から直接読み込みます。詳細については、ソーシャルプロバイダーセクションをご覧ください。

カスタム状態を追加

カスタム状態は必須ではありませんが、追加したい場合は、文字列値を渡す（例：signInWithRedirect({ customState: 'xyz' })）ことで、Hub を介してカスタム状態をリッスンできます。また、Hub イベント処理システムを使用して、signInWithRedirect() を使用エラーをキャッチし、signInWithRedirect_failure イベントをリッスンできます。

import React, { useEffect, useState } from "react";
import {
  Button,
  SafeAreaView,
  Text,
} from "react-native";


import { AuthUser, getCurrentUser, signInWithRedirect, signOut } from "aws-amplify/auth";
import { Hub } from "@aws-amplify/core";




function App(): JSX.Element {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [error, setError] = useState<unknown>(null);
  const [customState, setCustomState] = useState<string | null>(null);


  useEffect(() => {
    const unsubscribe = Hub.listen("auth", ({ payload }) => {
      switch (payload.event) {
        case "signInWithRedirect":
          getUser();
          break;
        case "signInWithRedirect_failure":
          setError("An error has occurred during the OAuth flow.");
          break;
        case "customOAuthState":
          setCustomState(payload.data); // this is the customState provided on signInWithRedirect function
          break;
      }
    });


    getUser();


    return unsubscribe;
  }, []);
  
  const getUser = async (): Promise<void> => {
    try {
      const currentUser = await getCurrentUser();
      setUser(currentUser);
    } catch (error) {
      console.error(error);
      console.log("Not signed in");
    }
  };


  return (
    <SafeAreaView>
      <Button title="Sign In" onPress={() => signInWithRedirect({ customState: "shopping-cart"})}></Button>
      <Text>{user?.username}</Text>
      <Text>{customState}</Text>
      <Button title="Sign Out" onPress={() => signOut()}></Button>
    </SafeAreaView>
  );
}
import React, { useEffect, useState } from "react";
import {
  Button,
  SafeAreaView,
  Text,
} from "react-native";


import { getCurrentUser, signInWithRedirect, signOut } from "aws-amplify/auth";
import { Hub } from "@aws-amplify/core";


function App() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  const [customState, setCustomState] = useState(null);


  useEffect(() => {
    const unsubscribe = Hub.listen("auth", ({ payload }) => {
      switch (payload.event) {
        case "signInWithRedirect":
          getUser();
          break;
        case "signInWithRedirect_failure":
          setError("An error has occurred during the OAuth flow.");
          break;
        case "customOAuthState":
          setCustomState(payload.data);
          break;
      }
    });


    getUser();


    return unsubscribe;
  }, []);
  
  const getUser = async () => {
    try {
      const currentUser = await getCurrentUser();
      setUser(currentUser);
    } catch (error) {
      console.error(error);
      console.log("Not signed in");
    }
  };


  return (
    <SafeAreaView>
      <Button title="Sign In" onPress={() => signInWithRedirect({ customState: "shopping-cart"})}></Button>
      <Text>{user?.username}</Text>
      <Text>{customState}</Text>
      <Button title="Sign Out" onPress={() => signOut()}></Button>
    </SafeAreaView>
  );
}

リダイレクト URL

サインイン & サインアウト リダイレクト URL は、サインインまたはサインアウト操作の実行後にエンドユーザーをリダイレクトするために使用されます。開発/本番環境用に異なる URL を指定したり、ユーザーをアプリに戻す前に中間 URL にリダイレクトしたりするなど、複数の URL を指定する場合があります。

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

複数のサインアウトリダイレクト URL が設定されている場合、リダイレクト URL を選択するデフォルト動作をオーバーライドし、signOut を呼び出すときに選択したものを指定できます。提供されたリダイレクト URL は、設定されたリダイレクト URL の少なくとも 1 つと一致する必要があります。signOut にリダイレクト URL が指定されていない場合、HTTP または HTTPS プレフィックスを含まない設定済みリダイレクト URL リストの最初の項目が選択されます。

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


// Amplify 設定ファイルを通じて手動で提供される、または以下の URL が提供されていると仮定します
// redirectSignOut: 'myDevApp://,https://authProvider/logout/?logout_uri=myDevApp://'


signOut({
  global: false,
  oauth: {
    redirectUrl: 'https://authProvider/logout/?logout_uri=myDevApp://'
  }
});
signOut に redirectUrl が提供されるかどうかにかかわらず、http または https を含まない URL は設定されたリダイレクト URL リストに存在することが予想されます。これは iOS が Web セッションを作成する際に appScheme を必要とするためです。

カスタムプロバイダー

Cognito でデフォルトで提供されていないカスタムプロバイダーを使用する場合、カスタムプロバイダーの名前を含むオブジェクトを provider パラメータに渡すことができます。

import { signInWithRedirect } from 'aws-amplify/auth';


const provider = {
  custom: 'MyCustomOIDCProvider'
}


function handleSignInClick() {
    signInWithRedirect({ provider })
}

ソーシャルサインインのための認証パラメータを使用して、バックエンドリソースをデプロイ

認証設定を作成または更新すると、Amplify はローカルで設定をセットアップしますが、バックエンド環境への変更を自動的にはデプロイしません。amplify push を実行してバックエンド環境に変更をデプロイする必要があります。

まとめ

ソーシャルプロバイダーのサインインを追加 ガイドが完了しました。このガイドでは、ソーシャル認証プロバイダーをセットアップし、ソーシャルサインイン用に Amplify Auth カテゴリを設定し、フロントエンドをセットアップする方法を学びました。これでユーザーはソーシャルプロバイダーアカウントを使用してアプリにサインインできます。

次のステップ

ソーシャルプロバイダーのサインインが完了したので、これらのワークフローをカスタマイズする方法について詳しく知ることができます。以下をお勧めします:

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.