AWS Cognitoを簡単に、かつ、カスタム可能にして使いたい
目次
やりたかったこと
- Vue.jsで作っているアプリにログイン機能を設置したい。
- AWS Cognitoをはじめて使う。よくわからんことが多いので、セットアップを自動化してくれるCLツール AWS-Amplifyを使う。
- E-mailとパスワードさえあれば、ログインできるようにしたい。
問題だったこと
AWS Amplifyでログイン機能を作ると、「username」が一意なidとしてセットされる。しかも、作成後は変更不可。
解決方法
AWS Amplify CLでAWSのスタックを整えた後に、手動でCongnito UserPoolを作成する。作成時に、一意なIDとしてemailを指定できる。
おぼえ書き
Github Issueで既存のUserPoolを指定する方法が議論されていた。でも、この情報は古いらしい。同じことを再現しようとしたが、対応するフィールドが存在しなかった。
最終的には、AWS Amplifyオブジェクトを初期化する箇所で、UserPool IDを編集すれば良いと言うことがわかった。Qiita記事より
自作したUser Poolでログインしようとすると、エラーがでる。credentialがどうたらこうたら・・・Stack overflowの記事で解決する。
ログインフォームで依然としてusernameを入力させられる。自分でログインフォームを書くのも良いが、面倒くさい。最小限の手間で実現したい。Github Issueに対応する項目があった。
<template>部分の記述はこう
|
1 2 3 |
" > <amplify-authenticator v-bind:authConfig="authConfig" ></amplify-authenticator> |
<script>部分の記述はこう。 usernameAttributes: 'email’ の記述で、ユーザーの一意なidがemailであると指定している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
部分" >export default { name: 'app', components: {}, data() { return { signedIn: false, authConfig: { usernameAttributes: 'email', signUpConfig: { hiddenDefaults: ['phone_number'] } } }; } |