やりたかったこと
AWS Cognito を用いてプロバイダをGoogleにしてログイン画面を作りたい。将来的にFacebookログインも作りたい。Amplifyを使うのはAWS CognitoのデフォルトUIはちょっと ダサい アレなので独自でクライアント側を持ちたかった
やったこと
AnuglarとAmplify のインストール
npx ng new boyaki npm install --save aws-amplify @aws-amplify/ui-angular
が入る
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
先程作った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/ 400 と NotAuthorizedException: Token is not from a supported provider of this identity pool が出る。
終わりに
amplify delete をしてお片付け
感想
よくよく考えればAngular側にGoogleのクライアントIDを渡している時点でCognitoで吸収できてなくね？という疑問に早く気付けばよかったです まる
