HIKO Social Login Plus

它能为您的网上商店加入社交与免密码登录功能。消费者可以使用 Google、LINE、Facebook、Apple 等提供商登录，可通过发送到电子邮件或 WhatsApp 的一次性验证码登录，也可以使用 passkey 登录——完全不需要记住密码。每一次登录都会对应到一个 Shopify 客户账户。

此应用仅供使用新版客户账户的 Shopify Plus 商店使用。若您的商店采用其他套餐，或仍在使用传统（旧版）客户账户，设置将被阻止，并显示一则通知说明需要变更的项目。若您刚完成升级或切换，请重新打开应用以重新检查。

需要付费订阅。套餐与价格由 Shopify 自己的订阅页面呈现，也由 Shopify 收费并显示在您的 Shopify 账单上——我们不另外向您收款。尚未订阅时，打开应用会直接被带到那个订阅页面；订阅生效后所有设置页面才会解锁。

开发用商店（含 Plus sandbox）不需要订阅，可以直接使用完整功能，方便您先搭建与测试。

安装界面会请您授权三项权限，每一项都对应一个实际功能：

• read_customers — 用电子邮件找出已有客户，让社交登录接上原本的账户，而不是重复创建。
• write_customers — 把登录时的营销订阅勾选同步到该客户的 Shopify 营销同意设置，并写入社交身份的标签与 metafield。
• read_locales — 读取商店的主要语言，以便用正确的语言发送邮件。

客户数据属于 Shopify 的受保护客户数据，因此这些权限需要额外批准；没有它们，营销同意同步与已有客户匹配都无法运作。

• 仪表板 — 设置指南、登录活动摘要，以及最近 7 天的登录趋势。点击侧边栏的应用名称即可回到这里。
• 客户分析 — 客户名单与单条登录记录、趋势图与活动分布。
• 身份提供商 — 几乎所有登录设置都在这里：自定义提供商（与客户账户的对接）、社交媒体、自定义样式、电子邮件登录、Marketing opt-in、营销平台、社交登录身份。
• 店面小组件 — 登录界面如何出现在您的网上商店上，以及登录后要去哪里。
• Integrations — Shopify Admin API、外发 webhook、Headless 与移动端登录。
• 翻译 — 各语言的小组件与验证（OTP）页面文案。

这是唯一必须完成的设置步骤。此应用本身就是一个 Shopify 会与之通信的身份提供商：

1. 打开身份提供商页面（或仪表板的设置指南），找到自定义提供商部分。
2. 点击创建自定义提供商，打开 Shopify Admin → 设置 → 客户账户，并添加第三方身份提供商。选择 "Custom or other" 并为其命名。
3. 将应用中显示的 Discovery URL、Client ID 与 Client secret 复制到对应的字段，并将登出后重定向 URI 参数名称设为显示的值（post-sign-out）。这个字段别跳过——漏了它，登出会不完整。
4. 保存，然后启用该提供商。
5. 回到应用，点击检测配置。它会实际检查您的店面，并告诉您对接是否已生效、Client ID 是否过期，或商店是否仍指向别处。

1. 打开身份提供商页面的社交媒体部分。
2. 展开您想要的提供商（例如 Google），并点击 如何获取您的 Client ID 与 secret 以查看逐步操作说明。
3. 在该提供商的控制台中创建 OAuth 应用，复制 Client ID 与 Client secret，粘贴后启用该提供商。
4. 点击保存。

每个提供商的设置指南都会直接链接到正确的控制台，并列出确切的操作步骤。您也可以在这个列表里直接拖动每个提供商的顺序，右侧的预览会实时反映结果。

16 个社交提供商：Google、Facebook、Apple、LINE、Kakao、X (Twitter)、TikTok、Amazon、Twitch、Microsoft、Yahoo、LinkedIn、Discord、Spotify、GitHub 与 Yandex。此外还有电子邮件一次性验证码、passkey 与 WhatsApp 登录。您可以自行选择要在小组件上显示哪些方式，以及显示顺序。

