Cognito+aws-amplifyの最小構成

Amplifyを使ってCognitoの認証を通して、localStorageに認証情報が入ってくるところまでの確認。
※突貫で記事を書いてるので上手く動かなかったらごめんなさい。。

Cognito準備

参考サイトを見ながら、ユーザプールとフェデレーティッドアイデンティティを設定する。
ユーザプールに下記のユーザを作成する。

ID: test_user
PW: password

※ここもちゃんと書きたいけど、時間がないので一旦略。。

ファイル準備

ファイル構成

./index.html
./package.json
./webpack.config.js
./src/app.js

index.html

下記のhtmlを用意する。
※webpackでコンパイルされるjsを読み込むだけのhtml

index.html

<html>
    <body>
        <script src="http://localhost:8080/main.bundle.js"></script>
    </body>
</html>

package.json

下記のpackage.jsonを用意する。

package.json

{
  "name": "cognito",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "@types/jquery": "^3.3.29", /* 多分不要だけど試した時に入っていたので一応入れとく。。 */
    "@types/node": "^10.12.18", /* 同上 */
    "aws-amplify": "^1.1.18"
  },
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "copy-webpack-plugin": "^4.5.2",
    "webpack-dev-server": "^3.1.5"
  },
  "scripts": {
    "start": "webpack && webpack-dev-server --mode development",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

Webpack設定

後述するJavaScriptのコードをweboackでコンパイルすることになる。
Webpackの設定は下記を使用する。
コンパイルが成功すると、./dist配下に、index.htmlとmain.bundle.jsが出力される。

webpack.config.js


const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        overlay: true,
        hot: true
    },
    plugins: [
        new CopyWebpackPlugin(['index.html']),
        new webpack.HotModuleReplacementPlugin()
    ]
};

JavaScriptコード

↓のJavascriptコードを用意する。
最終的にwebpackでブラウザから読み込めるJavaScriptに変換される。

app.js

import Amplify, { Auth } from 'aws-amplify'

Amplify.configure({
    Auth: {
        // フェデレーションアイデンティティのID
        identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        // リージョン
        region: 'ap-northeast-1',
        // ユーザープールのID
        userPoolId: 'ap-northeast-1_xxxxxxxxx',
        // ユーザープールのウェブクライアントID
        userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
        mandatorySignIn: true
    }
})

Auth.signIn("test_user", "password")
    .then(user => {
        console.log(user)
        console.log('ログインしました')
    })
    .catch(err => {
        console.log(err)
        console.log('ログインできませんでした')
    })

実行手順

npm install

下記を実行し、package.jsonに従ってinstallする。

npm install

jsコンパイル

下記を実行し、Webpackを使用して、js（app.js）をブラウザから読み込める形にコンパイルする。
※package.json内のscriptsを実行する。

npm start

上記、実行後、http://localhost:8080/main.bundle.js でコンパイルされたjsにアクセス可能となる。
※ コンパイル後のファイルは、./distへ出力される。
※ jsだけでなくindex.htmlもWebpackのプラグインの機能でコピーされている
※ 細かい原理はわからないが、webpack-dev-serverの機能によって./dist配下がサーバとして公開される。
※ app.jsを変更するとリアルタイムで変更が反映される（webpack-dev-serverの機能）

ブラウザで開いて動作確認

この後、 http://localhost:8080/index.html をブラウザで開く。（ここではchrome前提）

開発者ツールを開き、下記を満たしていれば成功。

開発者ツールのconsoleに ログインしましたが出ている
開発者ツールのnetworkが全て200 OKになっている
localStorageにCognitoIdentityServiceProvider.xxxxxxxxxxxxxxxxxxxxxxxxxx.test_user.xxxTokenがある
AWSのフェデレーティッドアイデンティティのダッシュボードを開き、認証方法部分のユーザIDプールのカウントが上がってる

上手く認証できない時

開発者ツールでリクエストを見ると、400エラーになっている可能性が高い。
レスポンスの内容を見ると何が悪いのかがメッセージに含まれているため、それを見ながら悪い部分を直していく。

参考サイト

3連休にCognito_vue/aws-amplifyを使って手軽に認証機能をハンズオン
 Amplify公式＠認証