实现无密码登录

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 事件的唯一事件定义密钥。
参阅环境变量。
在 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： 在客户端配置中，提供站点的有效回调 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

参阅环境变量。

无密码登录的最佳实践

实施速率限制，防止滥用无密码登录功能。例如，如果您使用的是嵌入式 CDN （eCDN），则可以应用 eCDN 速率限制规则。
使用强大的安全措施来保护购物者帐户。例如，如果您使用的是第三方内容分发网络（CDN），例如 Cloudfare，则可以按威胁评分阻止请求。
跟踪购物者对身份验证选项的使用情况并有效地诊断问题。例如，使用 Log Center 访问来自 Managed Runtime （MRT）和 B2C Commerce 实例的日志。

无密码登录疑难解答

本部分针对您可能遇到的与无密码登录相关的常见错误提供建议的解决方案。

无密码登录的意外结果

潜在原因： 范围或回调 URL 不正确。

建议的解决方案： 确保正确配置范围和回调 URL。请参阅配置 SLAS 专用客户端。

实现无密码登录

前提条件

配置无密码登录

1. 配置回调 URL

2. 回调 URL 的允许列表

3. 在 PWA Kit 项目中完成配置

无密码登录的最佳实践

无密码登录疑难解答

无密码登录的意外结果

另请参阅