Cognito+AWS Amplifyの最小構成

# 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:index.html
<html>
    <body>
        <script src="http://localhost:8080/main.bundle.js"></script>
    </body>
</html>
```

### package.json

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

```json-doc: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`が出力される。

```javascript: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に変換される。

```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を使って手軽に認証機能をハンズオン](http://blog.asial.co.jp/2018/09/21/3%E9%80%A3%E4%BC%91%E3%81%ABCognito_vue/aws-amplify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E6%89%8B%E8%BB%BD%E3%81%AB%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD%E3%82%92%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)
[Amplify公式＠認証](https://aws-amplify.github.io/docs/js/authentication)