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 パブリック クライアントのみがサポートされています。

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

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

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

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

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

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

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

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

  1. PWA Kit v3.5 以降に更新します。
  2. ssr.js で、runtime.createHandler に渡すオプションの useSLASPrivateClient プロパティを true に設定します。
  3. _app-config/index.js で、<CommerceAPIProvider> の enablePWAKitPrivateClient prop を true に設定します。
  4. PWA Kit 構成ファイルで、commerceAPI clientId を SLAS プライベートクライアント ID に設定します。
  5. ご使用の環境で、PWA_KIT_SLAS_CLIENT_SECRET 環境変数を SLAS プライベートクライアントシークレットに設定します。
  1. PWA Kit 構成ファイルで、commerceAPI clientId を SLAS プライベートクライアント ID に設定します。
  2. ご使用の環境で、PWA_KIT_SLAS_CLIENT_SECRET 環境変数を SLAS プライベートクライアントシークレットに設定します。

次のコマンドを実行して、アクティブなコマンド プロンプトで 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 環境変数を設定します。

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

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

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

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

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

  • 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 環境変数が設定されていない可能性があります。この環境変数を設定した後、変更が適用されるまで数分お待ちください。