ステップ 2. アプリクライアントを追加してホストされた UI を設定する
ユーザープールを作成すると、アプリを作成して、組み込みウェブページを使用し、ユーザーのサインアップとサインインを行うことができます。
- Original console
-
ユーザープールでアプリを作成するには
-
Amazon Cognito コンソールに移動します。プロンプトが表示されたら、AWS 認証情報を入力します。
-
[Manage User Pools] (ユーザープールの管理) を選択します。
-
リストから既存のユーザープールを選択するか、ユーザープールを作成します。
-
ページの左側にあるナビゲーションバーで、[General settings] (全般設定) の [App clients] (アプリクライアント) を選択します。
-
[Add an app client] を選択します。
-
アプリケーションクライアントの名前を入力します。
-
この演習では、[Generate client secret] (クライアントシークレットを生成する) オプションをオフにします。この演習で使用する JavaScript など、クライアント側の認証でクライアントシークレットを使用することは安全ではなく、本番アプリケーションケーションクライアントには推奨されません。クライアントシークレットは、アプリケーションのサーバー側の認証コンポーネントでクライアントシークレットを保護できる場合にのみ使用します。
-
[Create app client] を選択します。
-
[アプリクライアント ID] を書き留めます。
-
[プールの詳細に戻る] を選択します。
-
コンソールページの左側にあるナビゲーションバーで、[アプリクライアントの設定] を選択します。
-
[Cognito ユーザープール] を [有効な ID プロバイダー] の 1 つとして選択します。
Facebook、Amazon、Google、Apple に加え、OpenID Connect (OIDC) や SAML IdP など、外部の ID プロバイダー (IdP) を使用してサインインするには、まず以下の説明に従ってプロバイダーを設定してから、[アプリクライアントの設定] ページに戻って、プロバイダーを有効にします。
-
ユーザーが認証された後で呼び出す Amazon Cognito 認証サーバーのコールバック URL を入力します。ウェブアプリケーションの場合は、URL は https:// または https://www.example.com などで始まる必要があります。
iOS または Android アプリの場合は、myapp:// などのコールバック URL を使用できます。
-
サインアウト URL を入力します。
-
[Authorization code grant (認証コードの付与)] を選択して、ユーザープールトークンと交換される認証コードが返されます。トークンはエンドユーザーに直接公開されないため、侵害される可能性は低くなります。ただし、ユーザープールトークンの認証コードを交換するために、バックエンドでカスタムアプリケーションが必要です。セキュリティ上の理由から、モバイルアプリ用の認証コード付与フローとコード交換用証明キー (PKCE) を併用することをお勧めします。
-
[Allowed OAuth Flows] (許可されている OAuth フロー) で [Implicit grant] (暗黙の付与) を選択し、Amazon Cognito からユーザープールの JSON Web トークン (JWT) が返されるようにします。このフローは、トークンの認証コードを交換できるバックエンドがない場合に使用でき、トークンのデバッグにも役立ちます。
[Authorization code grant (認証コードの付与)] と [Implicit code grant (暗黙的コードの付与)] の両方を有効にして、必要に応じて各権限を使用することができます。
-
具体的に除外する必要がない限り、すべての [許可されている OAuth スコープ] のチェックボックスをオンにします。
アプリがユーザーの代わりではなく自身の代わりとしてアクセストークンをリクエストする必要がある場合にのみ、[クライアント認証情報] を選択します。
-
[Save changes] (変更の保存) をクリックします。
-
[ドメイン名] ページで、利用可能なドメインプレフィックスを入力します。
-
完全なドメインアドレスをメモしておきます。
-
[Save changes] (変更の保存) をクリックします。
- New console
-
ユーザープールでアプリを作成するには
-
Amazon Cognito コンソールに移動します。プロンプトが表示されたら、AWS 認証情報を入力します。
-
[User Pools] (ユーザープール) を選択します。
-
リストから既存のユーザープールを選択するか、ユーザープールを作成します。新しいユーザープールを作成すると、ウィザード中にアプリケーションクライアントを設定し、ホストされた UI を構成するように求められます。
-
[App integration] (アプリケーションの統合) タブをユーザープールに設定します。
-
[Domain (ドメイン) で、[Actions] (アクション) を選択し、[Create custom domain] (カスタムドメインの作成) または [Create Cognito domain] (Cognito ドメインの作成) のどちらかを選択します。ユーザープールドメインを既に構成している場合は、新しいカスタムドメインを作成する前に、[Delete Cognito domain] (Cognitoドメインの削除) または [Delete custom domain] (カスタムドメインの削除) を選択します。
-
使用可能なドメインプレフィックスを入力して、Cognito domain (Cognito ドメイン) と使用します。[カスタムドメイン] のセットアップに関する詳細については、「ホストされた UI への独自のドメインの使用」を参照してください。
-
[Create] (作成) を選択します。
-
同じユーザープールの [App integration] (アプリケーションの統合) タブに移動し、[App clients] (アプリケーションクライアント) を検索します。[Create app client] (アプリケーションクライアントの作成) を選択します。
-
[Application type] (アプリケーション) を選択します。選択した内容に基づいて、いくつかの推奨設定が提供されます。ホストされた UI を使用するアプリケーションは、[Public client] (パブリッククライアント) です。
-
[App client name] (アプリケーションクライアント名) を入力します。
-
この演習では、[Don't generate client secret] (クライアントシークレットを生成しない) を選択します。クライアントシークレットは、一元化されたアプリケーションからユーザーを認証する機密アプリケーションによって使用されます。この演習では、ホストされた UI サインインページをユーザーに提示し、クライアントシークレットは必要ありません。
-
アプリケーションで許可する [Authentication flows] (認証のフロー) を選択します。USER_SRP_AUTH が選択されていることを確認します。
-
必要に応じて、[token expiration] (トークン有効期限)、[Advanced security configuration] (高度なセキュリティ設定)、および[Attribute read and write permissions] (属性の読み取りと書き込みのアクセス許可) をカスタマイズします。詳細については、「アプリケーションクライアントのセッティングの構成」を参照してください。
-
アプリケーションクライアントの [Add a callback URL] (コールバック URL を追加する) 。これは、ホストされた UI 認証の後に指示される場所です。Allowed sign-out URL (許可されたサインアウト URL) は、アプリケーションでサインアウトを実装できるようになるまで追加する必要はありません。
iOS または Android アプリの場合は、myapp:// などのコールバック URL を使用できます。
-
アプリケーションクライアントの [ID providers] (ID プロバイダー) を選択します。少なくとも、[Cognito user pool] (Cognito ユーザープール) をプロバイダーとして有効にします。
Facebook、Amazon、Google、Apple に加え、OpenID Connect (OIDC) や SAML IdP など、外部の ID プロバイダー (IdP) を使用してサインインするには、まず、サードパーティー経由でのユーザープールへのサインインの追加で示されるように構成してから、[App client settings] (アプリクライアントの設定) ページに戻って有効にします。
-
[OAuth 2.0 Grant Types] (OAuth 2.0 グラントタイプ) を選択します。[Authorization code grant (認証コードの付与)] を選択して、ユーザープールトークンと交換される認証コードが返されます。トークンはエンドユーザーに直接公開されないため、侵害される可能性は低くなります。ただし、ユーザープールトークンの認証コードを交換するために、バックエンドでカスタムアプリケーションが必要です。セキュリティ上の理由から、モバイルアプリ用の認証コード付与フローとコード交換用証明キー (PKCE) を併用することをお勧めします。
[Implicit grant] (暗黙の付与)を選択して、Amazon Cognito からユーザープールの JSON Web トークン (JWT) が返されるようにします。このフローは、トークンの認証コードを交換できるバックエンドがない場合に使用でき、トークンのデバッグにも役立ちます。
[Authorization code grant (認証コードの付与)] と [Implicit code grant (暗黙的コードの付与)] の両方を有効にして、必要に応じて各権限を使用することができます。
アプリがユーザーの代わりではなく自身の代わりとしてアクセストークンをリクエストする必要がある場合にのみ、[クライアント認証情報] を選択します。
-
特に除外する必要がない限り、すべての [OpenID Connect scopes] (OpenID Connect スコープ) を選択します。
-
設定した [Custom scopes] (カスタムスコープ) を選択します。カスタムスコープは、通常、機密クライアントで使用されます。
-
[Create] (作成) を選択します。
サインインページを表示するには
[App client page] (アプリクライアントページ) から、[View hosted UI] (ホストされた UI の表示) を選択して、アプリクライアント ID、スコープ、許可、およびコールバック URL パラメータがあらかじめ入力されたサインインページに新しいブラウザタブを開きます。
ホストされた 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
Amazon Cognito ユーザープールトークンは、RS256 アルゴリズムを使用して署名されます。ユーザープールトークンの復号化と検証には AWS Lambda を使用できます。AWS GitHub ウェブサイトの「Decode and verify Amazon Cognito JWT tokens」を参照してください。
ドメインは [ドメイン名] ページに表示されています。アプリクライアント ID およびコールバック URL は [全般設定] ページに表示されています。コンソールで行った変更がすぐに表示されない場合は、数分待ってから、ブラウザを更新します。
次のステップ
ステップ 3. ユーザープールにソーシャルサインインを追加する (オプション)
