スマレジプラットフォームAPIの認可をAuth0でやる

# 背景
以前、スマレジのプラットフォームAPIを使ってアプリを作った。
そのときは認可周りも自分で連携したが、次にアプリを作る際はもう少し簡単にできないかな、
ということで、認可認証で有名なAuth0あたりでできないか調べていた。

# 結論
スマレジプラットフォームAPIの認可はOAuth2.0に準拠しているので、
Auth0の`Social Connection`の`custom`を使えば簡単に実装できそうだった。
今回はサンプルを使ってログインできるところまでをメモする。
OAuth2.0に対応している認可はなんでも出来そうだった。

# 説明
## Auth0の操作
### 認可の作成
左メニューから`PAuthentication -> Social`を選択
![スクリーンショット 2021-10-07 141228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/31e3438a-bf0b-9e5c-6561-819119dbbeaa.png)

色んな認可方法がある中、スマレジはその中にはないので、一番下の`Create Custom`を選択
![スクリーンショット 2021-10-07 141334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/99ac7ff3-3ad0-44c2-0467-3eff0eb45d48.png)

必要事項を記入していく。
![スクリーンショット 2021-10-07 141501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/e66177b0-3410-b911-2f5b-55195d382853.png)

- Name: この認可の名称を記載。今回はスマレジなので`SmaregiPlatFormAPi`とした。
- Authorization URL: スマレジの認可URLを記載。確認用なので開発用のURLをここでは記載。
- Token URL: 認可後、ユーザーアクセストークンを取得するためのURLを記載（ここも開発用URL）。
- Scope: ユーザ情報を取得するためのスコープ（半角スペース区切りで複数選択できる）。  
  スマレジでは下記のスコープを選択できる。
    - openId: 契約IDなどの情報を取得するか。Auth0を使うなら**必須**
    - email: メールアドレスを取得するか。後述するが、Auth0を使うなら**推奨**
    - profile: プロフィール情報を取得するか。
    - offline_access: リフレッシュトークンを取得するか。
- Client ID: スマレジアプリごとに割り振られているクライアントID。デベロッパーズの`アプリ->環境設定`で確認できる。
- Client Securet: Client IDに同じ個所で確認できる、一意の文字列。

![スクリーンショット 2021-10-07 141633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/1c950f92-0354-d9bd-bea5-a5f6c2454b63.png)
設定は続き、Fetch User Profile Scriptに下記を記載。

```javascript
function(accessToken, ctx, cb) {
  request.post('https://id.smaregi.dev/userinfo', {
    headers: {
      'Authorization': 'Bearer ' + accessToken
    }
  }, function(e, r, b) {
    if (e) return cb(e);
    if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));
    var response = JSON.parse(b);
    cb(null, {
      user_id: response.contract.id,
      email: response.email
    });
  });
}
```
アクセストークンを取得するAPIをAuth0がたたいた後に呼ばれる（と思われる）メソッド。
成功した場合callback (cb)が呼ばれ、情報を格納する。
Auth0が持つデータは`userId必須`、`email推奨` となっているので、それらを格納する。 

ここまでで認可情報の登録は完了。

### サンプルコードのDL
続いて上記認可を使用したサンプルコードを落としてくる。
今回はログインまでなのでフロントだけ。

左のメニューから`Applications -> Applications`を選択。
![スクリーンショット 2021-10-07 141728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/b93d11da-fc8f-57a1-6293-86bbced4490c.png)

続いて`Create Application`を選択。
![スクリーンショット 2021-10-07 141752.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/98427909-c269-00ab-803d-6695f32203f1.png)

アプリの形式を問うてくるので、作成したいものを選択する。
今回はSPAを選択。
![スクリーンショット 2021-10-07 183922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/23e0ef0b-b455-17da-286b-b133dd9c2cd7.png)

