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
<html>
<body>
<script src="http://localhost:8080/main.bundle.js"></script>
</body>
</html>
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が出力される。
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に変換される。
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エラーになっている可能性が高い。
レスポンスの内容を見ると何が悪いのかがメッセージに含まれているため、それを見ながら悪い部分を直していく。