實現無密碼登錄

PWA Kit 開箱即用，可選擇為購物者使用無密碼登錄。在您的 Progressive Web App （PWA） Kit 網站中包含此功能，以改善購物者體驗。透過無密碼登入，購物者可以安全地使用驗證碼或電子郵件、簡訊中的連結來登入您的網站而不是密碼。

我們的演示網站顯示了無密碼登錄的默認實現。

若要為 PWA Kit 網站啟用和配置無密碼登錄，請按照本指南中的步驟作。在本指南中，我們使用一個具有URL的示例網店： https://www.example.com。替換 example.com 為您的功能變數名稱。

混合網店不支持無密碼登錄。

Note

先決條件

要使用無密碼登入：

使用可組合型網店和 Retail React App 版本 6.0 或更高版本構建網站。
配置購物者登錄和 API 訪問（SLAS）專用用戶端。有關為無密碼登錄配置 SLAS 專用用戶端所涉及的詳細資訊，請參閱配置無密碼登錄。

配置無密碼登錄

有三個配置步驟。

配置回調 URL
回調 URL 的允許清單
在 PWA Kit 專案中完成配置

購物者必須至少使用其使用者名和密碼登錄一次您的網站，然後才能使用無密碼登錄。
與“重定向 URL”字段不同，“回調 URL”字段不支援通配符。始終包含回調的完整 URL，包括協定。

Note

1. 配置回調 URL

提供 SLAS 的回調 URL。這樣，SLAS 就可以向該 URL 發送您的網站為購物者創建登錄令牌（驗證碼或電子郵件或文本中的連結）所需的所有資訊。有關更多背景資訊，請參閱使用 SLAS 的無密碼登錄和通過簡訊的無密碼登錄。

SLAS 向回調 URL 發出 HTTP POST 請求，以將購物者的憑據轉發到您選擇的目標，通常是電子郵件或行銷服務提供者。默認情況下，PWA Kit 會生成一個安全連結，並使用Salesforce Marketing Cloud 在電子郵件中轉發該連結。要自定義此功能，請描述要用於確保購物者獲得 SLAS 生成的八位數無密碼令牌的機制。

以下是描述向 SLAS 提供回調 URL 的機制的三個可能選項。下面將詳細介紹它們。

a.使用外部回調 URL
b.使用 Marketing Cloud 集成
c.在 PWA Kit 專案中使用自定義 POST 終結點

a.使用外部回調 URL

提供任何可公開訪問的外部回調 URL，該 URL 可以使用購物者的電子郵件處理令牌傳送。

此回調 URL 的範例包括 B2C Commerce 實體、託管運行時環境或您自己的伺服器。
配置 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_PASSWORDLESS_LOGIN_TEMPLATE 添加到您存儲在 Marketing Cloud 中的電子郵件範本的事務性 API 事件的唯一事件定義金鑰。
請參閱 Environment Variables (環境變數)。
在 SLAS 用戶端中配置完整的回調 URL。例如：https://example.com/passwordless-login-callback。請參閱配置 SLAS 專用用戶端。

如果要自定義 /passwordless-login-callback 回調路徑，則還要在 ssr.js 設置POST端點的位置更新它。見選項c。在下面的 PWA Kit 專案中使用自訂 POST 終結點。

或

c.在 PWA Kit 專案中使用自定義 POST 終結點

配置自定義 POST 端點， app/ssr.js 以使用所選取選項（電子郵件或文字）處理令牌傳送。請參閱此 Marketing Cloud 實施 app/ssr.js 示例。

1// Define a POST route for the '/passwordless-login-callback' endpoint.
2app.post('/passwordless-login-callback', (req, res) => {
3        const slasCallbackToken = req.headers['x-slas-callback-token']
4        validateSlasCallbackToken(slasCallbackToken).then(() => {
5            sendMagicLinkEmail(
6                req,
7                res,
8                PASSWORDLESS_LOGIN_LANDING_PATH,
9                process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE
10            )
11        })
12    }

配置 SLAS 專用用戶端。在回調 URL 欄位中，輸入您在自訂 POST 端點中設置的回調 URL。

2. 回調 URL 的允許清單

對於三個回調 URL 選項中的任何一個，請確保您配置的回調 URL 已列入您正在使用的 SLAS 用戶端欄位中的允許清單 Callback URL 。為此，請執行以下作：

存取 SLAS 管理 UI： 登錄到 Salesforce B2C Commerce 實例，然後轉到 SLAS 管理部分。
建立或編輯用戶端： 選擇要管理回調 URL 的 SLAS 用戶端。
新增允許的網址： 在用戶端配置中，提供網站的有效回調 URL 清單。

3. 在 PWA Kit 專案中完成配置

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 ，如下所示。

1module.exports = {
2    app: {
3        login: {
4                        
5            // Enable passwordless login with an absolute callback URL.
6            passwordless: {
7                enabled: true,
8                callbackURI: 'https://example.com/passwordless-login-callback'
9            }
10                        
11            // Enable passwordless login with a relative callback URL.
12            // This example callback URL uses the default Marketing Cloud implementation.
13            // You can customize the behavior of this callback URL endpoint in ssr.js.
14            passwordless: {
15                enabled: true,
16                callbackURI: '/passwordless-login-callback'
17            
18            
19            // More code here...

b.選擇性：使用環境變數設置回調 URL

無密碼登錄的環境變數的值將覆蓋您在中添加 template-retail-react-app/config/default.js的任何值。

Note

（可選）您可以使用環境變數而不是 template-retail-react-app/config/default.js來設置回調 URL。用於 template-retail-react-app/config/default.js 啟用無密碼登錄。配置此環境變數以設置回調 URL。

PASSWORDLESS_LOGIN_CALLBACK_URI

請參閱 Environment Variables (環境變數)。

無密碼登錄的最佳實踐

實施速率限制，防止濫用無密碼登錄功能。例如，如果您使用的是嵌入式CDN（eCDN），則可以應用 eCDN 速率限制規則。
使用強大的安全措施來保護購物者帳戶。例如，如果您使用的是第三方內容分發網路（CDN），例如 Cloudfare，則可以按威脅評分阻止請求。
跟蹤購物者對身份驗證選項的使用方式並有效地診斷問題。例如，使用 Log Center 訪問來自 Managed Runtime （MRT）和 B2C Commerce 實例的日誌。

無密碼登錄疑難解答

本部分針對您可能遇到的與無密碼登錄相關的常見錯誤提供建議的解決方案。

無密碼登錄的意外結果

潛在原因： 範圍或回調 URL 不正確。

建議的解決方案： 確保正確配置範圍和回調 URL。請參閱配置 SLAS 專用用戶端。

實現無密碼登錄

先決條件

配置無密碼登錄

1. 配置回調 URL

2. 回調 URL 的允許清單

3. 在 PWA Kit 專案中完成配置

無密碼登錄的最佳實踐

無密碼登錄疑難解答

無密碼登錄的意外結果

也請參閱