ステップ 2.アプリケーションを追加して、ホストされたウェブの UI を有効にする - Amazon Cognito

ステップ 2.アプリケーションを追加して、ホストされたウェブの UI を有効にする

ユーザープールを作成すると、アプリを作成して、組み込みウェブページを使用し、ユーザーのサインアップとサインインを行うことができます。

ユーザープールでアプリを作成するには

  1. Amazon Cognito コンソールに移動します。AWS 認証情報を要求される場合があります。

  2. [ユーザープールの管理] を選択します。

  3. リストから既存のユーザープールを選択するか、ユーザープールを作成します。

  4. ページの左側にあるナビゲーションバーで、[全般設定] の [アプリクライアント] を選択します。

  5. [Add an app client] を選択します。

  6. アプリに名前を付けます。

  7. この「開始方法」演習では、[クライアントシークレットを生成する] オプションは使用しません。クライアント側の JavaScript を使用して URL で送信することは安全ではないためです。クライアントシークレットは、アプリケーションのサーバー側のコンポーネントでクライアントシークレットを保護できる場合に使用します。

  8. [Create app client] を選択します。

  9. [アプリクライアント ID] を書き留めます。

  10. [プールの詳細に戻る] を選択します。

  11. コンソールページの左側にあるナビゲーションバーで、[アプリクライアントの設定] を選択します。

  12. [Cognito ユーザープール] を [有効な ID プロバイダー] の 1 つとして選択します。

    注記

    Facebook、Amazon、Google、Apple に加え、OpenID Connect (OIDC) や SAML IdP など、外部の ID プロバイダー (IdP) を使用してサインインするには、まず以下の説明に従ってプロバイダーを設定してから、[アプリクライアントの設定] ページに戻って、プロバイダーを有効にします。

  13. ユーザーが認証された後 Amazon Cognito 承認サーバーが呼び出すコールバック URL を入力します。ウェブアプリについては、URL は、https://www.example.com のように https:// で始まる必要があります。

    iOS または Android アプリの場合は、myapp:// などのコールバック URL を使用できます。

  14. サインアウト URL を入力します。

  15. [Authorization code grant (認証コードの付与)] を選択して、ユーザープールトークンと交換される認証コードが返されます。トークンはエンドユーザーに直接公開されないため、侵害される可能性は低くなります。ただし、ユーザープールトークンの認証コードを交換するために、バックエンドでカスタムアプリケーションが必要です。セキュリティ上の理由から、モバイルアプリ用の認証コード付与フローとコード交換用証明キー (PKCE) を併用することをお勧めします。

  16. [許可されている OAuth フロー] で [暗黙的付与] を選択し、Amazon Cognito から、ユーザープール JSON ウェブトークン (JWT) を返します。このフローは、トークンの認証コードを交換できるバックエンドがない場合に使用できます。トークンのデバッグにも役立ちます。

    注記

    [Authorization code grant (認証コードの付与)] と [Implicit code grant (暗黙的コードの付与)] の両方を有効にして、必要に応じて各権限を使用することができます。

  17. 具体的に除外する必要がない限り、すべての [許可されている OAuth スコープ] のチェックボックスをオンにします。

    注記

    アプリがユーザーの代わりではなく自身の代わりとしてアクセストークンをリクエストする必要がある場合にのみ、[クライアント認証情報] を選択します。

  18. [Save changes] を選択します。

  19. [ドメイン名] ページで、利用可能なドメインプレフィックスを入力します。

  20. 完全なドメインアドレスを書き留めます。

  21. [Save changes] を選択します。

サインインページを表示するには

ホストされた UI のサインインウェブページを表示するには、次の URL を使用します。response_type を書き留めます。この場合は、認証コード付与の response_type=code です。

https://your_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url

response_type=token である暗黙のコード付与の次の URL を使用して、ホストされた UI サインインウェブページを表示できます。サインインに成功すると、Amazon Cognito は、ユーザープールのトークンをウェブブラウザのアドレスバーに返します。

https://your_domain/login?response_type=token&client_id=your_app_client_id&redirect_uri=your_callback_url

JSON ウェブトークン (JWT) ID トークンは、レスポンスの #idtoken= パラメータの後にあります。

ここでは、暗黙的な付与リクエストからのレスポンスの例を示します。ID トークン文字列はもっと長くなります。

https://www.example.com/#id_token=123456789tokens123456789&expires_in=3600&token_type=Bearer

AWS Lambda を使用してユーザープールトークンをデコードし、検証できます。AWS GitHub ウェブサイトの Amazon Cognito JWT トークンのデコードと検証を参照してください。

Amazon Cognito ユーザープールトークンは、RS256 アルゴリズムを使用して署名されます。

コンソールで行った変更が表示される前に、ブラウザを更新するため 1 分待たなければならない場合があります。

ドメインは [ドメイン名] ページに表示されています。アプリクライアント ID およびコールバック URL は [全般設定] ページに表示されています。

次のステップ

ステップ 3.ユーザープールにソーシャルサインインを追加する (オプション)