实现社交登录

PWA Kit 开箱即用，可选择为购物者使用社交登录。在您的 Progressive Web App （PWA） Kit 网站中包括该功能，以改善购物者体验。通过社交媒体登录，购物者可以使用他们的社交媒体网络帐户快速登录您的网站并创建个人概况。

我们的演示站点显示了社交登录的默认实现。

若要为 PWA Kit 站点启用和配置社交登录，请按照本指南中的步骤作。在本指南中，我们使用一个具有 URL 的示例网店： https://www.example.com。替换 example.com 为您的域名。

混合网店不支持社交登录。

Note

支持的 IdP

PWA Kit 支持“ 支持的身份提供程序”下列出的标识提供者（IdP）。

如果您满足先决条件，则默认情况下，Google 和 Apple 社交登录在 Retail React App 中可用。

前提条件

要使用社交登录：

使用可组合型网店和 Retail React App 版本 6.0 或更高版本构建站点。
要添加您选择的 IdP，请完成注册身份提供商中的步骤。
配置购物者登录和 API 访问（SLAS）客户端。在客户端的重定向 URI 字段中，输入要在社交登录流中使用的重定向 URI。默认情况下，PWA Kit 用作 /social-callback 路径。例如，如果您的域是 example.com ，请输入： https://www.example.com/social-callback。替换 example.com 为您的实际域。

在 PWA Kit 中配置社交登录

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

若要在 PWA Kit 项目中配置社交登录，请按此示例所示进行更新 template-retail-react-app/config/default.js 。

确保在 PWA Kit 项目中配置的重定向 URI 路径与 SLAS 客户端中配置的路径匹配。SLAS 客户端可以对完整的 URI 使用通配符，但路径必须完全匹配。

1module.exports = {
2    app: {
3        login: {
4            social: {
5               
6               // Enable social login and add your chosen IdPs and Redirect URI.
7                enabled: true,
8                idps: ['Google', 'Apple'],
9                redirectURI: '/social-callback' // relative path
10            }
11            // More code here...
12            
13         sites,
14         commerceAPI: {
15            proxyPath: `/mobify/proxy/api`,
16            parameters: {
17            
18            // Add your clientId, organizationId, short code, and siteId.
19                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
20                organizationId: 'f_ecom_zzrf_001',
21                shortCode: '8o7m175y',
22                siteId: 'RefArchGlobal'
23            }
24
25           // More code here...

b.可选：使用环境变量设置重定向 URI

社交登录环境变量的值将覆盖您在中添加 template-retail-react-app/config/default.js的任何值。

Note

（可选）可以使用环境变量而不是 template-retail-react-app/config/default.js来设置重定向 URI。用于 template-retail-react-app/config/default.js 启用社交登录并设置 IdP。配置此环境变量以设置重定向 URI。

SOCIAL_LOGIN_REDIRECT_URI

参阅环境变量。

为支持的 IdP 添加图标

默认情况下，PWA Kit 会在文件的 template-retail-react-app/app/components/social-login/index.jsx 组件中 SocialLogin 导入和配置 Google 和 Apple 社交登录的图标。在您的站点上，您可以包含其他受支持的 IdP 的图标。为此，请完成以下步骤。

a.将图标 SocialLogin 导入组件

在此示例中，我们将 Facebook 图标导入到组件中 SocialLogin 。

1// Icons
2import {AppleIcon, GoogleIcon, FacebookIcon} from '@salesforce/retail-react-app/app/components/icons'

b.扩展 IDP_CONFIG 对象

IDP_CONFIG 使用组件中的 SocialLogin 对象来显示其他社交登录的按钮，每个按钮都有各自的图标和本地化的消息。

在此示例中，我们添加 Facebook 的配置。确保每个 IdP 密钥都与您选择的 IdP 的小写名称匹配。

1const IDP_CONFIG = {
2    apple: {
3        icon: AppleIcon,
4        message: defineMessage({
5            id: 'login_form.button.apple',
6            defaultMessage: 'Apple'
7        })
8    },
9    google: {
10        icon: GoogleIcon,
11        message: defineMessage({
12            id: 'login_form.button.google',
13            defaultMessage: 'Google'
14        })
15    },
16    facebook: {
17        icon: FacebookIcon,
18        message: defineMessage({
19            id: 'login_form.button.facebook',
20            defaultMessage: 'Facebook'
21        })
22    }
23}

社交登录的最佳实践

遵循最佳安全实践来保护购物者账户。例如：
- 如果您使用的是嵌入式 CDN （eCDN），则可以应用 eCDN 速率限制规则。
- 如果您使用的是第三方内容分发网络（CDN），例如 Cloudfare，则可以按威胁评分阻止请求。
跟踪购物者对身份验证选项的使用情况并有效地诊断问题。例如，使用 Log Center 访问来自 Managed Runtime （MRT）和 B2C Commerce 实例的日志。
在 Shopper Login and API Access Service （SLAS）中合并购物者资料，以确保同时拥有 B2C Commerce 身份和第三方 IdP 的购物者可以无缝登录，而无需创建重复账户。

如果这两个配置文件在您配置 loginMergeClaims 之前和购物者登录您的站点之前都存在，则不会执行合并。账户无法追溯合并。
合并购物者资料指南中的步骤适用于其 B2C Commerce 个人资料和第三方 IdP 具有相同登录 ID 的购物者。

Note

有关合并配置文件和支持的用例的更多详细信息，请参阅合并购物者配置文件。

社交登录疑难解答

本节针对可能遇到的与社交登录相关的一些常见错误提供建议的解决方案。

购物者无法登录

潜在原因： 社交登录配置不正确。

建议的解决方案： 确保在 PWA Kit 项目中配置的重定向 URI 路径与 SLAS 客户端中配置的路径匹配。请参阅配置社交登录。

发生购物者资料冲突

潜在原因： 购物者拥有 B2C Commerce 和第三方 IdP 的单独配置文件。

建议的解决方案： 按照合并购物者资料中的步骤合并在 B2C Commerce 和第三方 IdP 注册的购物者的记录。

另请参阅

SLAS 身份提供商