AWS Amplify Framework(2)Authenticationモジュール

Authenticationモジュール

Authenticationモジュールは、AWS Cognito ユーザプール もしくは AWS Cognito Federated Identities を用いてユーザ認証機能を提供する。AWS Cognito Federated Identitiesを用いることで、FacebookやGoogleなど、OpenIDプロバイダーを認証基盤として使用することができる。

セットアップ

Amplifyプロジェクトのルートディレクトリでamplify add authコマンドを実行することで、ウィザードに従って自動セットアップを行うことができる。

設定項目 内容
リソース名 myproject
User Pool名 myproject
Sign-Inに使用する属性 Email
MFA 無効
ユーザ登録等にEメールを使用 有効
認証メールのタイトル MyProject から 認証コード をお送りします
認証メールの本文 あなたの認証コードは {####} です。
Sign-Up時に必須の属性 Email, Name
Tokenの有効期間 30日
アクセスできるユーザ属性の限定 なし
その他の機能 ホワイトリストによるEmailドメインのフィルタ
OAuthの使用 なし
Lambda Triggers Pre Sign-up
ホワイトリストに指定するドメイン surbiton.jp
$ amplify add auth

 Do you want to use the default authentication and security configuration? Manual configuration
 Select the authentication/authorization services that you want to use: User Sign-Up & Sign-In only (Best used with a cloud API only)
 Please provide a friendly name for your resource that will be used to label this category in the project: myproject
 Please provide a name for your user pool: myproject
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Multifactor authentication (MFA) user login options: OFF
 Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
 Please specify an email verification subject: MyProject から 認証コード をお送りします
 Please specify an email verification message: あなたの認証コードは {####} です。
 Do you want to override the default password policy for this User Pool? No
 Warning: you will not be able to edit these selections. 
 What attributes are required for signing up? Email, Name
 Specify the app's refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and write? No
 Do you want to enable any of the following capabilities? Email Domain Filtering (whitelist)
 Do you want to use an OAuth flow? No
 Do you want to configure Lambda Triggers for Cognito? Yes
 Which triggers do you want to enable for Cognito (Press <space> to select, <a> to toggle all, <i> to invert selection)Pre Sign-up
 What functionality do you want to use for Pre Sign-up (Press <space> to select, <a> to toggle all, <i> to invert selection)Sign-Up email filtering (whitelist)
 Enter a comma-delimited list of allowed email domains (example: 'mydomain.com, myotherdomain.com'). surbiton.jp
Succesfully added the Lambda function locally
 Press enter to continue 
Successfully added resource myproject locally

Vue Components

認証モジュールに関連して使用できるVue Componentsは以下の通り。

Components 内容
<amplify-authenticator></amplify-authenticator> 認証全般
<amplify-sign-in></amplify-sign-in> Sign-In
<amplify-confirm-sign-in></amplify-confirm-sign-in> Sign-Inの確認
<amplify-sign-up></amplify-sign-up> Sign-Up
<amplify-forgot-password></amplify-forgot-password> パスワード忘れ時
<amplify-sign-out></amplify-sign-out> Sign-Out
<amplify-set-mfa></amplify-set-mfa> MFAの設定

Example

認証モジュールを組み込んだVue Componentの実装例は以下の通り。

<template>
  <div id="auth">
    <div v-if="signInStatus === 'signedIn'">
      <!-- サインアウト -->
      <amplify-sign-out></amplify-sign-out>
    </div>
    <div v-else>
      <!-- サインイン -->
      <amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
    </div>
  </div>
</template>

<script>
import { AmplifyEventBus } from 'aws-amplify-vue'
import { Auth } from 'aws-amplify'
export default {
  name: 'Auth',
  components: {},
  data: function() {
    return {
      signInStatus: 'signedOut',
      authConfig: {
        // サインインにEmailを使用
        usernameAttributes: 'Email',
        signUpConfig: {
          hideAllDefaults: true,
          // サインアップに使用する項目
          signUpFields: [
            {
              label: 'Email',
              key: 'email',
              required: true,
              displayOrder: 1,
              type: 'string',
              signUpWith: true
            },
            {
              label: 'Name',
              key: 'name',
              required: true,
              displayOrder: 2,
              type: 'string'
            },
            {
              label: 'Password',
              key: 'password',
              required: true,
              displayOrder: 3,
              type: 'password'
            },
          ]
        }
      }
    }
  },
  async beforeCreate() {
    try {
      // 現在のユーザ
      await Auth.currentAuthenticatedUser()
      this.signInStatus = 'signedIn'
    } catch (err) {
      this.signInStatus = 'signedOut'
    }
    AmplifyEventBus.$on('authState', info => {
      switch (info) {
        case 'signedIn':
          this.signInStatus = 'signedIn'
          break
        default:
          this.signInStatus = 'signedOut'
          break
      }
    });
  }
}
</script>

<style>
</style>

AWS Amplify Framework(1)Amplifyの概要

AWS Amplify Frameworkとは

AWS Amplifyは、モバイルアプリやウェブアプリの実装を容易にするフレームワークで、AWS上のバックエンドをプロビジョニングし、iOSAndroidWeb、React Native上などのフロントエンドと簡単に統合することができる。バックエンドのサービスを設定可能なAmplify CLIや、Web上に展開するAmplify JSなどのリソースがGitHub上で提供されており、認証解析プッシュ通知ボットなどの機能を実装することが可能である。

提供される機能の例 AWSサービス 内容
Analytics Congito/Pinpoint ユーザのセッションや属性などを計測
API Lambda + API Gateway REST/GraphQL APIの利用
Aythentication 認証APIとpre-build UI component
Storage S3 + Cloudfront 静的コンテンツの管理
Interactions Botの構築
PubSub リアルタイムデータのやりとり
Notification プッシュ通知
XR AR/VR

Amplify CLI

Amplify CLIを用いることでバックエンドを簡単に設定することができる。バックエンドのカテゴリごとにカテゴリプラグインや、プロバイダープラグインフロンドエンドプラグインなど様々なプラグインが用意されている。これらのリソースの状況は、amplify statusコマンドで確認することができる。

実行順序 コマンド 内容
1 amplify configure AWSユーザや認証情報の設定
2 amplify init プロジェクトの作成
3 amplify add カテゴリの追加
4 amplify push バックエンドのデプロイ

初期設定

amplify initコマンドを実行することで、フロントエンドの設定確認と初期化、AWS上のバックエンドをセットアップすることができる。1つのプロジェクトは設定の異なる複数のバックエンド(=Env)を持つことが可能で、amplify envコマンドを用いてこれらのバックエンドを切り替えることが可能。Gitのブランチと組み合わせることも可能で、masterブランチ上のプロジェクトはprod環境のバックエンド上にデプロイ、developブランチ上のプロジェクトはdevelop環境のバックエンド上にデプロイするなどの設定を行うことができる。万が一、AWS上のCloudFormationを削除してしまった状態のままデプロイした場合はエラーとなるので、この場合はamplify initコマンドでバックエンドの再生成が必要となる。

コマンド 実行内容
amplify env add ENV_NAME バックエンドを追加
amplify env remove ENV_NAME バックエンドを削除
amplify env pull ENV_NAME –restore AWS上のバックエンド設定を参照して上書き
amplify env list バックエンドの一覧を表示

AWS Amplify Console等の外部サービスでAmplifyをデプロイしたあとに、amplify pushコマンドを用いて開発環境上でデプロイを実行すると、バックエンドのデプロイ状態に差異が生じているためにデプロイに失敗する。上記のamplify env pullコマンドによって、AWS上の最新のバックエンド情報を取得することで、この問題は解決する。

カテゴリの追加と削除

上述のようにAmplify Frameworkは、認証解析などの様々な機能を有している。これらの機能(=カテゴリ)を自身のプロジェクトに追加したり削除したりするのが、amplify add/update/remove CATEGORY_NAMEコマンドである。

その他のコマンド

その他よく使うコマンドは以下の通り。

コマンド 実行内容
amplify codegen AWSからGraphQL Schemaを取得しJSファイルを生成
amplify delete Amplify プロジェクトをすべて削除
amplify status Amplify プロジェクトのステータスを表示
amplify push Amplify プロジェクトをAWS上でデプロイ

Amplifyプロジェクト

Amplifyプロジェクトは、以下のようなディレクトリ構成となっている。

.
├── amplify/
|├── backend/
||     ├─── api
||     |  └── schema.graphql   (編集可)    GraphQLのスキーマ
||     ├── amplify-meta.json   (自動生成)   AWSリソースの設定情報を格納 
||     └── awscloudformation   (自動生成)   CloudFormationのルートスタック
|├── .config/                   (自動生成)   クラウドの構成とユーザー設定/設定を保存
|└── #current-cloud-backend     (自動生成)  直近に取得したクラウド構成
└── src/
    ├── App.vue                  (編集可)     Vueの単一コンポーネントファイル     
    ├── graph/                   (自動生成)    GraphQL statement
    ├── main.js                  (編集可)      Vueのエントリーポイント      
    └── aws-exports.js           (自動生成)    AWSリソースのエンドポイント等の情報を格納