More than 3 years have passed since last update.

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

Posted at 2021-10-07

背景

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

結論

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

説明

Auth0の操作

認可の作成

左メニューからPAuthentication -> Socialを選択

色んな認可方法がある中、スマレジはその中にはないので、一番下のCreate Customを選択

必要事項を記入していく。

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に同じ個所で確認できる、一意の文字列。

設定は続き、Fetch User Profile Scriptに下記を記載。

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を選択。

続いてCreate Applicationを選択。

アプリの形式を問うてくるので、作成したいものを選択する。
今回はSPAを選択。

Settingsに必要な情報を入力する。

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

Allowed xxx系は、カンマ区切りで複数指定できる。

アプリケーションのConnectionsを選択して、先に作成した認可方法を有効にする。

ここまでで準備は整いました。
Quick Startからサンプルプログラムをダウンロードします。
ここではReactを選択しますが、自身の好きなものを選択してください。

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

左で手動で設定する、認可情報等がサンプルでは自動で入っています。便利。