此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情,请点击此处。
PWA Kit 开箱即用,可为购物者使用密码重置选项。在您的 Progressive Web App (PWA) Kit 站点中包含此功能,以改善购物者体验。通过密码重置,如果购物者忘记了密码,他们可以使用电子邮件或短信中的验证码或链接通过创建新密码来重新获得对其帐户的访问权限。
我们的 演示站点 显示了密码重置的默认实现。
若要为 PWA Kit 站点启用和配置密码重置,请按照本指南中的步骤作。在本指南中,我们使用一个具有 URL 的示例网店: https://www.example.com。替换 example.com 为您的域名。
混合网店不支持密码重置。
Note
要使用密码重置,请使用可组合网店和 Retail React App 版本 6.0 或更高版本构建站点。
有三个配置步骤。
Note
提供 SLAS 的回调 URL。这样,SLAS 就可以向该 URL 发送您的网站为购物者创建令牌(验证码或电子邮件或文本中的链接)所需的所有信息。有关更多背景信息,请参阅 密码重置。
SLAS 向回调 URL 发出 HTTP POST 请求,以将购物者的凭据转发到您选择的目标,通常是电子邮件或营销服务提供商。默认情况下,PWA Kit 会生成一个安全链接,并使用 Salesforce Marketing Cloud 在电子邮件中转发该链接。要自定义此功能,请描述要用于确保购物者获得 SLAS 生成的八位数令牌的机制。
以下是描述向 SLAS 提供回调 URL 的机制的三个可能选项。下面将详细介绍它们。
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 客户端 IDMARKETING_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 回调路径,则还要在 ssr.js 设置 POST 端点的位置更新它。见选项c。在下面的 PWA Kit 项目中使用自定义 POST 终结点。
或
c.在 PWA Kit 项目中使用自定义 POST 终结点
app/ssr.js 以使用所选选项(电子邮件或文本)处理令牌传送。请参阅此 Marketing Cloud 实施 app/ssr.js 示例。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 })对于三个回调 URL 选项中的任何一个,请确保您配置的回调 URL 已列入您正在使用的 SLAS 客户端字段中的允许列表 Callback URL 。为此,请执行以下作:
有两种方法可以在 PWA Kit 项目中配置密码重置。
template-retail-react-app/config/default.jsa.更新 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
参阅环境变量。
本部分针对您可能遇到的与密码重置相关的常见错误提供建议的解决方案。
潜在原因: 电子邮件发送服务花费的时间比预期的要长,或者购物者没有收到电子邮件。
建议的解决方案: 包括重新发送选项或允许购物者输入备用联系方式。检查垃圾邮件过滤器是否存在问题。