可以。您可以为每个提供商自备 OAuth Client ID 与 secret——没有绑定，而且授权界面上会显示您自己的品牌。部分提供商还有额外选项：Apple 密钥信息、Amazon 地区、LINE 加好友提示、Kakao 频道与范围，以及 Google 图标样式选择器。

可以，而且开发用商店不需要订阅。请注意两件事：

• 有密码保护的店面会让"检测配置"测不出结果。它需要实际连上您的店面才能判断登录是否已导向本应用，被密码挡住时会报告"无法自动检测"——这不代表您的配置有误。
• 社交提供商的 OAuth 应用通常要把测试商店的域名也注册进去，正式站与测试站请分别确认 Callback URL 都已登记。

可以。消费者会通过 WhatsApp 收到一次性验证码。您可以先使用我们的共用号码开始（每位客户每日 10 条、每家商店每日 2000 条，费用由我们承担），或在身份提供商页面连接您自己的 WhatsApp Business 号码，以掌控发送、消息模板、模板按钮类型、每家商店的使用上限与账单。

电子邮件登录让客户可以使用发送到电子邮件的验证码登录（不需密码）。验证完成后，应用会邀请客户创建 passkey（Face ID、指纹或设备 PIN 码）——passkey 是一次性验证码之后的升级，不是独立的登录入口。两者都可以在身份提供商页面的电子邮件登录部分（或仪表板的设置指南）单独开关。

可以，在身份提供商页面的电子邮件登录部分：

• 自定义 SMTP — 通过自己的邮件服务器（包括 Outlook / Office 365）发送一次性验证码，让邮件显示为来自您，而非来自我们。填好之后可以用发送测试邮件先确认配置是否正确。
• 自定义 OTP 电子邮件 — 逐一语言编辑验证码电子邮件的主题与 HTML 正文，并提供可视化与 HTML 两种编辑模式、实时预览，以及 {code}、{shop} 和 {minutes} 等占位符。已被自定义的语言会标注"已自定义"，随时可重置为默认值。

可以。同样在电子邮件登录部分，自定义 OTP 页面让您逐一语言改写整个验证码页面的 HTML——标题、验证码输入框、重新发送链接等全部内容。编辑器同样提供可视化／HTML 两种模式。若您的 HTML 缺少登录实际需要的元素，保存会被拒绝并告诉您少了什么，原本的页面不受影响。

此外还有一个在您的店面代管 OTP 页面开关：打开后，客户会在您商店自己的域名、您自己的主题里输入验证码，而不是在我们的域名。此开关默认关闭，需要已安装此应用的在线商店主题。

One Tap 会向尚未登录的消费者显示 Google 的一键登录提示。它默认关闭——待 Google 配置完成后，即可从仪表板或身份提供商页面的 Google 那一行打开。

他们会使用您网上商店上的登录小组件。点击某个社交提供商，或输入电子邮件（或 WhatsApp 号码）以接收一次性验证码。完成验证后，便会登录您的商店——并可选择启用 passkey，日后只要一键即可快速返回登录。小组件也会在消费者上次成功使用的方式上标注"上次使用"，让回访的人一眼就找到。

还是会看到您配置的登录方式。 因为这个应用是注册在客户账户里的身份提供商，任何走到登录的路径——结账、账户链接、直接输入网址——Shopify 都会交给本应用处理。

此时应用会依序尝试：先用还有效的"保持登录"session 直接无声完成登录；不行的话，就显示一个由我们代管的登录页，上面挂的是与店面上完全同一个小组件——同一批提供商、同一套样式与文案。所以您不需要为这条路径另外配置什么。

Shopify 硬性规定登录必须带着已验证的电子邮件，否则会拦下该次登录。而 X (Twitter)、TikTok 等提供商不一定会返回电子邮件。

遇到这种情况时，应用会在该提供商授权完成后，多插入一个步骤：请客户输入电子邮件并以一次性验证码验证，通过后才创建 Shopify 的登录。同一个人下次再用同一个提供商登录就不用再输入一次——我们会记住这组对应。这就是为什么这几个提供商的登录步骤看起来比 Google 多一步。

