Amplifyを使ったシンプルな実装例が意外となかったので書いてみました。
コードは最小限で実装しているので分かりやすいと思います。
ソースコードはこちら
-
まずはAWSのコンソールからCognitoの設定を行います
-
サービス一覧からAmazon Cognitoを選びユーザープールの管理をクリックします。
- ユーザープールを作成をクリックし、任意の名前を付けたらデフォルトを確認するをクリックします。
- 特に何も変更せずにプールの作成をクリックします。
-
続けて左のメニューのユーザーとグループをクリックし、ユーザーの作成ボタンをクリックします
- 仮パスワードは後で使うので忘れないようにメモしておいてください。
- 仮パスワードは後で使うので忘れないようにメモしておいてください。
-
-
次は左のメニューのアプリクライアントをクリックし、以下の設定 にてアプリクライアントの作成ボタンをクリックします
- 名前は好きな名前で問題ありません。
- 名前は好きな名前で問題ありません。
-
Awsコンソールの設定は以上です。続いてNuxtJSのアプリを作成します。
- 公式ドキュメントの内容に沿ってcreate-nuxt-appを実行します
- 一度ローカルサーバーを起動して動くことを確認した後components/Tutorial.vueを以下の通り雑に改修します。
- 公式ドキュメントの内容に沿ってcreate-nuxt-appを実行します
components/Tutorial.vue
<template>
<div>
email：<input v-model="email">
pass：<input v-model="password" type="password">
<button @click="login">ログイン</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data: () => ({
email: '' as string,
password: '' as string,
}),
head() {
return {
title: 'ログイン',
}
},
methods: {
login() {
console.log(this.email)
console.log(this.password)
},
},
})
</script>
- Amplifyのライブラリをインストールします
- 他の方の記事などではAmplify Coreを使ったやり方が多かったですが、ログインするだけならAmplify Authだけで十分です。
npm i @aws-amplify/auth
- 認証用のプラグインを作成します。
- userPoolIdなどは環境変数で指定することを推奨しますが、ここでは直接設定します。
% mkdir plugins
% touch plugins/amplify.ts
plugins/amplify.ts
import Auth from '@aws-amplify/auth';
export default () => {
Auth.configure({
Auth: {
region: 'ap-northeast-1',
userPoolId: 'AWSコンソール：ユーザープールの全般設定を確認',
userPoolWebClientId: 'AWSコンソール：ユーザープールのアプリクライアントを確認',
},
})
}
- nuxt.config.jsにプラグインの設定を追記します
nuxt.config.js
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/amplify'
],
- ログイン画面を改修します
components/Tutorial.vue
<template>
〜 省略（変更ナシ）〜
</template>
<script lang="ts">
import Vue from 'vue'
import Auth from '@aws-amplify/auth'
export default Vue.extend({
〜 省略（変更ナシ）〜
methods: {
async login() {
console.log(this.email)
console.log(this.password)
await Auth.signIn(this.email, this.password)
.then(response => {
console.log(response.signInUserSession.accessToken.jwtToken)
console.log(response.signInUserSession.idToken.jwtToken)
})
.catch(() => {
console.error('ログイン失敗')
})
},
},
})
</script>
- 先ほど作成したユーザーはステータスがFORCE_CHANGE_PASSWORDになっているのでCLIでステータを変更します
- AWS CLIが入ってない方はbrewなどでインストールしてください。
% aws cognito-idp admin-initiate-auth \
--user-pool-id ユーザープールの全般設定を確認 \
--client-id ユーザープールのアプリクライアントを確認 \
--auth-flow ADMIN_NO_SRP_AUTH \
--auth-parameters \
USERNAME=ユーザー名,PASSWORD=AWSコンソールで指定した仮パスワード
- ターミナルにsessionが表示されるので続けて以下を実行します。
% aws cognito-idp admin-respond-to-auth-challenge \
--user-pool-id ユーザープールの全般設定を確認 \
--client-id ユーザープールのアプリクライアントを確認 \
--challenge-name NEW_PASSWORD_REQUIRED \
--challenge-responses 'NEW_PASSWORD=任意のパスワード,USERNAME=AWSコンソールで指定したユーザー名' \
--session "コンソールで表示されたセッションの値（実際はかなり長いです）"
- このようにブラウザのコンソールにjwtTokenが表示されればログイン成功です。
