后端 /

OAuth 登录配置教程:Google 和 GitHub

OAuth 可以让访客使用已有的 Google 或 GitHub 账号登录你的 Creght 网站。这里的用户属于你当前网站的项目 Auth 系统,不是 Creght 编辑器成员。你可以基于这些用户继续做会员中心、私密页面、预约、下载、客户门户等功能。

本教程会从完整流程讲起:先在 Google 或 GitHub 创建 OAuth 应用,再把 Client ID、Client Secret 和回调地址填入 Creght,最后让 AI 在页面中生成登录入口。

开始前准备

  • 你的网站需要有一个正在使用的 HTTPS 域名,可以是预览域名,也可以是正式自定义域名。
  • 你需要能进入 Creght 编辑器里的 Backend / Auth / OAuth Providers
  • 你需要有权限在 Google Cloud Console 或 GitHub Developer Settings 中创建 OAuth 应用。

找到 Creght 回调地址

Creght 的 OAuth 回调地址格式很简单:你自己正在使用的网址地址 + /auth/oauth/callback/{provider}

例如:

https://your-domain.com/auth/oauth/callback/google
https://your-domain.com/auth/oauth/callback/github

请确保这里填入的网址就是用户当前访问和使用的网站域名。如果你正在使用 https://www.example.com,就不要填预览域名;如果你正在用预览域名测试,就填预览域名。

重要:如果之后更换了网站域名,必须回到 Google、GitHub 等第三方后台,把 OAuth 回调地址改成新的正在使用的域名,否则第三方登录会因为回调地址不匹配而失败。

配置 Google 登录

1. 在 Google 创建 OAuth Client

  1. 打开 Google Cloud Console,并选择对应项目。
  2. 先配置 OAuth consent screen,填写应用名称、支持邮箱;如果应用还在测试阶段,添加测试用户。
  3. 进入 APIs & Services / Credentials,创建 OAuth client。
  4. 应用类型选择 Web application
  5. 在 Authorized JavaScript origins 中添加网站来源,例如 https://your-domain.com
  6. 在 Authorized redirect URIs 中添加 Google 回调地址,例如 https://your-domain.com/auth/oauth/callback/google
  7. 创建后复制 Client IDClient Secret

2. 在 Creght 填写 Google Provider

Creght 字段填写内容
Provider Keygoogle
Display NameGoogle
Client IDGoogle Cloud 里的 Client ID
Client SecretGoogle Cloud 里的 Client Secret
Redirect URL和 Google Cloud 中 Authorized redirect URIs 完全一致,例如 https://your-domain.com/auth/oauth/callback/google
Issuerhttps://accounts.google.com
Scopesopenid,profile,email
Authorization URLhttps://accounts.google.com/o/oauth2/v2/auth
Token URLhttps://oauth2.googleapis.com/token
UserInfo URLhttps://openidconnect.googleapis.com/v1/userinfo
Status启用

配置 GitHub 登录

1. 在 GitHub 创建 OAuth App

  1. 打开 GitHub,进入 Settings / Developer settings / OAuth Apps
  2. 点击 New OAuth App
  3. Application name 填写网站或品牌名称。
  4. Homepage URL 填写你的网站域名,例如 https://your-domain.com
  5. Authorization callback URL 填写 GitHub 回调地址,例如 https://your-domain.com/auth/oauth/callback/github
  6. 注册后复制 Client ID,并生成 Client Secret

2. 在 Creght 填写 GitHub Provider

Creght 字段填写内容
Provider Keygithub
Display NameGitHub
Client IDGitHub OAuth App 的 Client ID
Client SecretGitHub OAuth App 的 Client Secret
Redirect URL和 GitHub OAuth App 中 Authorization callback URL 完全一致,例如 https://your-domain.com/auth/oauth/callback/github
Issuerhttps://github.com
Scopesread:user,user:email
Authorization URLhttps://github.com/login/oauth/authorize
Token URLhttps://github.com/login/oauth/access_token
UserInfo URLhttps://api.github.com/user
Status启用

让 AI 添加登录入口

Provider 启用后,就可以让 Creght AI 在网站里添加登录页面、登录按钮或会员中心。可以直接这样描述:

  • 添加一个登录页面,包含 Google 和 GitHub 登录按钮。
  • 添加一个会员中心。未登录访客看到所有已启用 OAuth 提供商的登录按钮;已登录用户看到头像、姓名、邮箱和退出按钮。
  • 让预约表单必须登录后才能使用。如果访客还没有登录,先显示登录提示。

测试流程

  1. 使用和回调地址一致的域名打开网站。
  2. 用无痕窗口打开登录页。
  3. 点击 Google 或 GitHub,并完成授权。
  4. 确认第三方平台能正常跳回你网站的 /auth/oauth/callback/{provider} 地址,没有出现 redirect_uri_mismatch
  5. 回到 Creght 的 Backend / Auth / Users,确认已生成新的项目用户。

常见问题

问题检查方式
redirect_uri_mismatch逐字检查 Google/GitHub 里的回调地址是否和 Creght Provider 的 Redirect URL 完全一致,包括 HTTPS、域名、路径和结尾斜杠。
登录页没有显示 Provider确认 Provider 状态是启用,并让 AI 读取已启用的 Auth Providers,而不是手写固定按钮。
更换域名后无法登录到 Google/GitHub 后台把回调地址改成新域名下的 /auth/oauth/callback/{provider},并同步更新 Creght Provider 的 Redirect URL。
GitHub 预览域名可用,正式域名不可用GitHub OAuth App 只能配置一个回调地址,需要为当前正在使用的域名单独创建或修改 OAuth App。
Google 只有自己的账号能登录检查 OAuth consent screen 的发布状态和测试用户设置。

安全建议

  • 不要把 Client Secret 粘贴到页面代码、公开文档或 AI 对话里,只放在 OAuth Provider 设置中。
  • OAuth 回调地址使用 HTTPS 域名。
  • Scopes 保持最小化。登录场景下,Google 通常只需要 openid,profile,email,GitHub 通常只需要 read:user,user:email
  • 如果 Client Secret 暴露,立即在 Google 或 GitHub 中重新生成,并更新 Creght Provider。

参考资料

Render diagnostics