BLOG

ブログ
CATEGORY

【Vue.js】Amazon Cognitoで簡単に認証処理を作る方法　〜設定編〜

タロウです。
今回は　Vue.js + Amazon Cognito でログイン認証処理の作成方法をご紹介します！

Amazon Cognitoとは

AWSの1つで、
自力で実装すると面倒な認証処理を、ライブラリ経由でアクセスさせるだけで実現できるサービスです。

できること

一例ですが下記の動作をサポートしています。

  • メールアドレスや電話番号の確認コード/確認URLでの承認
    (登録したアドレス宛てに送られてきてクリックすると登録完了する長いURLのアレ。)
  • 2段階認証
  • TwitterやFaceBookなどでの各SNSのログイン(OAuth2.0)
  • パスワード変更やパスワードの強度(大文字＋記号が必須など)の細かな設定

料金

ほかのサービスと同様に重量課金制です。
使用した時間や容量ではなく、月間アクティブユーザー(MAU)で課金されます。
※MAU = ログインや、パスワード変更などCognitoに対してアクセスしたユーザー数

1 ～ 50,000MAU無料
50,001 ～ 900,000MAU0.00550 USD(0.59 円) / 1MAU
900,001 ～ 9,000,000MAU0.00460 USD(0.49 円) / 1MAU
9,000,001 ～ 10,000,000MAU0.00325 USD(0.35 円) / 1MAU
10,000,000MAU ～0.00250USD(0.27 円) / 1MAU

※107円/ドルで計算

2段階認証で登録した電話番号宛てに確認コードを送信した場合や、
シングルサインオンで使用した場合などは↑より価格の高いテーブルが適用されます。

Vueで使用するための下準備

AWSを使用したアプリケーションを簡単に実装できるパッケージ[aws-amplify]を使用して実装します。
こちらで作成したプロジェクトをベースに認証を構築していきます。

AWSとの紐づけを行う

パッケージで構築していく前にAWSアカウントとの紐づけを行います。
下記コマンドで紐づけを行います。

amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue


▲コマンドを実行するとブラウザでログイン画面が上がります。
　紐づけたいアカウントでログインを行いましょう。

AWSのコンソールが表示されたら、コマンドラインに戻ってEnterを押します。
下記２つが聞かれるので入力します。

? region

リージョンを選択します。
今回は東京リージョンを使用するので[ap-northeast-1]を選択します。
十字キーで移動、Enterで選択できます。

? user name

操作用に作成されるIAMユーザの名前を入力します。
未入力でもOKですが、デフォルトでつけられた名前(amplify-Lc2Rxのような)が採用されます。
特にこだわりないので今回は未入力にします。

入力を行うと、再度ブラウザでユーザー作成画面が上がります。

Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-Lc2Rx&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue


▲ユーザー名、下記のアクセス権限を設定します。

コマンド上で入力したユーザー名が表示されていますが、ここで変更もできます。

  • プログラムによるアクセス
    払いだされたIDを使用してプログラムからアクセスできるようになります
  • AWSmanagementコンソールへのアクセス
    ブラウザからAWSのコンソールにログインできるようになります

アクセス権限は、”プログラムによるアクセス”のみにチェックを入れておきます。


▲追加したユーザーに詳細な権限を設定します。
　デフォルトで”administrator Access”（フルコントロール）にチェックが付いているので、
　今回は、そのまま次に進めます。


▲タグは不要なので何もせず次に進みます。


▲設定した内容を確認します。そのまま次へ。


▲アクセスキーとシークレットアクセスキーが表示されるので、！！！画面はそのまま！！！にしておきます。

！！！画面はそのまま！！！ですよ！

一度コマンドにEnterを押します。

下記のように作成したIAMユーザーを聞かれるので、入力していきます。

Enter the access key of the newly created user:

? accessKeyId: ()

アクセスキーを入力します。
ブラウザで開いておいた画面に記載のある、”アクセスキーID”を入力します。

? secretAccessKey: ()

シークレットアクセスキーを入力します。
こちらも画面に記載のある、”シークレットアクセスキー”を入力します。


▲入力後のイメージ

? Profile Name

ローカルに保存されるAWSプロファイルの名前を入力します。
特にこだわりがなければ未入力のまま進めます。

Successfully set up the new user.

▲最後に”Successfully”と表示されれば完了です。

3. プロジェクトに組み込む

パッケージをインストール

プロジェクトディレクトリの直下で、下記コマンドでインストールを行います。
※プロジェクトディレクトリ = package.jsonがある階層です。

npm install aws-amplify --save

--saveはプロジェクトで開発を行うなら必ずつけましょう！

AWSとアプリケーションを接続するための初期設定

下記コマンドで初期設定を行います。

amplify init

コマンドを実行すると、プロジェクト名はどうする？概要は？と次々質問してくれるので、
答えながら進めていきます。

? Enter a name for the project

プロジェクト名を設定します。
未入力の場合はコマンドを実行したカレントのプロジェクト名が設定されます。

? Enter a name for the environment

動作環境の名前を入力します。(2文字～10文字)
開発環境なら”develop”など。

? Choose your default editor

開発エディタを選択します。

  • Visual Studio Code
  • Atom Editor
  • Sublime Text
  • IntelliJ IDEA
  • Vim (via Terminal, Mac OS only)
  • Emacs (via Terminal, Mac OS only)
  • None

