質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

OAuth 2.0

OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

【追記あり】AWS:Cognito+Google認証でエラー

query1000
query1000

総合スコア5

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

OAuth 2.0

OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0評価

0クリップ

1274閲覧

投稿2021/11/04 09:36

編集2021/11/05 04:15

※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側の設定(1)

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

必須の属性=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側の設定(2)

  • フェデレーション>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.」と表示されます。

質問

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

OAuth 2.0

OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。