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

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

今回は OCAPI を利用したショッパー系 API の呼び方を紹介したいと思います。

データ系とショッパー系の違いについては「データ系 API 編」を参照してください。

この記事では、OCAPI で３つの顧客タイプが商品をカートに追加するユースケースとクッキーを利用したトークンの取得方法を説明します。

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

ショッパー系APIの呼び方

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

2. スコープの設定

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

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

手順は「3.(Federated Login のために) Google OAuth2.0 の設定」と同じだが、リダイレクト URL にはコールバックで処理する自身のアプリケーションのエンドポイントを設定してください。(例：http://localhost:3000/callback)

4. アクセストークンを取得

ゲストユーザ

下記のようなリクエストを行い、レスポンスヘッダーの Authorization に Bearer {token} のフォーマットで値が入っています。
- shortCode、tenantID、orgID、siteID、realmID については「B2C Commerce に関わる ID を把握」を参照してください。
- clientID は 「1.API クライアントの作成」 で作成した API クライアントの ID です。

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/customers/auth?client_id={clientID} HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Content-Type: application/json

REQUEST BODY:
{
    "type": "guest"
}

登録済みユーザ(B2C Login)

下記のようなリクエストを行い、レスポンスヘッダーの Authorization に Bearer {token} のフォーマットで値が入っています。
- userCredential はユーザ ID /パスワード、それらを ID:passwordのようにコロン(:)で結合したものを Base64 でエンコードした値です。

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/customers/auth?client_id={clientID} HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Basic {userCredential}
Content-Type: application/json

REQUEST BODY: 
{
    "type": "credentials"
}

登録済みユーザ(Federated Login)

まずはゲストユーザのフローを使ってゲストトークンを取得する。
まずは下記のようなリクエストをブラウザから行う。
- googleClientID は Google Cloud Platform で作成したクライアント ID のページ右上の [クライアント ID] から確認または、 [JSONをダウンロード] ボタンからそれらが記入された JSON をダンロードできます。
- redirectUri はコールバックで処理する自身のアプリケーションのエンドポイントを入力

REQUEST: 
GET /o/oauth2/v2/auth
?response_type=code
&scope=openid%20email%20profile
&redirect_uri={redirect_url}
&client_id={googleClientID} HTTP/1.1
Host: accounts.google.com

ブラウザからリクエストを行ったら下の画像のように Google のログイン画面に遷移するので、ログイン。

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

ログイン成功すると {redirect_url}?code={}&scope={}&prompt=consent のフォーマットの URL にブラウザでリダイレクトされる。
自身のアプリケーションで、/callback を実装し、code の値を利用して下記のリクエストを行い、レスポンスボディ内の access_token を取得
- code はリダイレクト先 URL のパラメータに入っている code を入力
- googleClientSecret は Google Cloud Platform で作成したクライアント ID のページ右上の [クライアント ID] から確認または、 [JSONをダウンロード] ボタンからそれらが記入された JSON をダンロードできます。

REQUEST: 
POST /oauth2/v4/token HTTP/1.1
Host: www.googleapis.com
Content-Type: application/x-www-form-urlencoded 

REQUEST PARAMETER: 
grant_type=authorization_code
&redirect_uri={redirectUri}
&code={code}
&client_id={googleClientID}
&client_secret={googleClientSecret}

取得した access_token を利用して下記のようにユーザ情報を取得します。

REQUEST: 
GET /oauth2/v3/userinfo HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {token}

取得したユーザ情報を B2C Commerce に登録するために Account Manager のアクセストークンを取得します。取得方法については、「データ系API編」と同様なので、割愛します。
そのアクセストークンを利用して下記のようにリクエストし、すでに登録済みではないか確認します。登録済みの場合、ユーザ情報と共にステータス 200 が返ってきます。
- providerId は任意の ID プロバイダーを示す一意の ID です。（例：google）
- externalId は ID プロバイダーから取得したユーザ情報の ID です。今回は Google のユーザ情報内のEメールを利用します。

REQUEST: 
GET /s/{siteID}/dw/shop/v22_4/customers/ext_profile
?authentication_provider_id={providerId}
&external_id={externalId} HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Bearer {token}

（もし登録されていなかった場合）下記のリクエストを送り、ユーザ情報を登録します。ユーザ情報と共にステータス 200 が返ってきます。
- email, given_name, family_name は ID プロバイダーから取得したユーザ情報のEメールです。今回は Google のユーザ情報内のemail, given_name, family_name を利用します。

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/customers/ext_profile HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Bearer {token}
Content-Type: application/json

REQUEST BODY:
{
 "authentication_provider_id" : "{providerId}",
 "external_id" : "{email}",
 "email" : "{email}",
 "first_name" : "{given_name}",
 "last_name" : "{family_name}"
}

ユーザ情報の登録情報確認、または登録が完了したら、登録したユーザ情報をもとに下記のようなリクエストを送りトークンを取得します。

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/customers/auth/trustedsystem HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Bearer {token}
Content-Type: application/json

REQUEST BODY:
{
  "login" : "{providerId}-{externalId}",
  "client_id": "{clientID}"
}

クッキーを利用したトークンの取得方法（セッションブリッジ）

ここでは、ゲスト・登録済みユーザ・ Federated ログインユーザ問わず、クッキーを利用したトークンの取得方法を紹介します。

下記のようなリクエストを行うと、レスポンスヘッダー内の Set-Cookie に必要な値がセットされて返ってくる。
- token は上記で説明済みの、ゲスト・登録済みユーザ・ Federated ログインユーザのいずれかのフローで取得したトークン

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/sessions HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Bearer {token}

下記のようなリクエストを行い、レスポンスヘッダーの Authorization に Bearer {token} のフォーマットで値が入っています。
- cookies は上記リクエストで Set-Cookie に入っていたの値

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/customers/auth?client_id={clientID} HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Content-Type: application/json
Cookie: {cookies}

BODY:
{
    "type": "session"
}

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

下記のようにサンプルとして /baskets を呼ぶ。
token に上記 4 つのパターンのいずれかで取得したアクセストークンを入力しリクエストすると無事 200 で返ってくる。

その他のAPIについては OCAPI の API ドキュメントの Shop API をご参照ください。

REQUEST:
POST /s/{siteID}/dw/shop/v22_4/baskets HTTP/1.1
Host: {realmID}.dx.commercecloud.salesforce.com
Authorization: Bearer {token}
Content-Type: application/json

BODY:
{}