首页 » 未分类 » 出海建站必备：一次搞懂 Google 登录 2 种接入方式，One Tap 只要 1 步

出海建站必备：一次搞懂 Google 登录 2 种接入方式，One Tap 只要 1 步

2026年1月26日 60点热度 0人点赞 0条评论

给网站接入 Google 登录是出海产品的标配。这篇文章整理了完整的接入流程，包括基础的 OAuth 跳转登录，以及体验更好的 One Tap 一键登录。建议大家收藏转发实操起来，做好网站基建部分。

两种登录方式的区别

在开始配置之前，先了解一下 Supabase 支持的两种 Google 登录方式。

第一种是传统的 OAuth 跳转登录，用户点击登录按钮后，会跳转到 Google 的授权页面，选择账号确认后再跳回你的网站。

整个流程需要 4 步：点按钮、跳转 Google、点确认、跳回网站。这种方式配置简单，兼容性好，流程还是相对麻烦了一些（因为有更方便的方式做对比）。

在我们出海圈里的朋友应该都熟悉这套流程了，文档着重介绍了这部分。

第二种是 Google One Tap 登录，用户不需要离开页面，右上角会弹出一个小卡片，点一下头像就完成登录。

只需要 1 步操作，转化率明显更高。

两种主要在前端调用方式。建议先把基础的 OAuth 配置跑通，再叠加 One Tap 功能。

第一步：Google Cloud 控制台配置

Google Cloud 里需要完成两件事：先登记应用信息，再创建客户端凭证。

1.1 配置 OAuth 权限请求页面（登记应用信息）

进入 Google Cloud Console，点击左上角的导航菜单（三条横线），找到"API 和服务"，点击展开后选择"OAuth 权限请求页面"。

这一步只需要配置一次。

如果你之前已经配置过，进入页面会直接显示已有的配置信息，可以跳过这一步，直接去 1.2 创建客户端 ID。

如果是第一次配置，会进入配置向导。User Type 选择外部，填写应用名称和用户支持邮箱。

开发者联系信息填你自己的邮箱，然后一路点击保存并继续。

1.2 创建 OAuth 客户端 ID（获取凭证）

点击左侧菜单的凭证，然后点击顶部的+ 创建凭据，选择 OAuth 客户端 ID。

应用类型选择 Web 应用，名称随便填，比如 Supabase Auth。

先不要点创建，因为还需要填写回调地址，这个地址要从 Supabase 那边获取。

第二步：Supabase 控制台配置

打开 Supabase 仪表盘，进入你的项目，点击左侧栏的 Authentication，然后点击 sign in / Providers 。在列表里面找到 Google 并开启。

这时候你会看到两个需要填写的框：Client ID 和 Client Secret，这两个值稍后从 Google 那边获取。

先看页面下方有一个回调地址，格式是 https://[your-project-id].supabase.co/auth/v1/callback，把这个 URL 复制下来。

第三步：完成双向绑定

回到 Google Cloud 刚才的凭据创建页面。在"已获授权的重定向 URI"下方，点击"添加 URI"，粘贴刚才从 Supabase 复制的回调地址。

然后点击"创建"，弹窗会显示你的 Client ID 和 Client Secret。

把这两个值复制并粘贴回 Supabase 的 Google 配置框中，点击 Save。到这里，基础的 OAuth 跳转登录就搞定了。

这套配置的核心逻辑可以理解为三件事：登记应用信息解决信任问题，创建凭证解决身份问题，互填回调地址解决安全回路问题。

确保用户在 Google 登录完后，能准确、安全地回到你的网站。

第四步：接入 One Tap 一键登录

基础配置跑通后，可以叠加 One Tap 功能来提升转化率，到这里就简单了。

回到在 Google 凭据页面补充配置。找到刚才创建的 Web 类型 OAuth 客户端 ID，在"已获授权的 JavaScript 来源"里面，填入你前端的完整域名。比如 https://yourdomain.com 和 http://localhost:3000。

注意 One Tap 只支持 HTTPS 环境，本地 localhost 除外。

然后在 Supabase 后台检查配置。初期建议勾选上"Skip nonce checks"（跳过随机数检查），能避开大部分登录报错。

等流程跑通后，生产环境可以根据实际安全需求决定是否开启。

前端代码需要引入 Google Identity Services SDK 并初始化（这一步交给AI完成），需要提供给它客户端ID。

// 页面加载后执行
window.google.accounts.id.initialize({
  client_id: "你的客户端ID.apps.googleusercontent.com",
  callback: handleOneTapResponse,
  auto_select: true // 如果用户只有一个 Google 账号，可以实现真正的一键登录
});

// 唤起右上角的弹窗
window.google.accounts.id.prompt();