电子邮件相同就不会。 客户是以已验证的电子邮件为准来识别的，所以同一个人先用 Google、之后改用 Facebook，只要两边的电子邮件一样，就是同一位客户，登录次数会累加，客户分析里也只有一条。

电子邮件不同就会是两位客户——这是刻意的，因为我们无法证明那是同一个人。若要合并，请让客户登录后从账户页面的已连接的登录方式自行连接，并在店面小组件页面打开允许使用不同电子邮件连接账户。

会接上原本那位客户，不会重复创建。匹配的依据是电子邮件：社交账号的已验证电子邮件如果对得上您商店里已有的客户，那次登录就直接登录该客户，订单记录与地址全部保留。

可以。在店面小组件页面加入账户页面区块后，已登录的客户就能在客户账户的个人资料页上看到自己已连接的登录方式，并可以断开连接或连接新的方式。

同一个部分还有允许使用不同电子邮件连接账户开关（默认关闭）：打开后，客户可以连接已验证电子邮件与账户电子邮件不同的社交账号，之后用它登录会解析到同一个账户。它会覆盖提供商自身的电子邮件，请只在您信任客户仅连接本人拥有的账户时才启用。

共有四种方式，全部都可在店面小组件页面配置：

• 账户图标弹出窗口 — 点击在主题中启用以打开主题编辑器的"应用嵌入"，打开 Sign-in widget，然后保存。之后点击页首的账户图标便会打开登录弹出窗口。若您的主题结构特殊，可以在账户控件部分填入自定义 CSS 选择器，或选择只用您的选择器、跳过自动检测。
• 登录页面 — 从您的主题链接到 /apps/signin（例如页首菜单项），即可打开完整的代管登录页面。
• 登录卡片区块 — 从主题编辑器的"应用"标签页，将内嵌的 Sign-in 应用区块加入任何版块。
• 已连接的登录方式 — 加入账户页面区块，让已登录的客户可以在个人资料页面上查看并断开他们已连接的社交登录方式。

默认沿用主题原本的链接。若您有自己的会员中心，可以在店面小组件页面填入已登录时的账户页面链接（商店上的路径，例如 /a/accounts），已登录的客户点击页首账户图标时就会前往那里。

可以，在店面小组件页面。设置登录后跳转——回到他们登录时所在的页面、上一次访问的页面，或指定的路径（注意：无论此设置为何，Google One Tap 一律会让客户停留在原本所在的页面）。保持登录（SSO session）会让回访客户在您设置的期间内（1–90 天，默认 30）保持登录状态，免去每次访问都要重新验证；也可以选择完全不改动 Shopify 原生的 session 时效。

可以，在身份提供商页面的自定义样式部分：主题、按钮形状、大小、布局（图标／文字／图标＋文字／文字加右侧图标）、图标大小与分隔线——此外高级覆盖还有背景与边框颜色、边框宽度、按钮高度、图标与标签大小，以及标签粗细与颜色。

需要更细的控制时，可以打开自定义 CSS：应用会依您当前的配置生成一份完整、有注释的 CSS 模板作为起点（.hs-btn、.hs-lbl 等类），您再自行修改；随时可以根据配置重新生成。背景、边框与按钮高度请用上方的字段设置，不要用 CSS。所有变更都会实时反映在旁边的预览上。

可以。在身份提供商页面展开任一提供商，就有按钮文字字段，而且是逐一语言设置的——例如 Google 那颗按钮在中文与日文可以是不同的写法。留空则使用内置翻译。

可以。小组件内置 15 种语言，并会自动跟随每位消费者的网上商店语言。在翻译页面，您可以针对各语言覆盖登录组件与验证（OTP）页面的任何字符串，甚至添加未列出的语言；"重置为默认值"可把某个语言整批还原成内置文案。营销与同意复选框的文字改在身份提供商页面的 Marketing opt-in 部分直接编辑（同样逐一语言，且支持 HTML）。

应用后台本身另外提供 11 种语言，可从页首的语言菜单切换。

不会有明显影响。小组件是单一一支打包好的文件，由 Shopify 自己的 CDN 提供，并以 defer 加载——也就是排在页面渲染完之后，不会挡住首屏。弹出窗口与卡片区块共用同一份文件，同一个页面只会加载一次。此外，客户已经登录时，登录卡片区块根本不会输出。

可以，在身份提供商页面的 Marketing opt-in 部分。登录时的"以电子邮件接收最新消息与优惠"复选框会同步到消费者的 Shopify 营销同意设置；您可以选择是否预先勾选（注意：在欧盟／英国的 GDPR/ePrivacy 规范下不允许预先勾选），以及未勾选时是否取消订阅。同一个部分里还可以要求在登录前勾选条款同意复选框。两个复选框的文字与链接都可以在这里逐一语言编辑。

若勾选的是一位还不存在的新客户，该同意会先被暂存，等 Shopify 实际创建这位客户时才套用上去——所以刚注册的客户身上不会立刻看到同意状态，这是正常的，不是漏掉。

可以。在身份提供商页面的营销平台部分，使用您的 API 密钥连接 Klaviyo、Mailchimp 或 Omnisend，可先"验证密钥"确认连接，再"获取列表"选择要将客户加入的名单，并选择要在每次登录时同步所有人，或只同步选择加入的消费者。另外还可以为同步过去的客户加上 social-login 或您自定义的标签，以及在 Klaviyo 创建社交登录与 Google One Tap 的登录指标。

可以，在身份提供商页面的社交登录身份部分：

• 标签 — 客户以社交账号登录时，自动为该客户加上标签，模板默认是 uid_%(social)s_%(user_id)s，可用的变量是 %(social)s 与 %(user_id)s。（刻意不提供 IP，它每次登录都会变动，会耗尽 Shopify 每位客户 250 个标签的上限。）
• 客户 metafield — 此项恒为开启：每次社交登录都会以 JSON 写入客户 metafield，记录提供商、用户 ID、姓名与绑定时间，可用 {{ customer.metafields.hiko.social_identities }} 从主题读取。

可以。在 Integrations 页面：

• Headless 与移动端登录 — 配置 Customer Account API 的 OAuth 客户端与允许的来源，即可在 headless 网页店面与原生移动 App（React Native、iOS、Android）加入社交登录、电子邮件 OTP 与生物识别登录。页面上有"如何获取 Client ID"的逐步说明、移动 App 自定义 URI scheme 的说明，以及对应 SDK 与 GitHub 仓库的链接。
• Shopify Admin API — 提供现成的查询示例，可使用您自行创建的访问令牌读取您的客户及其元字段（metafields）。

可以。在 Integrations 页面，配置一个 HTTPS 端点，并为 customer.login、customer.connected 与 customer.created 启用外发 webhook。每个请求都会以您生成的密钥签名（X-HIKO-Signature），并提供发送测试事件按钮、近期发送记录，以及一段可直接使用的 Node.js 签名验证示例。

客户分析页面会列出您的客户与单条登录记录，并提供搜索、筛选与 CSV 导出功能。它也会显示一段时间内的登录次数，以及按提供商、浏览器、操作系统、国家与城市的分类统计。点击任一位客户可以看到详细资料——电话、标签与已连接的社交身份——并在需要时删除该客户（连同其登录记录）。仪表板也会显示最近的登录活动与 7 天趋势。

这里的客户数通常会少于 Shopify 后台的客户总数，这是正常的：这一页只统计曾经通过本应用登录过的人，通过结账、导入或其他方式创建的客户不会出现在这里。

我们只保存让登录运作与提供分析所需的数据：

• 客户 — 电子邮件、姓名、用过哪些提供商与其用户 ID、首次／最后登录时间与登录次数。
• 登录记录 — 每次登录的时间、提供商、浏览器、操作系统与大致位置（国家／城市）。
• 短暂状态 — 登录过程中的一次性数据（登录选择提示、一次性验证码、"保持登录"session）只存在几分钟到您设置的天数，会自动过期；"保持登录"session 在存储时是加密的。

