AWS Amplifyを使ってサインインを実装する-1

Authenticationを利用してサインインを実装していきます。

遅くなりましたが、Amplifyで以下のことが可能です。AWS Black Belt Online Seminar AWS Amplifyより

  • Analystics
    • ユーザのセッションや属性などを計測
  • API
    • REST/GraphQL APIの利用
  • Authentication
    • 認証APIとpre-build UI component
  • Storage
    • Static contents のシンプルな管理
  • Inteactions
    • Deep Learningを利用したBotの構築
  • PubSub
    • リアルタイムなデータのやりとり
  • Norification
    • キャンペーンや分析機能を持ったプッシュ通知
  • XR
    • AR/VRコンテンツの組み込み

前提

AWS Amplifyを使用する準備が済んでいること。

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
@aws-amplify/cli 1.6.11
aws-amplify 1.1.28
aws-amplify-vue 0.2.11
vuesax 3.8.65
material-icons 0.3.1

プロジェクトセットアップ

Vue.jsプロジェクトでAmplifyを利用していきます。
vue/cliを使用して、適当にプロジェクトを作成していることとします。

Amplifyセットアップ

以下のコマンドを実行し初期化します。

以下の様に質問があるので、任意に答えます。

Amplify auth

Amplify Authenticationを追加します。

実行すると、いくつか質問があるので答えます。
以下は選択した内容です。

バックエンドを更新します。
Are you sure you want to continue? と聞かれるので、Yes と入力します。
すると、Cognitoのユーザプールが追加されます。

フロントエンドの実装

amplifyパッケージ追加

以下でpackageを追加します。

また、main.jsを修正します。
aws-amplify , aws-amplify-vue , ./aws-exports に関わるところを修正しています。

import Vue from "vue";
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import amplifyConfig from "./aws-exports";
import App from "./App.vue";
import router from "./router";
Amplify.configure(amplifyConfig);
Vue.use(AmplifyPlugin, AmplifyModules);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");

view raw
main.js
hosted with ❤ by GitHub

ログイン画面の実装

aws-amplify-vueにある認証コンポーネントを利用すると、コンポーネントを作成せずにログインなどができますが、ここはあえて、ログイン画面を作成していきます。

vuesax追加

vuesaxをインストールします。

main.jsを修正します。

import Vue from "vue";
import Vuesax from "vuesax";
import "vuesax/dist/vuesax.css";
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import amplifyConfig from "./aws-exports";
import App from "./App.vue";
import router from "./router";
Vue.use(Vuesax);
Amplify.configure(amplifyConfig);
Vue.use(AmplifyPlugin, AmplifyModules);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");

view raw
main.js
hosted with ❤ by GitHub

Sign in画面

views/Signin.vueを作成します。
59行目付近の signinメソッドでAmplifyを利用したCognitoへのSign inを行っています。
また、router.js, App.vueを修正し、Sign inページへのリンクを作成しています。
その他は、レイアウト修正です。

<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style lang="sass" scoped>
.about
text-align: center
</style>

view raw
About.vue
hosted with ❤ by GitHub

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/signin">Sign in</router-link>
</div>
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
color: #2c3e50;
}
#nav {
text-align: center;
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

view raw
App.vue
hosted with ❤ by GitHub

<template>
<div class="home">
<div>
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
}
};
</script>
<style lang="sass" scoped>
.home
text-align: center
</style>

view raw
Home.vue
hosted with ❤ by GitHub

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.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: "/signin",
name: "signin",
component: () => import("./views/Signin.vue")
}
]
});

view raw
router.js
hosted with ❤ by GitHub

<template>
<vs-row vs-justify="center">
<vs-col type="flex" vs-lg="6" vs-xs="10">
<vs-card fixedHeight>
<div slot="header">
<h3>
Sign in
</h3>
</div>
<div class="centerx">
<vs-row>
<vs-col vs-w="12">
<vs-input
type="email"
label-placeholder="email"
v-model="userInfo.email"
class="input"
size="large"
/>
</vs-col>
</vs-row>
<vs-row>
<vs-col vs-w="12">
<vs-input
type="password"
label-placeholder="Password"
v-model="userInfo.password"
class="input"
size="large"
/>
</vs-col>
</vs-row>
<vs-row>
<vs-col vs-w="12">
<vs-button class="signin" @click="signin">Sign in</vs-button>
</vs-col>
</vs-row>
<div slot="footer" class="error-message">
{{ this.errorMessage }}
</div>
</div>
</vs-card>
</vs-col>
</vs-row>
</template>
<script>
export default {
name: "signin",
data() {
return {
userInfo: {
email: "",
password: ""
},
errorMessage: ""
};
},
methods: {
signin() {
this.$Amplify.Auth.signIn(this.userInfo.email, this.userInfo.password)
.then(user => console.log(user))
.catch(err => {
console.log(err);
this.errorMessage = "サインインできませんでした";
});
}
}
};
</script>
<style lang="sass" scoped>
.centerx
display: flex
align-items: center
justify-content: center
flex-wrap: wrap
.input
width:100%
padding: 16px 64px
.signin
width: calc(100% 64px * 2)
padding: 16px 0
margin: 32px 64px 0
.error-message
color: #FF0000
margin: 32px 64px
</style>

view raw
Signin.vue
hosted with ❤ by GitHub

完成したSign in画面

Sign in sample

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA