實現社交登錄

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

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

為支援的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 身份供應商