如何为网站配置Google OAuth登陆

https://console.cloud.google.com/
注意要点击红框中的“Select a project”，这样才能出现“New project”的按钮

在弹出的选择框里选择“New project”

设置project名字，Location可以不设置，也可以新建一个organization

进入OAuth设置页面

• 在“OAuth 2.0 Client IDs”中创建一个“Web application”类型的客户端 ID

• 填写以下两个关键配置：

1. Authorized JavaScript origins

• 这是前端运行的网页域名（含协议）

• 用于前端的 JS SDK 安全校验

开发阶段填写：

http://localhost:3000

如果你后续部署到生产环境，比如 https://example.com，这里也要加上（点击 Add URI）：

https://example.com

2. Authorized redirect URIs

• 是你请求登录后，Google 登录完成会跳转回你网站的地址

• 这个地址会带上参数（比如 code 或 id_token）

• 通常是你网站前端或后端处理登录回调的路由

开发阶段示例：

假设你用的是前端库（比如 react-google-login）并设置了回调路径 /auth/callback：

http://localhost:3000/auth/callback

如果你是用后端（如 Node.js/Express）处理登录，也填后端监听的 URI，比如：

http://localhost:3000/api/auth/google/callback

⚠️ 注意：必须和你实际跳转的回调路径一模一样

设置完毕后，点击Create，会产生对应的Client ID，详见下图

获取凭据

创建后你会得到：

- Client ID (类似: 123456789-abc123def456.apps.googleusercontent.com)

- Client Secret (类似: GOCSPX-abc123def456ghi789)

如果找不到，也可以从Clients的菜单进入重新获取

获取Client secret：

更新环境变量

将Client ID和Client secret更新到环境变量里（.env.local）文件

# Google Auth

AUTH_GOOGLE_ID="你的实际Client ID"

AUTH_GOOGLE_SECRET="你的实际Client Secret"

NEXT_PUBLIC_AUTH_GOOGLE_ID="你的实际Client ID"

NEXT_PUBLIC_AUTH_GOOGLE_ENABLED="true"

NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED="false"

这样就可以进行调试了。

要上线的时候，将对应的url换成线上网站的url即可。