※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
この記事はヘッドレス API の使い方のシリーズの一つです。その他の記事は下記を参照してください。
今回は OCAPI を利用したショッパー系 API の呼び方を紹介したいと思います。
データ系とショッパー系の違いについては「データ系 API 編 」を参照してください。
この記事では、OCAPI で 3 つの顧客タイプが商品をカートに追加するユースケースとクッキーを利用したトークンの取得方法を説明します。
- ゲストユーザ ・・・ ログインしていないユーザ
- 登録済みユーザ(B2C Login) ・・・ B2C Commerce に登録済みユーザ
- 登録済みユーザ(Federated Login) ・・・ Google や Facebook といったIDプロバイダーを利用して(Federated Login)ログインしたユーザ
- クッキーを利用したトークンの取得方法
ショッパー系APIの呼び方
1. API クライアントの作成
2. スコープの設定
1、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:
{}