SLAS プライベートクライアントの使用

Shopper Login and API Access (SLAS) API クライアントを使用して、アプリケーションで買い物客を認証および認可できます。SLAS クライアントには、パブリックとプライベートの 2 種類があります。

SLAS プライベートクライアントには、パブリッククライアントに比べて次のようないくつかの利点があります。

  • ゲスト買い物客が店舗へのアクセスをリクエストすることを事前に承認することで、ページの読み込み時間が短縮されます。
  • パスワードなしのログインやパスワードのリセットなど、SLASパブリッククライアントでは利用できない機能を使用できます。プライベート SLAS クライアントのユースケースを参照してください。

SLAS プライベートクライアントを利用するには、プロジェクトがクライアントシークレットを安全に格納できる必要があります。

プロジェクトがクライアント側で実行され、SLAS と直接通信する必要がある場合は、パブリッククライアントの使用を検討してください。

PWA Kit 3.5 以降では、SLAS パブリッククライアントとプライベートクライアントの両方の使用がサポートされています。

PWA Kit 3.5 より前のすべての PWA バージョンでは、SLAS パブリック クライアントのみがサポートされています。

Note

SLAS パブリッククライアントを使用している既存の PWA Kit サイトがある場合は、読み進めて、プライベートクライアントへの切り替えを検討することをお勧めします。

このガイドのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。

プライベートクライアントシークレット 

プライベートクライアントで作業する場合は、クライアントシークレットを買い物客やクライアント側のブラウザーに公開しないように注意する必要があります。

クライアントシークレットをセキュリティで保護するために、PWA Kit Retail React App は環境変数を使用してシークレットをサーバー側に格納します。クライアントシークレットの格納方法については、環境変数の設定を参照してください。

SLAS プライベートクライアントの設定 

主に次の操作を行って、PWA Kit サイトで SLAS プライベートクライアントを設定します。

  • SLAS プライベートクライアントの作成
  • PWA Kit の構成
  • 環境変数の設定

このビデオでは、PWA Kit の SLAS プライベート クライアントと段階的なヘッドレス ロールアウトを設定する方法について説明します。

:: video {src = “FqwkbNxGVXVsLCxQDGMP3g” title = “コンポーザブルストアフロントのSLASプライベートクライアント” タイプ= “Vidyard”}

SLAS プライベートクライアントの作成 

まず、Shopper API の認可と API アクセスの設定の手順を完了して、SLAS プライベートクライアントを作成します。

PWA Kit の構成 

SLAS プライベートクライアントを作成したら、次の手順に従って PWA Kit サイトで使用します。

  1. まだ行っていない場合は、PWA Kit v3.5 以降にアップグレードします。

  2. PWA Kit 構成ファイルconfig/default.jsで、commerceAPI clientId を SLAS プライベートクライアント ID に設定します。

    1clientId: '$YOUR_SLAS_PRIVATE_CLIENT_ID',

  3. _app-config/index.jsで、enablePWAKitPrivateClient prop の ’ ’ をtrueに設定します。

    1CommerceApiProvider enablePWAKitPrivateClient={true}

  4. ssr.js で、runtime.createHandler に渡すオプションの useSLASPrivateClient プロパティを true に設定します。

    1const options = {useSLASPrivateClient: true}
2const {handler} = runtime.createHandler(options, callback)

環境変数の設定 

ローカル環境 

次のコマンドを実行して、アクティブなコマンド プロンプトで PWA_KIT_SLAS_CLIENT_SECRET 環境変数をローカルに設定します。

  • Mac / Unixでは、export PWA_KIT_SLAS_CLIENT_SECRET=$YOUR_CLIENT_SECRET を実行します。
  • Windows では、set PWA_KIT_SLAS_CLIENT_SECRET=$YOUR_CLIENT_SECRET を実行します。

ローカル開発環境では、新しいコマンドプロンプトを開いたときに自動的に含まれるように、PWA_KIT_SLAS_CLIENT_SECRET をより永続的に設定する必要があります。

これを行うには、Mac / Unix では、マシンの .bashrc ファイルで PWA_KIT_SLAS_CLIENT_SECRET 環境変数を設定します。 Windows では、コントロールパネル -> システム -> 詳細 -> 環境変数を使用して PWA_KIT_SLAS_CLIENT_SECRET 環境変数を設定します。

Note

MRT (Managed Runtime) 環境 

Managed Runtime で PWA Kit サイトをリモートで実行している場合は、ご使用の環境に合わせて変数を置き換えた後、ターミナルで次のコマンドを実行して、PWA_KIT_SLAS_CLIENT_SECRET 環境変数を設定できます。

Managed Runtime API キーとリモート環境のその他のプロパティを取得する方法の詳細については、バンドルのプッシュとデプロイのガイドを参照してください。

1curl "https://cloud.mobify.com/api/projects/$PROJECTID/target/$ENVIRONMENTID/env-var/" \
2  --request 'PATCH' \
3  --header 'Content-Type: application/json' \
4  --header 'Accept: application/json' \
5  --header "Authorization: Bearer $RUNTIME_ADMIN_API_KEY" \
6  --data '{ "PWA_KIT_SLAS_CLIENT_SECRET": {"value": "'$PWA_KIT_SLAS_CLIENT_SECRET'"} }'

詳細については、環境変数を参照してください。

段階的なヘッドレスロールアウトのセットアップ 

この設定は、プラグイン SLAS を使用するハイブリッドストアフロントに適用されます。ハイブリッド認証を使用している場合は適用されません。

Note

上記の PWA Kit のセットアップ手順に加えて、PWA Kit と SFRA の両方を使用して段階的なローンチを行うストアフロントでは、SLAS プライベートクライアントを使用するようにプラグイン SLAS を更新することもできます。SFRA で動作するように SLAS プライベートクライアントを設定する方法については、プラグイン SLAS の readme を参照してください。

追加エンドポイント 

PWA Kit の実装を拡張して、パスワードなしのログインなどのプライベートクライアントを必要とする他の SLAS エンドポイントを使用する場合は、runtime.createHandler の applySLASPrivateClientToEndpoints オプションを使用して、使用可能なエンドポイントのセットを拡張できます。

1const options = {
2  useSLASPrivateClient: true,
3  applySLASPrivateClientToEndpoints: /oauth2\/(token|passwordless\/(login|token))/
4}
5const {handler} = runtime.createHandler(options, callback)

トラブルシューティング 

  • SLAS /authorize への HTTP 400 呼び出しが表示されている場合、PWA Kit サイトは、プライベートクライアント ID で SLAS パブリッククライアントフローを使用しています。_app-config/index.js ファイルで、CommerceAPIProvider 内の enablePWAKitPrivateClient prop を true に設定します。

  • ローカル開発環境では、ssr.js で useSLASPrivateClient プロパティが有効になっていて、PWA_KIT_SLAS_CLIENT_SECRET 環境変数が設定されていない場合、PWA Kit サーバーは起動しません。環境変数を SLAS クライアントシークレットに設定して続行します。

  • PWA Kit サイトを Managed Runtime にデプロイした後、SLAS を呼び出すときに HTTP 501 エラーが表示される場合は、PWA_KIT_SLAS_CLIENT_SECRET 環境変数が設定されていない可能性があります。この環境変数を設定した後、変更が適用されるまで数分お待ちください。

その他の参照項目 

入門ガイド
コンポーザブルストアフロントの概要
ハイブリッド実装でのコンポーザブルストアフロントの使用
PWA Kit フレームワーク
成功につながるスキル
Ask the Community
設定する
使用する CDN を決定する
On-Demand Sandbox の作成
複数サイト
MRT の管理
API アクセスの設定
ローカル環境の設定
SLAS プライベートクライアントの使用
サイトの構築
マーチャントチームへの支援
テスト、立ち上げ、監視
メンテナンス