AWS Amplify を利用して最速で会員登録をつくる

上野潤一郎

つくる

2018.12.11

ポイント

この記事は、ギルドワークス Advent Calendar の11日目の記事です。

Amplifyとは

AWSが提供する各サービスとの連携をできるようにするライブラリです。 JavaScript、iOS, Android, React Native をサポートしています。

https://aws-amplify.github.io/

CLIのインストール

$ npm install -g @aws-amplify/cli

基本的にこれだけです。

Vue プロジェクトの作成

以前はReactとAngularでしたが、Vue でもいけるようになっていたので Vue で試します。

$ vue create amplify-auth-sample

Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

Router を追加したくらいです。

Amplify のセットアップ

作成した Vue プロジェクトに追加していきます。

$ amplify init 

? Choose your default editor: IDEA 14 CE
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use XXX

既に作成済みのプロファイルがあれば、選択するだけで作成されます。

CREATEINPROGRESS amplifyauthsample-20181224180540 AWS::CloudFormation::Stack Mon Dec 24 2018 18:05:41 GMT+0900 (JST) User Initiated
CREATEINPROGRESS DeploymentBucket                 AWS::S3::Bucket            Mon Dec 24 2018 18:05:45 GMT+0900 (JST)
CREATEINPROGRESS AuthRole                         AWS::IAM::Role             Mon Dec 24 2018 18:05:45 GMT+0900 (JST)
CREATEINPROGRESS UnauthRole                       AWS::IAM::Role             Mon Dec 24 2018 18:05:45 GMT+0900 (JST)
CREATEINPROGRESS UnauthRole                       AWS::IAM::Role             Mon Dec 24 2018 18:05:46 GMT+0900 (JST) Resource creation Initiated
CREATEINPROGRESS AuthRole                         AWS::IAM::Role             Mon Dec 24 2018 18:05:46 GMT+0900 (JST) Resource creation Initiated
CREATEINPROGRESS DeploymentBucket                 AWS::S3::Bucket            Mon Dec 24 2018 18:05:47 GMT+0900 (JST) Resource creation Initiated
⠋ Initializing project in the cloud...

CREATECOMPLETE UnauthRole                       AWS::IAM::Role             Mon Dec 24 2018 18:06:03 GMT+0900 (JST)
CREATECOMPLETE AuthRole                         AWS::IAM::Role             Mon Dec 24 2018 18:06:04 GMT+0900 (JST)
CREATECOMPLETE DeploymentBucket                 AWS::S3::Bucket            Mon Dec 24 2018 18:06:07 GMT+0900 (JST)
CREATECOMPLETE amplifyauthsample-20181224180540 AWS::CloudFormation::Stack Mon Dec 24 2018 18:06:11 GMT+0900 (JST)
✔ Successfully created initial AWS cloud resources for deployments.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify  add" will allow you to add features like user login or a backend API
"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

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

次に auth を追加しましょう。

$ amplify add auth

Do you want to use the default authentication and security configuration? No, I will set up my own configuration.
? Select the authentication/authorization services that you want to use: User Sign-Up & Sign-In only (Best used with a cloud API only)
? 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: Your verification code
? Please specify an email verification message: Your verification code is {####}
? Do you want to override the default password policy for this User Pool? Yes
? Enter the minimum password length for this User Pool: 8
? Select the password character requirements for your userpool: Requires Lowercase, Requires Uppercase, Requires Numbers
? 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
Successfully updated resource cognitobb060b7d 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

初期設定で良ければ、最初を Yes にしてしまえば終わりですが、パスワードポリシーが結構厳し目なので、シンボルだけ外しました。

 $ amplify status
| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Auth     | cognitobb060b7d | Create    | awscloudformation |

status で作成できているかを確認できます。

$ amplify push

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Auth     | cognitobb060b7d | 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 が作成されていることがわかります。

Vue のパッケージ

npm i aws-amplify
npm i aws-amplify-vue

上記を追加します。

Vue の実装

ちゃんと実装するのはログインステータスを store 等でちゃんと制御できるようにした方が良いのですが、今回は表示できることに特化しています。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsexports from './aws-exports'
Amplify.configure(awsexports)

Vue.use(AmplifyPlugin, AmplifyModules)
Vue.config.productionTip = false

import {AmplifyEventBus} from 'aws-amplify-vue';
AmplifyEventBus.$on('authState', info => {
  console.log(Here is the auth event that was just emitted by an Amplify component: ${info})
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

追加したのは以下の部分です。

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsexports from './aws-exports'
Amplify.configure(awsexports)

Vue.use(AmplifyPlugin, AmplifyModules)

import {AmplifyEventBus} from 'aws-amplify-vue';
AmplifyEventBus.$on('authState', info => {
  console.log(Here is the auth event that was just emitted by an Amplify component: ${info})
});

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import { components } from 'aws-amplify-vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/auth',
      name: 'auth',
      component: components.Authenticator
    }
  ]
})

こちらも追加したのは以下の部分です。

import { components } from 'aws-amplify-vue'

routes: [
   {
      path: '/auth',
      name: 'auth',
      component: components.Authenticator
    }
  ]

これだけ追加して実行します。

http://localhost:8080/auth にアクセスするとサインイン画面が表示されます。