跳转到内容
supastack
浏览文档
WebNext.js

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh/docs/web/google-sign-in.md (or send Accept: text/markdown).

添加 Google 登录

创建免费的 Google Cloud OAuth 客户端,并把“使用 Google 继续”接入应用。

询问本指南
打开方式

初学者演练

前提条件:Web 应用在本地运行(5 分钟启动)以及一个已迁移、可存真实账户的数据库(设置数据库)。你需要一个普通的 Google 账户;这里的一切都是免费的,大约需要 10 分钟。

快速术语:OAuth 是一种标准——Google 在 Google 的页面上完成用户登录,并把证明交给你的应用。Google Cloud 项目是 Google 控制台中存放应用凭据的容器。OAuth 同意屏幕是 Google 在把用户送回之前展示的页面。Client ID 用于向 Google 标识你的应用;Client Secret 是它的密码,只留在服务器上。

1. 创建 Google Cloud 项目。2. 配置同意屏幕。3. 创建一个 Web OAuth 客户端并复制其 ID 和 Secret。4. 把三个值粘贴到 apps/web/.env.local 并重启开发服务器。

一个项目足以支撑整个产品:同一个 Google Cloud 项目之后还会托管你的 Cloud Run 部署,移动端登录也经由同一个 Web 后端——你无需为每个平台或功能单独创建客户端。

创建 Google Cloud 项目

1. 打开 console.cloud.google.com 并用你的 Google 账户登录。

2. 点击顶栏中的项目下拉菜单(Google Cloud 徽标旁),选择 New Project。

3. 给它起个名字——产品名即可——然后点击 Create。登录凭据不需要组织、银行卡或结算账户。

预期结果:控制台重新加载到新项目,顶栏显示它的名字。当你进行到部署指南时复用这个项目,而不是再建一个。

创建 OAuth 客户端

1. 打开 APIs & Services → Credentials → + Create Credentials → OAuth client ID。

2. 将 Application type 设为 Web application,并起一个类似 supastack local 的名字。

3. 在 Authorized JavaScript origins 下添加 http://localhost:3000。在 Authorized redirect URIs 下添加 http://localhost:3000/api/auth/callback/google——这个回调路径属于套件默认的认证引擎 Better Auth:{APP_URL}/api/auth/callback/google。

4. 点击 Create,并从对话框中复制 Client ID 和 Client Secret。之后可以在客户端页面重新查看,但现在复制能省一步。

生产环境再创建第二个 Web 客户端(推荐),或在当前客户端上补充:JavaScript origin https://yourdomain.com 和 redirect URI https://yourdomain.com/api/auth/callback/google。每个环境使用独立客户端意味着泄露的本地密钥无法触及生产环境。

把值添加到应用中

打开 apps/web/.env.local——Next.js 读取的是这个文件,而不是根目录的 .env——并设置下面三行。AUTH_GOOGLE_ENABLED=true 打开按钮;客户端凭据对用于标识你的 Google Cloud 客户端。

Client Secret 仅限服务端:它绝不能出现在 NEXT_PUBLIC_ 或 EXPO_PUBLIC_ 变量中,也绝不能提交到 Git。生产环境中,请在托管方的密钥存储中设置同样的三个名称,而不是放在 env 文件里。

编辑后重启开发服务器——环境变更只在启动时读取。

# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret

验证与故障排除

打开 http://localhost:3000/auth,点击 Google 按钮,完成 Google 的同意屏幕,确认回到应用时已处于登录状态。

redirect_uri_mismatch 表示在 Google 中注册的 redirect URI 不完全匹配——检查协议(http 还是 https)、端口和路径:它必须以 /api/auth/callback/google 结尾,而不是 /callback/google/ 或带尾部斜杠的变体。

Access blocked / has not completed the Google verification process 表示同意屏幕仍处于 Testing,而正在登录的账户未列入 Test users——在 Audience 部分中添加它。

如果 Google 按钮缺失,或编辑 .env.local 后登录仍然失败,请重启开发服务器。如果启动失败并报出某个变量名,说明开关已打开但客户端凭据对不完整。

如果你想继续完成设置,可以阅读《添加 GitHub 登录》。

常见问题

14 个问题

supastack 是什么?

supastack 是用于构建 AI 驱动 SaaS 产品的模块化基础。它把通用基础设施整合在一起,让你专注于产品专属的功能。

它支持 Web 和移动端吗?

支持。supastack 包含 Next.js 与 Expo 应用,作为 Web 与移动端体验的起点。

包含哪些认证方式?

Better Auth 覆盖邮箱/密码、OTP 与社交登录。个人工作区随账户一起开通,产品记录从第一天起就有边界。

AI 是如何支持的?

supastack 包含可配置的多供应商 AI、用量追踪、预算,以及加密的自带密钥(BYOK)支持。

订阅如何处理?

对于基于该套件构建的产品,Stripe 计费、订阅与权限构成付费访问的基础。供应商密钥仅存于服务端。

我的产品专属代码放在哪里?

产品专属功能保留在独立的代码库中,产品通过配置接入 supastack 的基础模块。

supastack 如何定价?

套件为一次性购买、终身更新:单框架 249 美元(限时优惠价,较常规价 349 美元优惠 100 美元),或全框架(Next.js、iOS、Android)499 美元(限时优惠价,较常规价 599 美元优惠 100 美元),每个额外开发者席位 75 美元。套件本身没有订阅。本站结账后通过邮件发送许可证密钥,仓库访问通过 GitHub 邀请授予。

工作区如何界定我的数据?

用户记录按 workspaceId 划定边界。身份、权限、AI 用量、计费事件与审计条目都留在个人工作区边界内。

后台任务如何工作?

Trigger.dev 是明确的任务运行时。JobRunner 契约只承诺 enqueue、status 与 cancel——工作流语义保持 Trigger.dev 专有且显式。

邮件与营销触达有何不同?

事务性邮件覆盖产品工作流,如任务完成通知。冷触达与营销活动属于产品自身的范畴,不在本套件的邮件模块内。

移动端购买如何运作?

移动端已支持 RevenueCat 原生购买和恢复购买,访问权限由服务端验证。发布前需配置商店账户并完成设备测试。Web 计费保持独立。

AI 供应商密钥存放在哪里?

自带密钥凭证经过加密且仅存于服务端。密钥在日志中被脱敏;用量与预算在工作区级别保持可见。

结账支持哪些付款方式?

Stripe 托管结账接受银行卡,在 Stripe 账户启用后还可提供支付宝与微信支付——方便中国买家。钱包授权为异步确认,付款完成后许可证页面会立即更新。

我能申请退款吗?

获得代码仓库访问权限后,supastack 将永久归你所有,因此无法退款。但请放心,你将获得包含终身更新的完整源代码,可为你自己或客户构建并发布无限数量的产品。你只需注意不能转卖代码,也不能将仓库作为启动模板二次分发。

CN
主题