用AI建站接第三方登录（OAuth）会不会有坑？

学完这篇，你能判断哪些坑是 AI 建站工具自带的、哪些是你配置漏了，并按步骤把 Google、GitHub 这类第三方登录稳稳接上。

用 AI 建站（v0、Lovable、Bolt、Cursor 都算）接 OAuth，代码本身几乎不用你写，坑基本都出在「AI 看不到的地方」——服务商后台的白名单、部署平台的环境变量、回调地址的域名。下面按顺序走一遍。

第一步：先确认工具能不能配环境变量和回调地址

这一步要确认你的 AI 建站工具是「只能生成前端页面」还是「能部署完整应用」，结果决定了后面能不能接 OAuth。

打开你的工具，找有没有 Settings（设置）里的 Environment Variables（环境变量）入口，以及能不能自定义域名。像 v0 生成的项目部署到 Vercel 后，是在 Vercel 后台配置；Lovable 内置 Supabase，则是在 Supabase 控制台配。

注意：如果工具只能导出一个静态 HTML 站，没有服务端，那就接不了标准 OAuth。OAuth 换 token 必须走服务端，Client Secret 不能放在前端代码里。

第二步：在登录服务商后台建应用，拿 Client ID 和 Secret

这一步做完你能拿到一串 Client ID 和一个 Client Secret，它们是后面所有配置的钥匙。

Google 登录：打开 console.cloud.google.com，顶部项目选择器新建一个项目，左侧菜单进入「API 和服务 → OAuth 同意屏幕」，用户类型选「外部」，填应用名称和支持邮箱后保存。再进「API 和服务 → 凭据 → 创建凭据 → OAuth 客户端 ID」，应用类型选「Web 应用」，在「已获授权的重定向 URI」里填回调地址。

GitHub 登录：登录 github.com，右上角头像 → Settings → 左侧拉到最底 Developer settings → OAuth Apps → New OAuth App，Homepage URL 填你的站点地址，Authorization callback URL 填回调地址。

回调地址填什么，取决于你的架构：

• 直接用 NextAuth/Auth.js：https://你的域名/api/auth/callback/google
• 走 Supabase Auth：https://<项目ref>.supabase.co/auth/v1/callback

注意：Google 的重定向 URI 必须逐字符完全匹配，包括 https、结尾有没有斜杠、端口号。少一个斜杠就是 400 redirect_uri_mismatch。

第三步：把密钥写进部署平台的环境变量

这一步把 Client ID 和 Secret 放进服务端能读到的地方，而不是丢进 AI 对话框。

在 Vercel 里：进入你的 Project → 顶部 Settings → 左侧 Environment Variables → 添加键值对，填 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET，环境勾选 Production / Preview / Development 全部。保存后必须回到 Deployments 页，点最新那条右侧的「⋯」→ Redeploy，变量才会生效。

如果本地也要跑，在项目根目录建 .env.local，把同样的键写进去。确认 .gitignore 里有 .env*.local 这一行。

注意：别为了图省事把 Secret 贴进和 AI 的聊天窗口。部分工具会用你的对话内容做训练或日志。一旦怀疑泄露，立刻回服务商后台删掉旧凭据重新生成。

第四步：让 AI 写代码，提示词要写死技术栈和路径

这一步让 AI 生成登录代码，结果是你能跑通一次完整的登录跳转。

提示词别只说「加个 Google 登录」，要写成：「这是 Next.js 14 App Router 项目，用 Auth.js v5（next-auth@beta）接 Google OAuth，回调路径保持默认，环境变量名叫 GOOGLE_CLIENT_ID 和 GOOGLE_CLIENT_SECRET，登录按钮放在首页右上角，未登录显示『登录』，已登录显示头像和退出。」

注意：AI 很容易按旧版 NextAuth v3/v4 的写法生成代码，比如 import NextAuth from "next-auth" 配 pages/api/auth/[...nextauth].ts，这在新版跑不起来。发现报错就把版本号明确告诉它。

第五步：本地和线上对不上怎么办

这一步解决最常见的一类问题——本地点完能登录，部署上去就白屏或报错。

根因是回调地址变了。本地是 http://localhost:3000/api/auth/callback/google，线上是 https://你的域名/...。解决办法是在服务商后台把两个都加上，Google 的重定向 URI 列表可以填多条。

如果线上报 NEXTAUTH_URL 相关错误，去 Vercel 环境变量加一条 NEXTAUTH_URL = https://你的域名（Auth.js v5 用 AUTH_URL），加完再 Redeploy 一次。

注意：微信登录是另一个量级的坑，要求域名已备案、必须 HTTPS，且不接受 localhost。想用微信登录，先确认你有备案域名再动手，否则本地根本测不了。

第六步：验证和排错

这一步跑一次完整流程，确认没问题。

打开无痕窗口访问线上站点，点登录，选账号，看是否回到站点且右上角显示头像。出问题按这个顺序查：浏览器地址栏里的 error= 参数 → Vercel 项目 Deployments → 某次部署 → Runtime Logs → Supabase 的话在 Dashboard 的 Authentication → Users 里看有没有新用户记录。

小结

• OAuth 代码 AI 能写，坑在后台配置：重定向 URI 必须逐字符匹配。
• Client Secret 只放环境变量，不进前端代码、不进 AI 对话框。
• 本地和线上的回调地址要同时加进服务商白名单。
• 改完环境变量一定要重新 Redeploy，否则不生效。
• 微信登录需要备案域名 + HTTPS，没有就别先动手。
• 排查顺序：URL 里的 error 参数 → 平台运行日志 → 服务商用户列表。