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

2019.05.26

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 init

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

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project <プロジェクト名>
? Enter a name for the environment <環境名>
? Choose your default editor: <editor名>
? 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:


Configuration and credential file settings - AWS Command Line Interface
You can save your frequently used configuration settings and credentials in files that are divided into named profiles.
docs.aws.amazon.com


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

2021/04/15追記
現在は以下のように質問が変わっているようです。

? Enter a name for the project <プロジェクト名>
? Initialize the project with the above configuration? (Y/n) Y
? Select the authentication method you want to use: AWS profile <作成したprofileを選択>

Amplify auth

Amplify Authenticationを追加します。

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 when using your Cognito User Pool? Email
Warning: you will not be able to edit these selections.
What attributes are required for signing up?
Successfully added resource ... locally</i></a>

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

2021/04/15追記
現在は以下のように質問が変わっているようです。

Do you want to use the default authentication and security configuration? 
> Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.

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

amplify push

フロントエンドの実装

amplifyパッケージ追加

以下でpackageを追加します。

npm install --save aws-amplify aws-amplify-vue

また、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をインストールします。

npm install --save vuesax material-icons

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

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました