客户账户社交登录

除了客户账户默认的无密码登录体验之外,您还可以连接您的 Google 和 Facebook 账户,让客户使用他们的社交凭据进行登录。

为客户账户激活社交登录功能可通过客户熟悉的身份验证方法为其提供更快捷的登录体验。您可以在商店中激活多种社交登录方法。

如果您已将自己的身份认证服务商连接到客户账户并希望连接社交登录功能,则需要联系您的外部身份认证服务商。

将社交登录连接到客户账户的注意事项

请查看以下有关将社交登录连接到客户账户的注意事项:

  • 您必须拥有要连接到客户账户的提供商的开发者账户。
  • 使用社交登录时,同步到 Shopify 的唯一客户数据是客户的电子邮件地址。

将 Google 连接到客户账户

若要将 Google 连接到客户账户,您需要按顺序完成以下任务:

在设置过程中,您需要在 Google Cloud Console 浏览器标签页和 Shopify 后台之间进行切换。您需要先设置好 Google Cloud 账户,然后才能将 Google 连接到客户账户。参阅 Google 的帮助文档,详细了解 Google Cloud。

第 1 步:在 Shopify 后台中打开“通过 Google 登录”页面

  1. 在 Shopify 后台中,转到设置 > 客户账户

  2. 身份验证部分中,点击管理

  3. 点击 Google 旁边的连接,打开通过 Google 登录页面。

此页面包含在配置 Google 应用的 OAuth 客户端时需要复制并粘贴的信息,因此请在单独的浏览器标签页中保持此页面开启。

第 2 步:在 Google Cloud Console 中创建应用

  1. 在另一个浏览器标签页中,登录您的 Google Cloud Console
  2. 选择一个现有项目或创建一个新项目。您会被重定向到项目的控制面板。
  3. 点击 Menu,然后点击 API 和服务 > 凭据
  4. 点击配置同意屏幕 > 开始
  5. 填写您的项目 OAuth 配置详细信息:
    1. 为您的应用指定一个客户能够识别的名称(例如在线商店名称)。提供用于技术支持的电子邮件地址,然后点击下一步
    2. 受众群体部分,选择外部,然后点击下一步
    3. 提供一个联系电子邮件地址,以接收 Google 可能会发送的关于该项目的任何通知,然后点击下一步
    4. 同意 Google 的 API Services User Data Policy(API 服务用户数据政策),然后点击继续
    5. 点击创建
  6. 配置在同意屏幕上向客户显示的您的应用的政策信息:
    1. 点击品牌
    2. 应用网域部分,包含主页链接、公开隐私政策链接和服务条款链接。参阅创建商店政策,详细了解相关内容。

第 3 步:在 Google Cloud Console 中配置应用的 OAuth 客户端

此步骤需要您从 Shopify 后台的通过 Google 登录页面的设置说明部分复制详细信息,然后将其粘贴到 Google Cloud Console 标签页中的相应字段中。

  1. 在 Google Cloud Console 中的项目应用内,点击概览
  2. 指标部分,点击创建 OAuth 客户端
  3. 配置 OAuth 客户端详细信息:
    1. 应用类型下拉菜单中,选择 Web 应用
    2. 名称字段中,输入一个名称。
  4. 为您的应用配置已授权的 JavaScript 来源
  5. 已授权的 JavaScript 来源部分中,点击 + 添加 URI
  6. 在 Shopify 后台的通过 Google 登录页面中,复制已授权的 JavaScript 来源的值。
  7. 在 Google Cloud Console 中,将该值粘贴到 URI 1 字段中。
  8. 如果您的 Shopify 后台的已授权的 JavaScript 部分中有多个 URI,请对其他 URI 字段重复上述步骤。
  9. 为您的应用配置已授权的重定向 URI
  10. 在 Google Cloud Console 中,在已授权的重定向 URI 部分中,点击 + 添加 URI
  11. 在显示 Shopify 后台的浏览器标签页中,复制已授权的重定向 URI 的值。
  12. 导航回 Google Cloud Console,然后将该值粘贴到 URI 1 字段中。
  13. 如果您的 Shopify 后台的已授权的重定向 URI 部分中有多个 URI,请对其他 URI 字段重复上述步骤。
  14. 在您的 Google Cloud Console 中,点击 Create

请保持显示的 OAuth client created 对话框处于打开状态,以便在第 4 步:在 Shopify 后台中配置凭据中使用,因为您需要将相关信息从 Google Cloud Console 复制并粘贴到您的 Shopify 后台中。

第 4 步:在 Shopify 后台中配置凭据

  1. 在 Google Cloud Console 的 OAuth client created 对话框中,复制 Client ID
  2. 在 Shopify 后台的使用 Google 登录页面上,将 Client ID 粘贴到凭据部分中。
  3. 在 Google Cloud Console 的 OAuth client created 对话框中,复制 Client secret
  4. 在 Shopify 后台中使用 Google 登录页面的凭据部分,粘贴 Client secret
  5. 在 Shopify 后台的使用 Google 登录页面上,点击保存

第 5 步:在 Google Cloud Console 中发布应用

  1. 在 Google Cloud Console 项目的应用中,点击 Audience
  2. 点击 Publish app

将 Facebook 连接到客户账户

若要将 Facebook 连接到客户账户,您需要按顺序完成以下任务:

在设置过程中,您需要在 Meta for Developers 控制面板和 Shopify 后台的浏览器标签页之间进行切换。若要将 Facebook 连接到客户账户,您必须拥有 Meta 开发者账户。了解如何注册成为 Meta 开发者

第 1 步:在 Shopify 后台中打开“使用 Facebook 登录”页面

  1. 在 Shopify 后台中,转到设置 > 客户账户

  2. 身份验证部分中,点击管理

  3. 点击 Facebook 旁边的连接,打开使用 Facebook 登录页面。

第 2 步:在 Meta for Developers 控制面板中创建应用

  1. 在单独的浏览器标签页中,转到 Meta for Developers 控制面板,然后点击 Login 进行登录。如果您尚未设置 Meta 开发者账户,则需要先在登录页面创建新账户,然后再继续执行下一步。
  2. 点击 Apps
  3. 点击 Create App
  4. 填写 App nameApp contact email 字段,然后点击 Next
  5. Add use cases 页面上,选择 Authenticate and request data from users with Facebook Login,然后点击 Next
  6. Which business portfolio do you want to connect to this app 页面上,选择一个业务组合,或者选择 I don't want to connect a business portfolio yet.,然后点击 Next
  7. 查看 Publishing requirements 页面,然后点击 Next
  8. 查看 Overview 页面,然后点击 Go to dashboard

第 3 步:配置 Meta 应用设置

  1. 创建应用后,在您的 Meta for Developers 控制面板中,点击 Use cases
  2. Authenticate and request data from users with Facebook Login 用例中,点击 Customize
  3. 为了确保在登录时捕获客户信息,请在 Permissions and features 部分中,点击 email 旁边的 Add
  4. 点击 Settings,然后转到 Client OAuth settings
  5. 在 Shopify 后台的使用 Facebook 登录页面上,从重定向 URL 部分复制重定向 URL。
  6. 在 Meta for Developers 控制面板的 Settings 页面上,将重定向 URL 粘贴到 Valid OAuth Redirect URIs 字段中。
  7. 如果您的 Shopify 后台中的重定向 URL 部分有多个重定向 URL,请对其他重定向 URL 重复上述步骤。
  8. 在 Shopify 后台的使用 Facebook 登录页面上,从取消授权 URL 部分复制该 URL。
  9. 在 Meta for Developers 控制面板的 Settings 页面上,将该 URL 粘贴到 Deauthorize callback URL 字段中。
  10. 在 Meta for Developers 控制面板的 Settings 页面上,点击 Save changes

第 4 步:在 Shopify 后台中配置凭据

  1. 点击 Home 图标返回到您的 Meta for Developers 控制面板,然后点击 App settings > Basic
  2. 从 Meta for Developers 控制面板中复制 App ID
  3. 在 Shopify 后台的使用 Facebook 登录页面上,将 App ID 粘贴到凭据部分的 App ID 字段中。
  4. 在 Meta for Developers 控制面板中,点击 App secret 旁边的 Show,然后复制 App secret
  5. 在 Shopify 后台的使用 Facebook 登录页面上,将 App secret 粘贴到 App secret 字段中,然后点击保存
  6. 在 Shopify 后台中,点击保存更改

第 5 步:测试并激活“使用 Facebook 登录”

  1. 在 Shopify 后台的使用 Facebook 登录页面上,点击更多操作 > 预览,然后像客户登录您的商店一样测试 Facebook 身份验证流程。
  2. 点击开启

开启“使用 Facebook 登录”后,您可以转到您的在线商店并使用 Facebook 登录您的客户账户,以此来测试客户体验。

使用 Shop 登录

如果您激活了 Shop Pay,则您的客户可以使用他们的 Shop 凭据和已保存的密钥进行登录。客户在您的商店中使用 Shop Pay 结账后,也会自动登录 Shop。

使用 Shop 登录 已针对客户账户自动激活,若要将其从商店中移除,只能停用 Shop Pay

了解如何在商店中添加 使用 Shop 登录 按钮

管理社交登录选项

您可以编辑、关闭或移除已连接的社交登录方式。

关闭或移除社交登录方式后,客户将保持登录状态,以免操作中断。社交登录会话会在过期或客户退出登录时自然结束。

步骤:

  1. 在 Shopify 后台中,转到设置 > 客户账户

  2. 身份验证部分中,点击管理

  3. 在要更改的登录方式旁边,点击 菜单。

  4. 执行以下任一操作:

    • 若要编辑登录选项,请点击管理,然后更新要编辑的凭据。
    • 若要关闭而不移除登录选项,请点击关闭
    • 若要移除登录选项,请点击移除,然后在对话框中点击移除

更改客户账户域名时更新您的社交登录选项

如果您计划将客户账户域名更改为其他 URL,则需要在 Shopify 中进行更改之前更新社交登录设置。这可确保客户能够继续顺畅登录。

在 Shopify 中将您的客户账户 URL 从旧格式(例如 shopify.com/1234567890/account)更新为新的子域名格式 account.your-store.com 时,或者从现有子域名更新为其他子域名(例如将 account.your-store.com 更新为 customers.your-store.com)时,您需要执行这些步骤。

将新的客户账户子域名添加至社交服务提供商设置

您需要将新域名和当前域名一起添加至社交服务提供商设置中。在 Shopify 中更改客户账户域名并确认客户账户的登录和退出登录流程正常运行后,您就可以移除旧域名条目。

您需要为每个已激活的社交登录选项重复这些步骤。

步骤:

Google
  1. 转至 Google Cloud Console,然后打开 API 和服务 > 凭据
  2. 选择您为 Shopify 创建的 OAuth 2.0 客户端。
  3. 已获授权的 JavaScript 来源中,添加一个新条目。例如:https://account.your-store.com
  4. 已获授权的重定向 URI 中,添加一个新条目。例如:https://account.your-store.com/authentication/social/google/callback
  5. 取消授权回调 URL 中,添加一个新条目。例如:https://account.your-store.com/authentication/social/google/revoke
  6. 保存更改。目前暂且保留旧 URL 和新 URL。
  7. 返回您的 Shopify 后台,并按照相关步骤在 Shopify 中将您的账户域名更改为新的自定义子域名 URL
  8. 在您的在线店面中测试每个社交选项的登录和退出登录功能,确认一切运行正常。
  9. 可选:确认登录流程运行正常后,您可以返回 Google 并移除旧域名条目。
Facebook
  1. 转至 Meta for Developers 并打开您的应用。
  2. 导航至 Facebook 登录 > 设置
  3. 有效的 OAuth 重定向 URI 中,添加一个新条目。例如:https://account.your-store.com/authentication/social/facebook/callback
  4. 取消授权回调 URL 中,添加一个新条目。例如:https://account.your-store.com/authentication/social/facebook/revoke
  5. 导航至设置 > 基本
  6. 应用域名中,添加一个新条目。例如:account.your-store.com
  7. 保存更改。目前暂且保留旧 URL 和新 URL。
  8. 返回您的 Shopify 后台,并按照相关步骤在 Shopify 中将您的账户域名更改为新的自定义子域名 URL
  9. 在您的在线店面中测试每个社交选项的登录和退出登录功能,确认一切运行正常。
  10. 可选:确认登录流程运行正常后,您可以返回 Facebook 并移除旧域名条目。