パスワードレスログインの実装

PWA Kitには、買い物客にパスワードレスログインを使用するオプションが標準装備されています。買い物客の体験を向上させるために、この機能を Progressive Web App (PWA) Kitサイトに含めます。パスワードなしのログインでは、買い物客はパスワードの代わりに確認コードや Eメールまたは SMS のリンクを使用して、サイトに安全にログインできます。

デモサイトでは、パスワードレスログインのデフォルト実装を紹介しています。

PWA Kit サイトのパスワードレス ログインを有効にして構成するには、このガイドの手順に従います。このガイドでは、URL がhttps://www.example.comであるサンプルのストアフロントを使用します。example.comをドメイン名に置き換えてください。

パスワードなしのログインを使用するには:

• Composable Storefront とRetail React Appバージョン 6.0 以降を使用してサイトを構築します。
• Shopper Login and API Access (SLAS) プライベートクライアントを設定します。パスワードレスログイン用の SLAS プライベートクライアントの設定に関連する詳細については、「パスワードレスログインの設定」を参照してください。

構成には 3 つの手順があります。

1. コールバック URL の設定
2. コールバック URL を許可リストに追加します
3. PWA Kit プロジェクトで構成を完了する

SLAS へのコールバック URL を指定します。これにより、SLAS は、買い物客のログイントークン (確認コード、メールまたはテキスト内のリンク) を作成するために必要なすべての情報をその URL に送信できます。背景情報の詳細については、「SLAS を使用したパスワードレス ログイン」および「SMS を使用したパスワードレス ログイン」を参照してください。

SLAS はコールバック URL に対して HTTP POST リクエストを行い、買い物客の認証情報をユーザーが選択した宛先 (通常は Eメールまたはマーケティングサービスプロバイダー) に転送します。デフォルトでは、PWA Kit はセキュアなリンクを生成し、Salesforce Marketing Cloud を使用してメール内のリンクを転送します。この機能をカスタマイズするには、SLAS によって生成された 8 桁のパスワードレストークンを買い物客が確実に取得できるようにするために使用するメカニズムを記述します。

これらは、SLAS にコールバック URL を提供するメカニズムを記述するための 3 つの可能なオプションです。これらについては、以下で詳しく説明します。

• a.外部コールバック URL の使用
• b.Marketing Cloud インテグレーションの使用
• c.PWA KitプロジェクトでのカスタムPOSTエンドポイントの使用

a.外部コールバック URL の使用

• 買い物客の Eメールを使用してトークンの配信を処理できる、公的にアクセス可能な外部コールバック URL を指定します。

  このコールバック URL の例としては、B2C Commerce インスタンス、Managed Runtime 環境、または独自のサーバーがあります。

• SLAS プライベートクライアントの構成[コールバック URL] フィールドに、パブリックにアクセス可能なコールバック URL を入力します。

または

b.Marketing Cloud インテグレーションの使用

Marketing Cloud ライセンスがある場合は、(契約条件に応じて) メールまたはテキストでトークンを送信できます。これは、PWA Kit に含まれる既定の実装です。

前提条件

Marketing Cloud インテグレーションの使用に適用されるすべての前提条件と手順については、これらのガイドを参照してください。

• SMS によるパスワードなしのログイン
• トランザクション送信ジャーニーの作成

インテグレーションの構成

以下の Marketing Cloud 構成値を取得するには、「OAuth 2.0 API インテグレーションの作成」を参照してください。

• これらの環境変数は Managed Runtime で設定します。

  • MARKETING_CLOUD_CLIENT_IDを Marketing Cloud クライアント ID に
  • MARKETING_CLOUD_CLIENT_SECRETを Marketing Cloud クライアントの秘密に
  • MARKETING_CLOUD_SUBDOMAIN Marketing Cloud サブドメインへ
  • MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATEを、Marketing Cloud に保存したメールテンプレートに添付されたトランザクション API イベントの一意のイベント定義キーに追加します。

  環境変数を参照してください。

• SLAS クライアントで完全なコールバック URL を構成します。たとえば、https://example.com/passwordless-login-callback のようにします。SLAS プライベートクライアントの構成

/passwordless-login-callbackからコールバックパスをカスタマイズする場合は、POSTエンドポイントが設定されているssr.jsでも更新します。オプション c を参照してください。以下の PWA Kit プロジェクトでカスタム POST エンドポイントを使用します。

または

c.PWA KitプロジェクトでのカスタムPOSTエンドポイントの使用

• app/ssr.jsでカスタム POST エンドポイントを構成し、選択したオプション (電子メールまたはテキスト) を使用してトークンの配信を処理します。例として、app/ssr.jsの Marketing Cloud 実装を参照してください。

• SLAS プライベートクライアントの構成[コールバック URL] フィールドに、カスタム POST エンドポイントで設定したコールバック URL を入力します。

3 つのコールバック URL オプションのいずれかについて、構成したコールバック URL が、使用している SLAS クライアントのCallback URLフィールドで許可リストに登録されていることを確認します。手順は次のとおりです。

• ** SLAS 管理 UI にアクセスします。** Salesforce B2C Commerce インスタンスにログインし、[SLAS 管理] セクションに移動します。
• **クライアントを作成または編集します。**コールバック URL を管理する SLAS クライアントを選択します。
• **許可された URL を追加します:**クライアント構成で、サイトの有効なコールバック URL のリストを指定します。

a.更新 template-retail-react-app/config/default.js

まだ行っていない場合は、「前提条件」を完了してください。

PWA Kit プロジェクトでパスワードなしのログインを構成するには、次の例に示すようにtemplate-retail-react-app/config/default.jsを更新します。

PWA Kit プロジェクトで、前提条件の一部として設定したコールバック URL を使用して、次のようにtemplate-retail-react-app/config/default.jsを更新します。

b.オプション: 環境変数を使用してコールバック URL を設定する

必要に応じて、template-retail-react-app/config/default.jsの代わりに環境変数を使用してコールバック URL を設定できます。template-retail-react-app/config/default.jsを使用して、パスワードなしのログインを有効にします。この環境変数を構成して、コールバック URL を設定します。

PASSWORDLESS_LOGIN_CALLBACK_URI

環境変数を参照してください。

• レート制限を実装して、パスワードレスログイン機能の悪用を防止します。たとえば、埋め込み CDN (eCDN) を使用している場合は、eCDN レート制限ルールを適用できます。
• 堅牢なセキュリティ対策を使用して買い物客のアカウントを保護します。たとえば、Cloudfare などのサードパーティーのコンテンツ配信ネットワーク (CDN) を使用している場合は、脅威スコアでリクエストをブロックできます。
• 買い物客による認証オプションの使用状況を追跡し、問題を効率的に診断します。たとえば、Log Centerを使用して、Managed Runtime (MRT) と B2C Commerce インスタンスからのログにアクセスします。

このセクションでは、パスワードなしのログインに関連して発生する可能性のある一般的なエラーの解決策を提案します。

**考えられる原因:**スコープまたはコールバック URL が正しくありません。

**推奨される解決策:**スコープとコールバック URL が正しく構成されていることを確認します。SLAS プライベートクライアントの構成

• SMS によるパスワードなしのログイン
• SMS によるパスワードなしのログイン