【追記あり】AWS：Cognito＋Google認証でエラー

Question

※11/4に起票した質問ですが、11/5にさらに追記しました。追記部分は【11/5追記】と書いています。よろしくおねがいします。

AWSを使ってWebアプリケーションを開発しています。
Cognitoを使ってGoogleソーシャルログインを装備しようとしています。
以下のドキュメントに従って作業しています。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cognito-google-social-identity-provider/

現状でつまづいているのは「エンドポイントURLをテストする」で「An error was encountered with the requested page.」というエラーが出ています。

以下、ドキュメントをなぞる形になりますが、行った作業を詳述します。

環境

EC2＋nginx＋Route53＋ALB＋GCMで、https://www.example.comでALB経由でEC2上のDocumentRoot/index.htmlが見える状態にしました。
作業はすべてChromeブラウザーで行い、開発兼テストユーザーとなるGoogleアカウントでログインしている状態です。

Cognito側の設定（１）

• ユーザープールの作成を行い、以下の設定を行いました。

必須の属性＝email
ユーザー名属性＝email

• アプリクライアントの作成を行い、アプリクライアントIDを得ました。以下のように設定しました。

シークレットキーあり
SRP認証オフ
【11/5追記】最初は上記のドキュメントにならって「シークレットキーなし」にしていましたが、そうすると後でHTTPSリスナールールの認証に追加できないのでありで再作成しました。

• アプリクライアントの設定において、以下のように設定しました。

有効なIDプロバイダー＝Cognito Userをオン
コールバックURL＝https://www.example.com
サインアウトURL＝なし
許可されているOAuthフロー＝Authorization code grant＋Implicit grant
許可されているOAuthスコープ＝email openid profile

• ドメイン名の追加を行いました。

Amazon Cognito ドメインの使用を選択
プレフィックスとしてexampleを選びました。
ドメイン名は以下のようになりました。
https://example.auth.ap-northeast-1.amazoncognito.com

GCP側の設定

• GCPプロジェクトの作成、OAuthの同意画面の設定

承認済みドメインにamazoncognito.comを追加を行いました。

• OAuth2.0クライアントの作成

ウェブアプリケーションとして作成しました。

• 承認済みの JavaScript 生成元として、以下を設定しました。

https://example.auth.ap-northeast-1.amazoncognito.com

• 承認済みのリダイレクト URIとして、以下を設定しました。

https://example.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

• 設定を保存し、クライアントIDとクライアントシークレットを得ました。

Cognito側の設定（２）

• フェデレーション＞IDプロバイダーの設定

Googleを選択し、以下のように設定してGoogleの更新をクリックしました。
Google アプリ IDとして、GCP画面のクライアントIDを設定
アプリシークレットとして、GCP画面のクライアントシークレットを設定
承認スコープ＝email openid profile

• 属性マッピングで、emailのユーザープール属性Emailのキャプチャを設定しました。

• アプリクライアントの設定で、以下のように設定しました。

有効なIDプロバイダ＝Googleを追加

【11/4追記】ALBの設定

本来下のUIのテストを行ってから行う作業かと思いますが、ALBのHTTPSのリスナーにルールを追加しました。
HTTPS 443:デフォルトアクションに、もともとEC2のターゲットグループへの転送が入っていましたが、そこに「認証」アクションの追加を行いました。

• 認証: Amazon Cognito
• Cognitoユーザープール：唯一のユーザープール
• アプリクライアント：唯一のアプリクライアント
• スコープ：openid email profile
• 他の項目：デフォルトのまま

テスト

• ホストされたUIを起動をクリックしました。

GoogleアイコンとともにContinue with Googleボタンが表示されますが、ボタンをクリックすると、「An error was encountered with the requested page.」と表示されます。

• URLは「https://example.auth.ap-northeast-1.amazoncognito.com/error?error=redirect_mismatch&client_id=CognitoのクライアントID」です。
• 上記の「ALBの設定」で加えたHTTPSのリスナールール「認証」を外すと、Googleアイコンをクリックすると正常にhttps://www.example.comが表示されました。
• しかし、この状態では、ブラウザーからhttps://www.example.comにアクセスすると、当然ながらWebが正常に表示されます。
• この時点で、上記の「ALBの設定」のようにリスナールール「認証」をつけてみました。
• その状態で、https://www.example.comにアクセスすると、上記と同様のエラーになります。

質問

上記の状態をフィックスして、https://www.example.comにアクセスすると、Google認証が行われ、Webサイトにアクセスが正常に進むようにするには、どうしたらいいでしょうか。

Answer 1

以下のブログを参考に、コールバックURLに/oauth2/idpresponseを付けると解決しました。
https://symfoware.blog.fc2.com/blog-entry-2507.html
お騒がせしました。