DTC Wayne

我以为要装 App + 月费 20 刀，结果 Shopify 自带 Google 一键登录

Wayne · 2026-05-07 · #shopify #独立站 #实操

最近逛海外的几家独立站，发现一个很常见的小细节：

打开站点几秒后，登录入口会出现一个按钮，写着 “Continue with Google”。点一下就直接登录了，连邮箱密码都不用填。

第一次看到的时候我还在想：这是不是要装个很贵的 App？是不是要写一堆代码？

研究了一下发现：Shopify 已经原生支持了。我自己跟着做了一遍，全程 15 分钟搞定，没装 App 也没写代码。

为什么值得花这 15 分钟

几个具体好处：

  • 客户不用记新密码，也不用去邮箱里点验证链接，点一下 Google 头像就进来了
  • “忘记密码”、“收不到重置邮件” 类的客服减少
  • 老客户复购回来不用回忆”当时用的哪个邮箱”，直接 Google 一键登录
  • 看到一家店有 Google 登录，下意识会觉得”在认真做”

它不能解决的问题：guest checkout 用户根本不创建账号，加了 Google 登录他们也不会突然去注册。这是针对会员和复购客户的小优化，别预期太多。

流程总览

1 前置检查 确认后台是「新版客户账号系统」 Settings → Customer accounts → Login services 2 在 Shopify 取出参数 页面会列出 9 条 URL，先不要关 底部 Client ID / Secret 留空，等下从 Google 拿 3 在 Google Cloud 建 OAuth 应用 建项目 → 配同意屏幕 (External + Publish) → 建 OAuth Client ID → 粘 6 条 URL → 拿到 Client ID 和 Client Secret 4 回 Shopify 粘贴并启用 填回两个值 → 开关 Off → On → 隐身窗口验证

不想看文字？把这段 Prompt 发给 AI，让它一步步带你做

复制下面这段粘到 ChatGPT、Claude、Gemini 或者豆包都行。它会先问你卡在哪一步，再一步步带你做。报错可以直接截图扔给它。

📋 给 AI 的手把手 Prompt
展开查看完整内容 
你是一位 Shopify 配置助手。我想给我的 Shopify 店开启 "Sign in with Google"（Google 一键登录），需要你手把手带我做，不要一口气把所有步骤甩给我。

请按以下方式与我互动：


    

  1. 先问我现在停在哪一步，或者还没开始
    2. 

  2. 每次只讲一个具体动作，等我说”做完了”再继续下一步
    3. 

  3. 我贴报错截图或文字时，先帮我诊断原因再给修复方案
    4. 

  4. 不要假设我熟悉 Google Cloud Console；每个菜单、每个按钮都明确告诉我点哪里
    5. 



整体流程四个阶段：
① 前置检查：确认 Shopify 后台是新版客户账号系统（Settings → Customer accounts → Login services 菜单存在）。如果是旧版需要先切新版。
② Shopify 取参数：Settings → Customer accounts → Login services → Sign in with Google 这页会列出 9 条 URL（3 条 JS origins + 3 条 redirect URIs + 3 条 deauthorize callbacks）和两个空格子 Client ID / Secret。页面先不要关。
③ Google Cloud 建 OAuth 应用：去 console.cloud.google.com → 建项目 → 配 OAuth consent screen（User Type 必选 External，最后必须点 Publish App）→ 创建 OAuth Client ID（Application type = Web application，把 Shopify 给的 6 条 URL 粘进 origins 和 redirect URIs，第三组 deauthorize 在 Google 这边没有对应字段直接忽略）→ 拿到 Client ID 和 Client Secret。
④ 回填启用：把两个值粘回 Shopify → 开关 Off → On → Save → 用隐身窗口访问 account 子域验证 “Continue with Google” 按钮出现且能登录。


常见踩坑：忘点 Publish App / redirect URI 没粘全 / 用普通窗口测试有缓存 / 把 deauthorize URL 错填到 Google 的 redirect 框里。


现在，请问我在第几步？

手把手步骤

默认收起，按需展开。喜欢看文字的人按这里走；喜欢被 AI 牵着走的人复制上面那段 Prompt 就行。

① 前置检查：确认账号系统是新版

Shopify 在 2024 年把客户账号系统升级成了 New Customer Accounts（新版），原生支持 Google 和 Apple 登录。老版本（Classic）不支持。

