Vue3のComposition APIでCognito認証したい 前編
概要
後編。
vue3のComposition APIとaws-sdk
、amazon-cognito-identity-js
を使ってVueアプリケーションにCognito認証を追加する。
amplifyコマンドでプロジェクトをセットアップしたあとにサインイン周りの処理を自力で実装する。
開発環境
- macOS 11.0.1
- node 14.15.1
- npm 6.14.8
- vue-cli 4.5.9
- aws-amplify-cli 4.39.0
以下vueプロジェクトの設定。
- vue version3
- Composition API
- vue-router
- vuex
- ESLint+prettier
今の所vue3に対応しているElement UI+をUIライブラリとして使うことにする。
以下package.json
の抜粋。
{
"dependencies": {
"amazon-cognito-identity-js": "^4.5.5",
"aws-sdk": "^2.809.0",
"core-js": "^3.6.5",
"element-plus": "^1.0.1-beta.8",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"node-sass": "^5.0.0",
"prettier": "^1.19.1",
"sass-loader": "^10.1.0",
"typescript": "~3.9.3"
}
}
まずはamplifyのアカウント設定
amplify configure
コマンドを叩くとブラウザが開くので、紐付けたいAWSアカウントでログインする。AWSマネジメントコンソール画面が開いたらターミナルに戻って操作する。
ユーザー名を入力するとまたブラウザのタブが開くので、「アクセスの種類」が「プログラムによるアクセス」になっていることを確認次へ。 ポリシーはとりあえずAdministratorAccessにしておく。
作成出来たら、アクセスキーIDとシークレットアクセスキーをコピーしてターミナルに戻って貼り付ける。
その後ローカル上で表示する「Profile Name」を聞かれるので、好きに決めて終わり。
vueアプリケーションとAWSをつなぐ準備
vueアプリケーションディレクトリのルートで作業する。
amplify init
Enter a name for the project
CloudFormationのスタック名の一部とか、各AWSリソース名の一部に使われるもの。
Enter a name for the environment
作成するAWSリソースの環境名。
Choose your default editor
アプリケーション開発に使っているエディタを選択する。 僕はVisual Studio Code。
Choose the type of app that you're building
アプリケーションを開発している言語を選択する。 今回はjavascriptを選択する。
What javascript framework are you using
何のフレームワークを使ってるかを選択する。 勿論vueを選択する。
Source Directory Path
amplifyが吐き出すaws-exports.js
が生成される場所。
特に変更なければそのままenterでOK。
Distribution Directory Path
AWSへの接続情報やIAMユーザーの情報がエクスポートされる場所。 特に変更なければそのままenterでOK。
Build Command
num run build
Start Command
npm run serve
Do you want to use an AWS profile?
ローカルに保存されているprofileを使うかどうか。
configure
で作成したユーザーを使うのでYes。
Please choose the profile you want to use
Profile Nameがリストされるので、さっき作ったprofileを選ぶ
ここまで答えたら終わり。
Cognitoを追加
認証機能を使うための準備。
amplify add auth
Do you want to use the default authentication and security configuration?
セキュリティの構成について選択する。 今回はDefault configurationを選ぶ。
How do you want users to be able to sign in?
サインインする時にパスワードの他に、何の属性を使用するか。 メールアドレスを使いたいのでEmailを選択する。 これは後から変更不可!
Do you want to configure advanced settings?
詳細な設定をするかどうか。 今回はYes。
What attributes are required for signing up?
サインアップするときの必須属性。 サインイン時に使用する属性については選択が必須。 ユーザーに名前とかを付けたければNameなどを選択する。 今回はEmailとNameを選択する。 これは後から変更不可!
Do you want to enable any of the following capabilities?
サインイン時のセキュリティなどの機能。 今回は選択無し。
ここまで答えたら終わり。
AWS上に環境構築
CloudFormationのスタックを作成する。
amplify push
コーヒーを飲みながら待つ。
aws-exports.js
ここまで終わると、src
ディレクトリ内のaws-eports.js
がこんな感じになっている。
/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
const awsmobile = {
"aws_project_region": "ap-northeast-1",
"aws_cognito_identity_pool_id": "ap-northeast-1:xxxxxxx-xxxxx-xxxxx",
"aws_cognito_region": "ap-northeast-1",
"aws_user_pools_id": "ap-northeast-1_xxxxxxx",
"aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxxxxx",
"oauth": {}
};
export default awsmobile;
編集すんなって書いてあるけど、typescriptで使うために拡張子をts
に変更する。
main.ts
Element UI+を使うために読み込む。 とりあえず全部読み込んどく。
import ElementPlus from "element-plus";
import locale from "element-plus/lib/locale/lang/ja";
import "element-plus/lib/theme-chalk/display.css";
import "element-plus/lib/theme-chalk/index.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.use(ElementPlus, { locale })
.mount("#app");
次回
実際にvueで認証機能を作っていく。