LoginSignup
2
1

More than 1 year has passed since last update.

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

Posted at

背景

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

結論

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

説明

Auth0の操作

認可の作成

左メニューからPAuthentication -> Socialを選択
スクリーンショット 2021-10-07 141228.png

色んな認可方法がある中、スマレジはその中にはないので、一番下のCreate Customを選択
スクリーンショット 2021-10-07 141334.png

必要事項を記入していく。
スクリーンショット 2021-10-07 141501.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
設定は続き、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を選択。
スクリーンショット 2021-10-07 141728.png

続いてCreate Applicationを選択。
スクリーンショット 2021-10-07 141752.png

アプリの形式を問うてくるので、作成したいものを選択する。
今回はSPAを選択。
スクリーンショット 2021-10-07 183922.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

スクリーンショット 2021-10-07 142055.png

アプリケーションのConnectionsを選択して、先に作成した認可方法を有効にする。
Inkedスクリーンショット 2021-10-07 142143_LI.jpg

ここまでで準備は整いました。
Quick Startからサンプルプログラムをダウンロードします。
ここではReactを選択しますが、自身の好きなものを選択してください。
Inkedスクリーンショット 2021-10-07 142215_LI.jpg

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

左で手動で設定する、認可情報等がサンプルでは自動で入っています。便利。
スクリーンショット 2021-10-07 142327.png

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

sh exec.sh

http://localhost:3000 にアクセスすると、下記のようなページに。
スクリーンショット 2021-10-07 151034.png

ログインボタンを押すと、下記のような画面遷移を経て、認可が成功、ログインできました。
Inkedスクリーンショット 2021-10-07 151059_LI.jpg

スクリーンショット 2021-10-07 151132.png
Inkedスクリーンショット 2021-10-03 062828_LI.jpg
スクリーンショット 2021-10-07 151204.png

確認

Auth0のActivityを確認、先ほどログインしたユーザが居ます。
スクリーンショット 2021-10-07 151256.png

ユーザ情報を見ると、identitiesに取得した情報が入っていました。
スクリーンショット 2021-10-07 151330.png

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

詰まったところ

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

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

おわりに

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

参考

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1