jTokerでdevise token認証するAPIにアクセスする

# 概要
devise token認証するAPIに、jTokerをつかってOAuth2ログインする。
jTokerの公式demoはReact+JQueryでつくられているが、JQueryだけで使えるサンプルをつくる

- [lynndylanhurley/j-toker: Simple, secure token authentication for jQuery.](https://github.com/lynndylanhurley/j-toker)

# TL;DR
- $.auth.configure()が非同期メソッドなのが肝。
- issueでもいくつか上がっているが、await忘れるとログイン後に$.auth.userの中身が空になったりする。
  - Promiseが返ってくるようなので、async/awaitを使う。
  - もしくは(オプションとなっている)PubSubライブラリを使ってイベントを受信する。

# 環境
- [Rails5のAPIモードでdevise\_token\_authとomniauthを使ったログインを試す - Qiita](https://qiita.com/AQeNku/items/94485432184257799106) を参考にdevise token認証するAPIを用意
- 認証はパスワードではく、GoogleのOAuth2.0を使う

# サンプルソース

```
$ touch dist src
```

async/awaitを使いたいのでbabel/webpackを準備
[npmとwebpack4でビルド - jQueryからの次のステップ - Qiita](https://qiita.com/civic/items/82c0184bcadc50965f91)

```webpack.config.js
const path = require('path');
const webpack = require("webpack");
const js = {
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, 'src', 'main.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
          }
        ]
      }
    ]
  },
  devServer: {
    publicPath: '/dist/'
  },
};

module.exports = [js]
```

```package.json
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "j-toker": "^0.0.10-beta3",
    "webpack-dev-server": "^3.7.2",
    "webpack-cli": "^3.3.5",
    "webpack": "^4.35.0"
  },
  "devDependencies": {},
(中略)
}
```

```main.js
import $ from 'jquery';
import Auth from 'j-toker';

$(async () => {
  $('.signin').on('click', async() => {
    try {
      await $.auth.configure({
        apiUrl: 'http://localhost:3000',
        storage: 'localStorage',
        authProviderPaths: {
          google: '/auth/google'
        }
      });
    }catch(e){
      console.log(e);
    }
    try {
      if(!$.auth.user.signedIn) {
        const user = await $.auth.oAuthSignIn({provider: 'google'});
      }
      console.log($.auth.user);
      //ログイン後はヘッダにトークンが自動的にセットされる
      const result = await $.ajax({
         url:`http://localhost:3000/api/v1/hoge`,
         type: 'GET'
      });

    } catch(e) {
      console.log(e);
    }
  });
});
```


```index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>j-tokerサンプル</title>
        <script src="dist/main.js"></script>
    </head>
    <body>
        <p><input type='button' value='ログイン' class='signin button button-primary button-large'></p>
    </body>
</html>
```


```
$ npm i
$ npx webpack-dev-server
http://localhost:8080/index.htmlにアクセス
```

# 課題
ログアウトは実装できていない
- API側が対応する必要がある 
    - [devise\_token\_auth + omniauthにログアウトを追加 - Qiita](https://qiita.com/AQeNku/items/351ac520f60393fbda13)

# 他ライブラリでの認証方法

[devise\_token\_auth](https://github.com/lynndylanhurley/devise_token_auth#main-features)のREADME.mdに記載されている。

- React: redux-token-auth 
    - [【React】＋【RailsAPI】 アプリ \[3\] ユーザー認証（devise/devise\_token\_auth/redux-token-auth）\_前編｜Artefact｜note](https://note.mu/artefactnote/n/n7ca736484813)
- ng-token-auth: AngularJS
    -  [AngularJSとRailsをTokenベースの認証で繋ぐ方法(devise\_token\_auth + ng-token-auth) - Qiita](https://qiita.com/jwako/items/d9f966a5edca1b07c393) 
- vuejsは記載されていないが [vue-auth/drivers/auth at master · websanova/vue-auth](https://github.com/websanova/vue-auth/tree/master/drivers/auth)が使える模様(使用例がほしい。。。)