BUNSEN

個人的な学習ログ

AWS Amplifyを使用した爆速バックエンド構築[認証/Auth編]

概要

この記事は以下の連続した記事の2本目です。 細かい説明や背景などは以前の記事を参照してください。

  1. AWS Amplifyを使用した爆速バックエンド構築[ホスティング/Hosting編]

この記事では以前作成したReactアプリケーションに認証機能を追加してきます。

認証機能について

Amplifyでは認証機能をCognitoを使用して提供しています。

詳細はCognitoの公式を調べていただきたいですがCognitoでは様々な機能が搭載されています。 今回はその中でもAmplifyの用意したデフォルトの最低限の認証機能を使用していきます。

  • IAMによる認可機能
  • MFA機能OFF
  • パスワードポリシー
    • 最低8文字
    • 必須文字種なし
  • 登録に必要なパラメータ
    • Eメールアドレス
  • ユーザ名でログイン
  • 登録時にメールアドレスの確認

認証機能構築

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? Yes, I want to make some additional changes.
 Warning: you will not be able to edit these selections. 
 What attributes are required for signing up? Email
 Do you want to enable any of the following capabilities? 
Successfully added auth resource reacttutorial1b2d47db locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth     │ reacttutorial1b2d47db │ Create    │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes
⠇ Updating resources in the cloud. This may take a few minutes...

~~ 略 ~~

✔ All resources are updated in the cloud

上記手順を実行するとCognitoコンソールのユーザプールからユーザプールが作成されていることが確認できます。

細かいパラメータの変更が必要な場合は一つ目の対話で Default configuration以外を選択することで可能になります。

フロントエンド実装

以下の機能を実装しました。

  • 未ログインの場合、ログイン画面を表示
  • 必須項目の入力画面を備えたサインアップ画面
  • ログイン後にゲーム画面の表示
  • ゲーム画面にサインアウトボタン
  • ゲーム画面にユーザ情報表示

各種画面は @aws-amplify/ui-react の物を使用しています。 最終的なコードはここ (GitHubリポジトリ)を参照してください。 公式サイトを参照して実装しています。

動作確認

構築した資材をmasterブランチにマージし、AmplifyコンソールからCI/CDが修了したことを確認して動作確認を行います。

  1. フロントにアクセスし、ログイン画面を確認する。

    f:id:ahyt910:20210913174143p:plain
    AmplifySignIn

  2. 新規登録へのリンクをクリックし、サインアップ画面を確認。

    f:id:ahyt910:20210913174240p:plain
    AmplifySignUp

  3. サインアップし、メールアドレス宛に認証コードが届くことを確認。

    f:id:ahyt910:20210913174315p:plain
    AmplifyCofirmSignUp

  4. Game画面が表示され、自身のユーザ名が表示されていることを確認。

    f:id:ahyt910:20210913174401p:plain
    AmplifyHome

  5. ログアウト/ログインができることを確認。

  6. Cognitoにユーザが追加されていることを確認。

    f:id:ahyt910:20210913174456p:plain
    CognitoUserPool

最後に

無事に、認証機能をReactチュートリアルに追加することができました!

ただ、Amplifyは簡単に構築できたのですが、Reactはかなり苦戦してしまいました。。。

次回はAPIを使用したGameの進行状況の保存を試してみたいと思います。