`Settings`に必要な情報を入力する。
- Name: アプリ名
- Domain: アプリのドメインURL
- Application Login URI: ログインページにリダイレクトする場合設定
- Allowed Callback URLs: 認可した後コールバックしてもよいURLを設定
- Allowed Logout URLs: ログアウトした後リダイレクトしてもよいURLを設定
- Allowed Web Origins: CORS対策用

Allowed xxx系は、カンマ区切りで複数指定できる。
![Inkedスクリーンショット 2021-10-07 142011_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/46fe3c36-e17c-6c0a-2683-eea4d377a592.jpeg)

![スクリーンショット 2021-10-07 142055.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/381b9188-7146-1217-1ca9-ed71aa47f653.png)

アプリケーションの`Connections`を選択して、先に作成した認可方法を有効にする。
![Inkedスクリーンショット 2021-10-07 142143_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/55e331fa-7b43-d8f8-581a-b3d689b88b18.jpeg)



ここまでで準備は整いました。
Quick Startからサンプルプログラムをダウンロードします。
ここでは`React`を選択しますが、自身の好きなものを選択してください。
![Inkedスクリーンショット 2021-10-07 142215_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/13a002ad-a480-c649-a865-57cb8ab608fb.jpeg)


選択するとこちらの画面に移ります。
まずLoginのサンプル、次にAPIをcallするサンプル、と順番に確認することができるようになってます。
既存のアプリにAuth0を組み込む場合は左の手順に従って進めばよいと思います。
今回は新しくアプリを作る想定なので、右のDOWNLOAD SAMPLEからダウンロードします。

左で手動で設定する、認可情報等がサンプルでは自動で入っています。便利。
![スクリーンショット 2021-10-07 142327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/79a0b557-4ed8-04a8-7797-9a65ded58397.png)

落とした後、該当フォルダへ移動し、下記を実行。
docker imageのpullとreactの起動をしてくれます。

```bash
sh exec.sh
```

http://localhost:3000 にアクセスすると、下記のようなページに。
![スクリーンショット 2021-10-07 151034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/48c2e7a4-ddba-f45c-7569-f5557af56095.png)

ログインボタンを押すと、下記のような画面遷移を経て、認可が成功、ログインできました。
![Inkedスクリーンショット 2021-10-07 151059_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/452576ce-52cd-69c1-a9e7-44774353193f.jpeg)

![スクリーンショット 2021-10-07 151132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/63d07956-70a4-d8d4-2aab-848f78fb6129.png)
![Inkedスクリーンショット 2021-10-03 062828_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/7f07abb5-6c19-9f9e-d2df-7c91085733e0.jpeg)
![スクリーンショット 2021-10-07 151204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/ae78010e-ca3c-1e53-7450-fa1384b3fc53.png)

### 確認
Auth0の`Activity`を確認、先ほどログインしたユーザが居ます。
![スクリーンショット 2021-10-07 151256.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/b5d396f7-ea25-b975-b7a2-dadeeef6ff1a.png)

ユーザ情報を見ると、`identities`に取得した情報が入っていました。
![スクリーンショット 2021-10-07 151330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505764/3d0e1b9d-7cae-1dd2-f554-229db91088b1.png)

`user_id`に、`認可名|契約ID`という形で値が入っていることがわかります。
アプリ側で契約IDが必要になったら、ここから取ることができそうです。


# 詰まったところ
OAuth初心者なので当たり前なところかもしれませんが。
Auth0のドキュメントを読むと
returnにuser_idは必須とのこと（emailも推奨）

スマレジの認証からはuser_idは帰ってこないので、こちらで一意に指定してやる必要がある。
スマレジの場合は契約IDがuser_idと同じ意味合いを持つので、contract_idを当てる。

# おわりに
今回はAuth0を使ってスマレジプラットフォームアプリを認可、ログインできるところまでのサンプルを動かしました。
次はログイン後、実際に商品情報を取得するところまで書きたいと思います。

# 参考

https://qiita.com/hisashiyamaguchi/items/93516e371bbe279fffb9

https://qiita.com/mmorikawa/items/e82c8fbe74286e43762c