前提
- aws-cliを導入してuserprofileの設定を行なっていること
AmplifyとVueのインストール
今回は全てデフォルトのまま進める
$ vue create sample
作成されたプロジェクトのルートに移動してAmplifyのプラグインをインストールする
$ cd sample
$ npm install --save aws-amplify aws-amplify-vue
ログインの実装
Amplify CLI
$ amplify add auth
コマンドを実行すると Do you want to use the default authentication and security configuration? と聞かれるので Yを選択する。
設定した項目をAWS上に反映させる。
$ amplify push
このコマンドによってAWS上にリソースが作成されたので、これを使ってログイン画面を実装していく。
ログイン画面を表示させる
AmplifyをVue上で使うための設定を行う。まずはsrcフォルダにあるmain.jsを以下のように変更する。
import Vue from 'vue'
import App from 'App.vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import aws_exports from './aws-exports'
Amplify.configure(aws_exports)
Vue.use(AmplifyPlugin, AmplifyModules)
// It's important that you instantiate the Vue instance after calling Vue.use!
new Vue({
render: h => h(App)
}).$mount('#app')
続いてApp.vueにも変更を加える。
<template>
<div id="app">
<amplify-authenticator></amplify-authenticator>
</div>
</template>
<script>
import { Auth } from 'aws-amplify'
export default {
name: 'app',
components: {}
}
</script>
$ npm run serveコマンドを実行してhttp://localhost:8080を見にいくとログイン画面ができている。なんだこれすごい。
ログアウトボタンを表示させる
このままだとCretae Accountからユーザーを作ってログインしても真っ白のページが表示されるだけなのでログアウトボタンをつける。
<template>
<div id="app">
<div v-if="!signedIn">
<amplify-authenticator></amplify-authenticator>
</div>
<div v-if="signedIn">
<amplify-sign-out></amplify-sign-out>
</div>
</div>
</template>
<script>
import { AmplifyEventBus } from 'aws-amplify-vue'
import { Auth } from 'aws-amplify'
export default {
name: 'app',
components: {},
data() {
return {
signedIn: false
}
},
async beforeCreate() {
try {
await Auth.currentAuthenticatedUser()
this.signedIn = true
} catch (err) {
this.signedIn = false
}
AmplifyEventBus.$on('authState', info => {
if (info === 'signedIn') {
this.signedIn = true
} else {
this.signedIn = false
}
});
}
}
</script>
上のコードではログインの有無をsignedInで判断している。
ページが描写される前にAuth.currentAuthenticatedUser()でログイン済みかどうかを調べている。
ログインに成功した時、AmplifyEventBus.$emit('authState', 'signedIn')が発火されるようになっているので、AmplifyEventBus.$onでイベントを受け取り、signedInの状態を切り替えている。
いらない項目を非表示にする
標準だとユーザー登録の時に電話番号の入力も求められるが不要な場合もあると思うので消してみる。
ユーザー登録のフォームの表示項目の設定はAuthenticatorcomponentの子であるSignIncomponentのSignInConfigで行う。
<amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
data() {
return {
signedIn: false,
authConfig: {
signUpConfig: {
hiddenDefaults: ['phone_number']
}
}
}
}