AWS AmplifyのチュートリアルでReactアプリでCognitoを使って認証機能を追加する

いつも忘れないように、コンセプトから。

コンセプト

・お金かけてまでやりたくないのでほぼ無料でAWSを勉強する
　→ちょっとしたサービスを起動すると結構高額になりやすい。
・高いレベルのセキュリティ確保を目指す
　→アカウントを不正に使われるととんでもない額を請求されるので防ぐ

前々回の「AWSサーバーレスのWebアプリケーションをもっと勉強する」と前回の「AWSサーバーレスのWebアプリケーションをもっと勉強する（その２）」の続きになります。
今回のチュートリアルはこちら↓
https://docs.amplify.aws/start/getting-started/auth/q/integration/react#create-login-ui

認証機能を追加する

まずはAmplifyに認証機能を追加します。追加はAmplifyコマンドで行います。

実行するとこんな感じです。ローカルに取り込まれました。

AmplifyのpushコマンドでAWS上の環境構築を行います。しばらく待っていると、以下のような画面で終わります。

AWSコンソールに飛んで確認すると、うまくいっているようです。特にエラーはありません。

認証画面を作成する

今度は画面の作成です。作成といっても、チュートリアルとして用意されているログイン用の画面を利用します。App.jsに以下の2文を追加します。

その後、npmコマンドでスタアートすると、ローカルで起動します。

動作確認する

実際に起動させたアドレスにアクセスすると、ログイン画面が出来上がっています。アカウントは持っていないのでCreate accountを押してアカウントを作成します。本人確認のためにメールアドレスを設定すると、メールに認証キーが送られてくるので入れることでアカウントがアクティベートされます。この辺は一般的なWebの認証と同じですね。

認証を通してログインすると、以前構築したサイトにアクセスできます。

認証の機能を構築するのは非常に難しいですが、Cognitoを使って簡単に構築することができました。Cognitoって本当に便利ですね。Webアプリケーションを構築するなら絶対に使うだろうなと思うサービスです。ちなみにAmplifyで使えるメソッドは30あり、チュートリアルにも記載されていますが、signUp, signIn, forgotPasword, signOut　などの基本的なものは揃っています。詳細は以下参照。
https://aws-amplify.github.io/amplify-js/api/classes/authclass.html

実際に自分のサイトとして構築するには画面などを変更する必要もありますが、かなり利用できるソースコードも多いなと思います。今日はここまで。