PWA Kitには、買い物客にパスワードリセットを使用するオプションが標準装備されています。買い物客の体験を向上させるために、この機能を Progressive Web App (PWA) Kitサイトに含めます。パスワードをリセットすると、買い物客がパスワードを忘れた場合、Eメールあるいは SMS の確認コードまたはリンクを使用して新しいパスワードを作成し、アカウントへのアクセスを回復できます。
デモサイトでは、パスワードリセットのデフォルト実装を紹介しています。
PWA Kit サイトのパスワード リセットを有効にして構成するには、このガイドの手順に従います。このガイドでは、URL がhttps://www.example.comであるサンプルのストアフロントを使用します。example.comをドメイン名に置き換えてください。
パスワードのリセットは、ハイブリッド ストアフロントではサポートされていません。
Note
パスワードのリセットを使用するには、コンポーザブルストアフロントとRetail React Appバージョン 6.0 以降を使用してサイトを構築します。
構成には 3 つの手順があります。
Note
SLAS へのコールバック URL を指定します。これにより、SLAS は、買い物客のトークン (確認コード、メールまたはテキスト内のリンク) を作成するために必要なすべての情報をその URL に送信できます。背景情報の詳細については、「パスワードのリセット」を参照してください。
SLAS はコールバック URL に対して HTTP POST リクエストを行い、買い物客の認証情報をユーザーが選択した宛先 (通常は Eメールまたはマーケティングサービスプロバイダー) に転送します。デフォルトでは、PWA Kit はセキュアなリンクを生成し、Salesforce Marketing Cloud を使用してメール内のリンクを転送します。この機能をカスタマイズするには、SLAS によって生成された 8 桁のトークンを買い物客が確実に取得できるようにするために使用するメカニズムを記述します。
これらは、SLAS にコールバック URL を提供するメカニズムを記述するための 3 つの可能なオプションです。これらについては、以下で詳しく説明します。
a.外部コールバック URL の使用
買い物客の Eメールを使用してトークンの配信を処理できる、公的にアクセス可能な外部コールバック URL を指定します。
このコールバック URL の例としては、B2C Commerce インスタンス、Managed Runtime 環境、または独自のサーバーがあります。
SLAS クライアントを構成します。[コールバック URL] フィールドに、パブリックにアクセス可能なコールバック URL を入力します。
または
b.Marketing Cloud インテグレーションの使用
Marketing Cloud ライセンスがある場合は、(契約条件に応じて) メールまたはテキストでトークンを送信できます。これは、PWA Kit に含まれる既定の実装です。
前提条件
Marketing Cloud インテグレーションの使用に適用されるすべての前提条件と手順については、「トランザクション送信ジャーニーの作成」を参照してください。
インテグレーションの構成
以下の 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_RESET_PASSWORD_TEMPLATEを、Marketing Cloud に保存したメールテンプレートに添付されたトランザクション API イベントの一意のイベント定義キーに追加します。環境変数を参照してください。
SLAS クライアントで完全なコールバック URL を構成します。たとえば、https://example.com/reset-password-callback のようにします。「SLAS クライアントの設定」を参照してください。
/reset-password-callbackからコールバックパスをカスタマイズする場合は、POSTエンドポイントが設定されているssr.jsでも更新します。オプション c を参照してください。以下の PWA Kit プロジェクトでカスタム POST エンドポイントを使用します。
または
c.PWA KitプロジェクトでのカスタムPOSTエンドポイントの使用
app/ssr.jsでカスタム POST エンドポイントを構成し、選択したオプション (電子メールまたはテキスト) を使用してトークンの配信を処理します。例として、app/ssr.jsの Marketing Cloud 実装を参照してください。1// Define a POST route for the '/reset-password-callback' endpoint.
2app.post(/reset-password-callback, (req, res) => {
3 const slasCallbackToken = req.headers['x-slas-callback-token']
4 validateSlasCallbackToken(slasCallbackToken).then(() => {
5 sendMagicLinkEmail(
6 req,
7 res,
8 RESET_PASSWORD_LANDING_PATH,
9 process.env.MARKETING_CLOUD_RESET_PASSWORD_TEMPLATE
10 )
11 })
12 })3 つのコールバック URL オプションのいずれかについて、構成したコールバック URL が、使用している SLAS クライアントのCallback URLフィールドで許可リストに登録されていることを確認します。手順は次のとおりです。
PWA Kit プロジェクトでパスワードのリセットを構成するには、2 つの方法があります。
template-retail-react-app/config/default.js を更新します。a.更新 template-retail-react-app/config/default.js
PWA Kit プロジェクトで、前提条件の一部として設定したコールバック URL を使用して、次のようにtemplate-retail-react-app/config/default.jsを更新します。
1module.exports = {
2 app: {
3 login: {
4
5 // Enable password reset with an absolute callback URL.
6 resetPassword: {
7 callbackURI: 'https://example.com/reset-password-callback'
8 }
9
10 // Enable password reset with a relative callback URL.
11 // This example callback URL uses the default Marketing Cloud implementation.
12 // You can customize the behavior of this callback URL endpoint in ssr.js.
13 resetPassword: {
14 callbackURI: '/reset-password-callback'
15
16
17 // More code here...または
b.環境変数の使用
パスワードリセットの環境変数の値は、template-retail-react-app/config/default.jsで追加した値を上書きします。
Note
この環境変数を使用して、パスワード リセットのコールバック URL を設定します。
RESET_PASSWORD_CALLBACK_URI
環境変数を参照してください。
このセクションでは、パスワードのリセットに関連して発生する可能性のある一般的なエラーの解決策を提案します。
考えられる原因: Eメール配信サービスに予想以上に時間がかかったか、買い物客に Eメールが届かなかった。
**推奨される解決策:**再送信オプションを含めるか、買い物客が予備の連絡方法を入力できるようにします。スパムフィルターに問題がないか確認します。
j