我们不会保存客户在社交提供商那边的密码，也不会保存提供商的长期访问令牌。上述客户与登录数据会一直保留，直到该客户被删除、或您卸载应用为止（见下面两题）。

有两条路，两条都可以：

• 您自己删 — 在客户分析页面点开那位客户，选择删除。他的客户数据与所有登录记录都会一并移除。
• 走 Shopify 的流程 — 客户通过 Shopify 提出数据删除或查询请求时，Shopify 会通知本应用，我们会自动清除该客户在此应用中的数据。您不需要额外操作。

已保存的机密值在后台只会遮蔽显示，不会再以明文送回浏览器；重新保存时留空即代表沿用原值，不会被清掉。webhook 的签名密钥只在生成的当下完整显示一次，之后就看不到全文——请在那时复制保存。

自定义提供商的 Client secret 可以随时重新生成（会要求您确认），旧的立即失效；生成后别忘了把新值粘回 Shopify 的客户账户设置，否则登录会中断。

卸载当下，您的所有配置（提供商、凭证、样式、SMTP、营销配置）会被清除，登录 session 也会失效。客户与登录分析数据则依 Shopify 的规定，在卸载后约 48 小时由 Shopify 通知我们一并清除。

因此重新安装等于从空白开始：所有提供商凭证要重新填写，Shopify 客户账户里的自定义提供商也要用新的 Client ID／secret 重新配置一次。客户本身留在 Shopify（他们是 Shopify 的客户，不是我们的），但谁用哪个社交账号登录过的记录不会回来。

依序检查：

• 应用嵌入没有开启。 弹出窗口需要主题的"应用嵌入"中打开 Sign-in widget 并保存——在店面小组件页面点在主题中启用可以直接跳到那里。
• 账户图标没被认出来。 自动检测涵盖大多数主题，定制化程度高的可能认不出；请在账户控件填入该元素的 CSS 选择器。
• 您自己已经登录了。 登录卡片区块对已登录的客户不会显示——请用无痕窗口测试。

• 自定义提供商只 Save 没有 Activate。 这是最常见的原因。回到 Shopify 客户账户设置确认它是启用状态，然后用检测配置验证。
• Client ID 已经过期。 若您重新生成过 secret 或重装过应用，Shopify 那边留的可能是旧值；检测配置会直接告诉您它看到的是哪一组。
• 该提供商的凭证没填。 没有凭证的提供商会在列表里被标注出来——这种按钮不会有作用。

请确认该提供商显示的 Callback URL 已完全一致地注册在该提供商的控制台中。只有在您使用自己的 Google client 时才会用到您的商店域名 callback；其余所有情况（包含使用我们共用 Google client 时）都使用该提供商字段旁显示的 broker callback。请完全照原值复制。

电子邮件： 先请对方检查垃圾邮件箱。若您配置了自定义 SMTP，用发送测试邮件确认服务器配置与发件地址可用——发件域名若没有正确的验证记录，很容易被归为垃圾邮件。另外，同一个电子邮件地址每天最多 20 组验证码，达到上限时客户会直接看到提示消息。

WhatsApp： 使用自己的号码时，消息模板必须是 Meta 已批准的验证模板，而且模板语言代码要与您填的一致。使用共用号码则有每位客户每日 10 条、每家商店每日 2000 条的上限。

这几乎都是登出后重定向 URI 参数名称没配置造成的。打开"保持登录"后，我们会另外记着这位客户；Shopify 必须在登出时通知我们，我们才会一并把这份记忆清掉。

请回到 Shopify Admin → 设置 → 客户账户，打开您的自定义提供商，确认该字段的值是 post-sign-out（与应用中显示的一致），保存后再测一次登出。

请使用页首中的技术支持按钮给我们发消息（可附加文件），我们会以电子邮件回复。