むだいありー
HOME / GAME / TECH

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で認証機能を作っていく。

プログラミング Vue.js AWS Cognito Amplify
2020/12/13