今回は[Visual Studio Code]を選択します。

? Choose the type of app that you’re building

作成しているアプリケーションのタイプを選択します。

  • android
  • ios
  • javascript

今回はWebアプリなのでjavascriptを選択します。

? What javascript framework are you using

使用しているjavascriptフレームワークを選択します。

  • angular
  • ember
  • ionic
  • react
  • react-native
  • vue
  • none

Vue.jsをし応しているので、Vueを選択します。

? Source Directory Path

自動生成される接続情報ファイル[aws-exports.js]がエクスポートされるディレクトリを指定します。
未入力でOkです。(デフォルトで”src”が設定されます)

? Distribution Directory Path

接続情報や使用するIAMユーザの情報系のファイルがエクスポートされます。
未入力でもOKですが、”amplify”を指定しました。

? Build Command

ビルドコマンドを入力します。
今回は”npm build”を入力します。

? Start Command

スタートコマンドを入力します。
今回は”npm start”を入力します。

? Do you want to use an AWS profile? (Y/n)

最初の手順で作成したIAMユーザを使用するので、”Y”を入力します。

? Do you want to use an AWS profile?

ここは事前準備済みなので勝手に”Yes”となり次に進みます。

? Please choose the profile you want to use

使用するAWSプロファイルを選択します。
前手順で作成した”default”を選択しEnterを押します。

ゴリゴリとロールの設定やらが動きます。


▲実行完了後のイメージ

Cognitoを使用する準備を行う

いよいよ認証を行うための準備に入ります。

下記コマンドでアプリケーションにAWSリソースを追加します。

amplify add auth

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.

今回はデフォルト設定で良いので、”Default configuration”を選択します。
※一番下の”I want to learn more.”を選択すると、説明が表示されます。

How do you want users to be able to sign in?

ユーザーに何の情報を使ってログインさせたいかを選択します。
※後から編集不可なので注意！

  • Username
  • Email
  • Phone Number
  • Email and Phone Number
  • I want to learn more.

今回は一般的なメールアドレスでのログインにするので、
“Email”を選択します。

Do you want to configure advanced settings?

詳細な設定を行うかを聞いてきます。

  • No, I am done.
    選択すると設定が完了します。
  • Yes, I want to make some additional changes.
    詳細な設定を行うのであればこちらを選択します

今回は紹介がてら詳細な設定も行ってみます。

What attributes are required for signing up?

ログインに必要な情報を設定します。
※後から編集不可なので注意！

  • Address (This attribute is not supported by Facebook, Google, Login With Amazon.)
  • Birthdate (This attribute is not supported by Login With Amazon.)
  • Email
  • Family Name (This attribute is not supported by Login With Amazon.)
  • Middle Name (This attribute is not supported by Google, Login With Amazon.)
  • Gender (This attribute is not supported by Login With Amazon.)
  • Locale (This attribute is not supported by Facebook, Google.)
  • Given Name (This attribute is not supported by Login With Amazon.)
  • Name
  • Nickname (This attribute is not supported by Facebook, Google, Login With Amazon.)
  • Phone Number (This attribute is not supported by Facebook, Login With Amazon.)
  • Preferred Username (This attribute is not supported by Facebook, Google, Login With Amazon.)
  • Picture (This attribute is not supported by Login With Amazon.)
  • Profile (This attribute is not supported by Facebook, Google, Login With Amazon.)
  • Updated At (This attribute is not supported by Google, Login With Amazon.)
  • Website (This attribute is not supported by Facebook, Google, Login With Amazon.)
  • Zone Info (This attribute is not supported by Facebook, Google, Login With Amazon.)

必須とする情報にカーソルを持っていき、Spaceキーで選択します。
住所や誕生日など選択した項目の入力値が、完全一意しないとログインできなくなります。

今回はそのままにするので、何も選択せずEnterを押します。

Do you want to enable any of the following capabilities?

ログイン時の機能を追加できます。

  • Add Google reCaptcha Challenge
    ボットログインを防ぐための機能。画像で電柱とかを選択させられるアレです。
  • Email Verification Link with Redirect
    2段階認証のような感じで登録済みのアドレス宛てに表示させたい画面のリダイレクトURLが届きます。
  • Add User to Group
  • Email Domain Filtering (blacklist)
  • Email Domain Filtering (whitelist)
  • Custom Auth Challenge Flow (basic scaffolding – not for production)
  • Override ID Token Claims

いろんな機能がありますね。
今回は選択しません！Enterを押します。

これでCognitoを使う準備が整いました。


▲作成完了後のイメージ

下記コマンドを実行して、AWS上に設定した内容で構築します。

amplify push

待ちます。
待ちます。ひたすら待ちます。(約1分ほど)


▲処理開始

・・・中略・・・


▲処理完了

AWSコンソールにログイン、Cognitoを見てみると、
コマンドで操作した通りに作成されています。


▲ユーザープールも作成されています。


▲詳細設定で設定したログイン方法や、ログインに必要な情報が設定されています。

以上でアプリケーションで使用するための準備が完了となります。

まとめ

Vueに組み込む前までの設定をご紹介しました。
やや複雑そうに見えますが、やってみるとサクッと実現できてしまいます。

アプリケーション組み込み編は現在執筆中なので完成次第リンクを貼ります！

RELATED ARTICLE

RANKING

BACK NUMBER
CATEGORY