Salesforce B2C Commerce のヘッドレス API を呼んでみる(ショッパー系 API - SCAPI パブリッククライアント編) #Salesforce

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

この記事はヘッドレス API の使い方のシリーズの一つです。その他の記事は下記を参照してください。

今回は SCAPI パブリッククライアントを利用したショッパー系 API の呼び方を紹介したいと思います。

データ系とショッパー系の違いについては「データ系 API 編」を参照してください。
SCAPI のショッパー系の API の認証する際には２つのクライアントタイプがあります。タイプの違いについては、「ショッパー系 API - SCAPI プライベートクライアント編」を参照してください。

この記事では、SCAPI のパブリッククライアントで３つの顧客タイプが商品をカートに追加するユースケースを説明します。

ゲストユーザ ・・・ログインしていないユーザ
登録済みユーザ(B2C Login) ・・・ B2C Commerce に登録済みユーザ
登録済みユーザ(Federated Login) ・・・ Google や Facebook といったIDプロバイダーを利用して(Federated Login)ログインしたユーザ

ショッパー系APIの呼び方

1. API クライアントの作成

2. スコープの設定

3. (Federated Login のために) Google OAuth2.0 の設定

4. (Federated Login のために) IDP を登録

１〜４は、「ショッパー系API - SCAPI プライベートクライアント編」と同じなので割愛

5. SLAS テナントの登録

「Create a SLAS Client」を参照してください。
この際に、 [Private?] の値を false に [Redirect URI] の値にコールバックで処理する自身のアプリケーションのエンドポイントを設定してください。(例：http://localhost:3000/callback)

この時生成した Client Id と Secret をメモしておいてください。

6. アクセストークンの取得

ゲストユーザ

まずは下記のようなリクエストでユーザーがログインをする。
- shortCode、tenantID、orgID、siteID、realmID については「B2C Commerce に関わる ID を把握」を参照してください。
- clientID は 「5.SLASテナントの登録」 で設定した clientId の値を入力
- redirectUri はコールバックで処理する自身のアプリケーションのエンドポイントを入力
- code_challenge は code_verifier という 43 ～ 128 文字の文字列を SHA256 でハッシュ化したものを入力。（ロジックは公開されているPostmanコレクションの Pre-request Script を参照）

REQUEST: 
GET /shopper/auth/v1/organizations/{orgID}/oauth2/authorize
?redirect_uri={redirect_url}
&response_type=code
&client_id={clientID}
&hint=guest
&code_challenge={codeChallenge} HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com

上記のリクエストをすると HTTP ステータスが 303 でレスポンスヘッダーの Location に {redirectUri}?usid={}&code={}（例：http://localhost:3000/callback?usid={}&code={}）のフォーマットで URL が入っているので、その URL にブラウザでリダイレクトさせる。
自身のアプリケーションで、 /callback を実装し、code の値を利用して下記のリクエストを行い、レスポンスボディ内の access_token を取得
- code_verifier は code_challenge 生成時に利用した文字列。（ロジックは公開されている Postman コレクションの Pre-request Script を参照）
- code はリダイレクト先（Location） URL のパラメータに入っている code を入力

REQUEST: 
POST /shopper/auth/v1/organizations/{orgID}/oauth2/token HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/x-www-form-urlencoded 

REQUEST PARAMETER: 
grant_type=authorization_code_pkce
&client_id={clientID}
&redirect_uri={redirectUri}
&code_verifier={codeVerifier}
$code={code}

登録済みユーザ(B2C Login)

まずは下記のようなリクエストでユーザーがログインをする。
- usid はゲストユーザのトークン取得時のレスポンスボディにある usid に値を入力
- userCredential はユーザ ID / パスワード、それらを id:passwordのようにコロン(:)で結合したものを Base64 でエンコードした値です。

REQUEST: 
POST /shopper/auth/v1/organizations/{orgID}/oauth2/login HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com 
Authorization: Basic {userCredential}
Content-Type: application/x-www-form-urlencoded 

REQUEST PARAMETER: 
grant_type=client_credentials
&client_id={clientID}
&redirect_uri={redirectUri}
&channel_id={siteID}
&code_challenge={codeChallenge}
&usid={usid}

上記のリクエストをすると HTTP ステータスが 303 でレスポンスヘッダーの Location に {redirect_uri}?usid={}&state={}&scope=openid%20offline_access&code={} のフォーマットでURLが入っているので、その URL にブラウザでリダイレクトさせる。
自身のアプリケーションで、 /callback を実装し、code の値を利用して下記のリクエストを行い、レスポンスボディ内の access_token を取得

REQUEST: 
POST /shopper/auth/v1/organizations/{orgID}/oauth2/token HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/x-www-form-urlencoded 

REQUEST PARAMETER:
grant_type=authorization_code_pkce
&client_id={clientID}
&redirect_uri={redirectUri}
&code_verifier={codeVerifier}
$code={code}

登録済みユーザ(Federated Login)

まずは下記のようなリクエストでユーザーがログインをする。
- IDPIDは 「4.(Federated Loginのために) IDP を登録」 で作成した IDPID。今回はgoogle

REQUEST: 
GET /shopper/auth/v1/organizations/{orgID}/oauth2/authorize
?redirect_uri={redirect_url}
&response_type=code
&client_id={clientID}
&hint={IDPID}
&channel_id={siteID}
&usid={usid}
&code_challenge={codeChallenge} HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com

上記のリクエストをすると HTTP ステータスが 303 でレスポンスヘッダーの Location にhttps://accounts.google.com/o/oauth2/auth?scope=openid%20email%20profile&response_type=code&client_id={}&redirect_uri={}&state={}のフォーマットで URL が入っているので、その URL にブラウザでリダイレクトさせる。
すると画像のように Google のログイン画面に遷移するので、ログイン。

Google Cloud Platform の OAuth 同意画面ページで公開ステータスを「テスト」でテストユーザを設定している場合は、そのユーザでログインしてください。

ログイン成功すると http://localhost:3000/callback?usid={}&code={} のフォーマットの URL にブラウザでリダイレクトさせる。
自身のアプリケーションで、 /callback を実装し、code の値を利用して下記のリクエストを行い、レスポンスボディ内の access_token を取得

REQUEST: 
POST /shopper/auth/v1/organizations/{orgID}/oauth2/token HTTP/1.1
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/x-www-form-urlencoded 

REQUEST PARAMETER:
grant_type=authorization_code
&redirect_uri={redirectUri}
&code={code}
&code_verifier={codeVerifier}
&channel_id={siteID}

7. ショッパー系 API を呼ぶ

７は、「ショッパー系 API - SCAPI プライベートクライアント編」と同じなので割愛します。