进 Shopify 后台 → Settings → Customer accounts。

  • 看到 Login services 子菜单，里面有 Google 和 Apple 选项 = 新版 ✓
  • 没看到 = 旧版，先在同一页把账号系统切到新版
② 在 Shopify 后台取出参数

后台路径：Settings → Customer accounts → Login services → Sign in with Google

打开后页面会列出 9 条 URL：

  • Authorized JavaScript origins（3 条）
  • Authorized redirect URIs（3 条）
  • Deauthorize callback URIs（3 条）

先不要关这个页面，等下要把 URL 一条条粘到 Google Cloud Console。

页面最下方有 Client ID / Client Secret 两个空格子，留空，从 Google 拿。

③ 在 Google Cloud Console 建 OAuth 应用

打开 console.cloud.google.com。

Step 1 · 建项目 顶部下拉 → New Project → 项目名随便起 → Create。

顶部可能会出现”Free trial $300 credit”横幅。OAuth 登录是免费功能，不消耗 credit、trial 到期不影响。Activate 按钮不用点。

Step 2 · 配 OAuth 同意屏幕 左侧 APIs & Services → OAuth consent screen（新版叫 Google Auth Platform）。

  • User Type 选 External
  • App name = 店铺名；Support email + Developer contact = 你的邮箱
  • Authorized domains 加店域名 + shopify.com
  • 走完最后一步回主页 → 必须点 Publish App

不点 Publish 的后果：只有手动加的”测试用户”能登录，普通访客一律被拒。基础登录 scope 不会触发 Google 审核，放心 Publish。

Step 3 · 建 OAuth Client ID 左侧 Credentials → + Create Credentials → OAuth client ID。

  • Application type: Web application
  • Authorized JavaScript origins 粘 Shopify 那 3 条不带 path 的 URL
  • Authorized redirect URIs 粘 Shopify 那 3 条带 /callback 的 URL
  • Shopify 第三组 Deauthorize callback URIs 在 Google 这边没有对应字段，直接忽略

点 Create → 弹窗显示 Client ID 和 Client Secret。Secret 只显示一次，复制下来。

④ 回 Shopify 粘贴并启用，然后验证

把 Client ID 和 Client Secret 粘到 Shopify 那个还开着的页面底部，页面右上角开关 Off → On，Save。

验证一定要开隐身窗口，普通窗口的缓存会让你误判。

访问 https://account.<你的域名>/，登录页应该多出 Continue with Google 按钮。点一下：

  • 跳到 Google 选号 → 选号 → 跳回店铺自动登录 ✓
  • 报 redirect_uri_mismatch = Google 那边的 redirect URI 没全粘，回去补
  • 报 Access blocked: This app's request is invalid = OAuth consent screen 的 Publish App 你没点

几个值得记下来的小坑

  1. 必须 Publish App。testing mode 下只有白名单账号能登录，外人一律被拒，错误信息还很迷惑
  2. redirect URI 三条都要加。myshopify.com 那条最容易漏，漏了会偶发登录失败
  3. 隐身窗口测试。普通窗口的 Google 登录态会让你以为成功了
  4. Google Cloud 赠金跟这功能无关。OAuth 登录免费，trial 到期不影响
  5. 不需要装 App。Shopify App Store 里的 Google 登录插件月费 5–20 美元，原生这块已经够用
顺便聊一下 Apple 登录

同一个页面有 Sign in with Apple。配置流程类似，但需要 Apple Developer Program 账号，99 美元/年。

没有 Apple 开发者账号先不用做。iPhone/Mac 用户也都有 Google 账号，不会因为缺 Apple 登录就放弃下单。

写在最后

“15 分钟、不花钱、不破坏现有体验”，这种小优化独立站日常里能做就做。做完没什么存在感，但只要有客户用到，登录就顺一截。

如果你的店还没开这个功能，今天找 15 分钟把它配掉。

类似这种 Shopify 实战拆解，可以接着读我的另一篇：Shopify 多语言子路径产品页对 Googlebot 的 Fallback 真因诊断。4 小时排查 + Cloudflare Worker 修复全过程。

我每月写 2 篇这种独立站实操文。想看下一篇可以订阅 RSS，或者邮件给 [email protected] 留个地址。

← 回到首页