未解決: AWS Amplify + Cognito + Google + Angularでログイン画面を作りたかった

やりたかったこと

AWS Cognito を用いてプロバイダをGoogleにしてログイン画面を作りたい。将来的にFacebookログインも作りたい。Amplifyを使うのはAWS CognitoのデフォルトUIはちょっと ダサい アレなので独自でクライアント側を持ちたかった

f:id:hs_hachi:20211024221957p:plain
ログイン画面

やったこと

AnuglarとAmplify のインストール

npx ng new boyaki
npm install --save aws-amplify @aws-amplify/ui-angular
  • Angular 12.2.0
  • aws-amplify 4.3.2
  • @aws-amplify/ui-angular 1.0.29

が入る

GoogleのOAuth クライアント ID の作成

GCPの「APIとサービス」→「認証情報」からOAuthクライアントIDでWebアプリケーション選択しクライアントIDとシークレットを作成する。あとで、「承認済みの JavaScript 生成元」と「リダイレクトURL」に http://localhost:4200 と Cognitoで作られたAmazon Cognito ドメインを指定する。

ユーザープールへのソーシャル ID プロバイダーの追加 - Amazon Cognito

amplify init

amplify initをするがCloud Formation, IAM Roleなどを作るので結構強い権限が必要になる。この時点でうーん... となってた。3分ぐらいするとAmplifyのアプリケーションができる

amplify add auth

f:id:hs_hachi:20211024222834p:plain
amplify add auth のコンソール画面

先程作ったGoogle側のクライアントIDとシークレットIDをコピペする

amplify push

これでCognitoなどが作られる

Googleログインボタンを作る

最初は AmplifyDoc などを読んでいたけど、RubyMineのオートコンプリート機能を使ってAPIを探していると amplify-google-button ボタンがあるということに気づく

app.component.htmlに

<amplify-google-button [clientId]="<Google側のクライアントID>"></amplify-google-button>

と書くと冒頭のボタンがでる

躓いたエラー

Sign With Google」ボタンを押すとConsoleログに POST https://cognito-identity.us-east-1.amazonaws.com/ 400NotAuthorizedException: Token is not from a supported provider of this identity pool が出る。

終わりに

amplify delete をしてお片付け

感想

よくよく考えればAngular側にGoogleのクライアントIDを渡している時点でCognitoで吸収できてなくね?という疑問に早く気付けばよかったです まる