Cognitoの準備
下記参考サイトを参考に設定を行った。
ユーザープールの作成
基本的に赤枠を設定していきます
まずは、ユーザープールを作成していきます。
ユーザープールの詳細などについては、ほかのサイトが詳しく説明しているので、省略します。
今回は、Emailで設定を行いますが、ユーザー名や電話番号でも認証が可能なようです。
ユーザーに自由にサインアップさせない場合は、ユーザー名で設定するのが良いかもしれません。
パスワードのセキュリティに関しては、基本的にデフォルトでよいでしょう。
最強クラスや要件が決まっている場合は、カスタムを利用しましょう。
多要素認証も対応しているようです。
今回に関しては、サインインには、MFAを利用しないためオフに設定します。また、MFAに関する設定に関しては情報が少ないため、実装するには少し根気が必要かもしれません。
ここはデフォルトでよいでしょう。
今回は、Congnitoの持つEメールの機能を利用してメールアドレスの確認を行います。
月の送信制限などがあるとのことなので、本番環境には利用せずに簡単に確かめるために利用しましょう。
自由にわかりやすい名前を付けましょう。
アプリケーションクライエントを作成できます。
基本的にはパブリッククライアントを利用することで、SPAなどは対応が可能なようです。
シークレットクライアントに関しては、サーバーサイドに秘密情報を持つことで、よりセキュアにできるようです。主に公開するAPIなどで利用するっぽいですが、詳細は不明です、、、
今回利用するサンプルが、この２つを利用するため認証フローで有効にしておいてください。
SRPのほうは利用しないように変更したため、削除して大丈夫です。
最後にこれまで設定した内容を確認して終了です。
必要なID情報を取得する
ここの対応するユーザープールIPを取得してください。
ユーザープール ＞ アプリケーションの統合 に進みます。
下の方に行くと、アプリケーションクライエントとあるので、該当するIDを取得するようにしてください。
Next.jsサンプルプロジェクト
ソースはこちらにあります。
nextで最低限サインアップ、サインイン、サインアウト、バックエンドAPIの認証を済ませたアプリとなっています。
config_sample.jsonのある階層で、config.jsonを作成し、config.jsonに先ほどコピーした内容を張り付けるようにしてください。
後は、developerモードで立ち上げることで、最低限で動作するNextアプリが立ち上がります。
挙動を見ながら参考にしていただければ幸いです。
公式のReactサンプル
こちらに、Reactのサンプルがあります。こちらも参考にしながら動かしてみると挙動を理解しやすいと思います。
Vue.js サンプル
Nextのものを流用することで作成しました。
Vue ＋ cognitoなどで調べると出てくる、amazon-cognito-identity-jsで行おうとすると、周辺の依存関係がうまく解決できませんでした。
また、Amplifyに関する情報が多く出てくるのですが、すでにあるユーザープールで利用が難しいようにも感じたので、今回はNextで利用したライブラリを利用しています。なので、基本的に同じコードを利用可能です。
フロントエンドに認証情報をバーンと置いているような感じになっているので、利用する場合は適宜修正してください。
まとめ
ID関係が多く、IDの場所を探すのに苦労した。
しかし、一方で実装は簡単であるため、とても良いサービスだと感じた。
普段はVueを利用しているので、サンプルを作成しておきたい、、、
⇒簡単なものを作成した
追記
AmplifyでSRPをうまく作れなかったため、
もしSRPを利用する場合にAmplifyが動作しない場合は上の記事を参考に修正していく。