CognitoとVue.jsでログイン機能を実装してみた。
ただしCognito の構築は、[備忘録] AWS CDK プロジェクトの作成で作成した cdk プロジェクトを利用した。
はじめに
cognitoとは
Amazon Cognito はウェブアプリとモバイルアプリ用のアイデンティティプラットフォームです。これは、ユーザーディレクトリ、認証サーバー、OAuth 2.0 アクセストークンと AWS 認証情報の承認サービスです。
cognito を用いると、ユーザーのサインアップ、サインイン、アクセスコントロール等の機能を早く簡単に実現することができる。
実施したこと
- cognito の作成
- vue.js でログイン画面の作成とルーティングの設定
- 動作確認
1. cognito の作成
// cognito
const userPool = new UserPool(this, 'app-user-pool', {
userPoolName: 'app-user-pool',
signInAliases: { email: true },
removalPolicy: RemovalPolicy.DESTROY,
});
// application client
userPool.addClient('AppApplication', {
userPoolClientName: 'app-application',
generateSecret: false,
});
アカウント作成はコンソールから行い、存在するメールアドレスとパスワードをログインページから送信することでログインさせることを想定しているので、signInAliases は email を指定し、サインアップに必要な設定は省いた。
またアプリケーションクライアントの設定において、JavaScript からは、クライアントシークレットが有効になっていていては利用できませんという記事を見つけたので、generateSecret は false としている。
デプロイ後、コンソール該当のユーザープールが確認できたので、ユーザーの作成を行なった。
ユーザー作成直後は下記のようにステータスがパスワードを強制的に変更と出て、パスワードを変更しないと使用できないが、vueでサインアップやパスワード再設定のページを作成する予定はないので、CLI で パスワードの再設定を行う。
ターミナル上で下記コマンドを実行した。
% userName=****
% password=Password_002
% userPoolId=ap-northeast-1_*****
% clientId=*****
% aws cognito-idp admin-set-user-password --user-pool-id ${userPoolId} --username ${userName} --password ${password} --permanent
すると、ステータスが確認済みに変わったことを確認できる。
これで cognito の設定は完了。
次にログイン画面を作成していく。
2. vue.js でログイン画面の作成
vueのバージョンは、vue3を選択し、vue.js プロジェクトを作成した。
% vue create app
下記構成でフォルダとファイルが作成された。
├── README.md
├── public
└── favicon.ico
└── index.html
├── src
└── assets
└── logo.png
└── components
└── HellowWorld.vue
└── App.vue
└── main.js
├── gitignore
├── node_modules
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── vue.config.js
├── package.json
必要なパッケージのインストールは下記コマンドで行える。
% cd app
% npm i amazon-cognito-identity-js
% npm install vue-router@4
% npm install bootstrap@4.6.0
また、bootstrapを使用するため、main.jsに下記2行追加している。
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
ログイン画面の login.vue および、ログイン後遷移する top.vue のファイルを新たに作成した。
% cd src
% mkdir pages
% cd pages
% touch login.vue
% touch top.vue
.envにはCognitoのプールIDとクライアントIDを記しておく。ここで1点注意すべきは、変数名は "VUE_APP_" から始まる必要があるということだ。
VUE_APP_POOL_ID="*****"
VUE_APP_CLIENT_ID="*****"
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../src/pages/Login.vue';
import Top from '../src/pages/Top.vue';
import {
CognitoUserPool,
} from 'amazon-cognito-identity-js'
const routes = [
{
path: '/',
name: 'login',
component: login,
},
{
path: '/top',
name: 'top',
component: top,
meta: { requiresAuth: true }
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
var poolData = {
UserPoolId: process.env.VUE_APP_POOL_ID,
ClientId: process.env.VUE_APP_CLIENT_ID,
};
var userPool = new CognitoUserPool(poolData);
const cognitoUser = userPool.getCurrentUser();
console.log(cognitoUser);
if (cognitoUser != null) {
cognitoUser.getSession(function(err, session) {
if (err) {
next('/');
} else {
cognitoUser.getUserAttributes(function(err, result) {
if (result.lentgh !== 0) {
next();
} else {
next('/');
}
});
}
});
} else {
next('/');
}
}
next();
});
export default router;
<template>
<div class="container rounded-circle login">
<form>
<div class="mb-3">
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" v-model="inputEmail" placeholder="email address">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="inputPassword" v-model="inputPassword" autocomplete="on" placeholder="password">
</div>
<button @click.prevent="login" class="btn mx-auto d-block">Login</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue'
import {
CognitoUserPool,
CognitoUser,
AuthenticationDetails
} from 'amazon-cognito-identity-js'
export default {
setup() {
const inputEmail = ref('')
const inputPassword = ref('')
const login = async () => {
var poolData = {
UserPoolId: process.env.VUE_APP_POOL_ID,
ClientId: process.env.VUE_APP_CLIENT_ID,
};
var userPool = new CognitoUserPool(poolData);
//cognitoパラメータ設定
var username = inputEmail.value;
var password = inputPassword.value;
var authenticationData = {
Username: username,
Password: password,
};
var authenticationDetails = new AuthenticationDetails(
authenticationData
);
var userData = {
Username: username,
Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function(result) {
var top="/top";
location.assign(top);
},
onFailure: function(err) {
alert(err.message || JSON.stringify(err));
}
});
}
return {
inputEmail,
inputPassword,
login
}
}
}
</script>
<style>
.container.login {
margin: 10% auto;
padding: 20%;
background: linear-gradient(#9fa09e, #898989);
}
form {
margin: 10%;
}
.btn.mx-auto.d-block{
display: inline-block;
background-color: #e73562;
color: #ffffff;
}
</style>
3. 動作確認
下記コマンドを実行し、localhost:8080 にアクセスすると、ログインページが表示された。
% npm run serve
まずはじめに、誤ったメアドまたはパスワードを入力してみた。すると、 User does not exit. のアラートが表示され、ログインできない。
次に、そのまま localhost:8080/top をブラウザに直接入力し、ログイン後のページにアクセスできるか試してみた。まだログインしていないのでここではログインページにリダイレクトして欲しいところであり、実際に期待通りの挙動を示した。
次に、正しいメアドとパスワードを入力してログインボタンを押し、/top に遷移することを確認した。
最後に、ログイン状態でログインページ(localhost:8080)に戻ってみた。UXを考えると、自動ログインが走り top ページにリダイレクトしても良いが、今回はその実装はしていないため、そのままログインページが表示される。ただし、ログインボタンを押さなくてもログイン状態であれば、直接URLを叩いて /top に遷移することは可能である。
最後に
Cognito と Vue3 でログイン機能を実装した。
ただし今回は、新規登録やパスワード変更といった機能は考慮せず、必須項目を正しく入力したらログイン、間違ったらアラートという簡単な実装にとどめた。
参考にした文献を記す。