# OAuth 登录配置教程：Google 和 GitHub | Creght AI 文档

> OAuth 可以让访客使用已有的 Google 或 GitHub 账号登录你的 Creght 网站。这里的用户属于你当前网站的项目 Auth 系统，不是 Creght 编辑器成员。…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help)

[更新历史](/blogs)

[AI](/docs/ai/quick-create-first-website) [可视化](/docs/get-start)

开始使用

- [5 分钟快速创建第一个网站](/docs/ai/quick-create-first-website)
- [AI 创建网站指南](/docs/ai/ai-create-website-guide)
- [直接编辑：不消耗积分的内容修改](/docs/ai/ai-edit-content-guide)
- [使用 Pick，把其他模板的板块用到自己的网站](/docs/ai/pick-element-in-tpl)
- [Prompt 库](/docs/ai/prompt-lib)
- [AI 积分说明](/docs/ai/ai-credits-guide)
- [Creght Skill](/docs/ai/creght-skill)

后端

- [让网站支持登录、预约、密码页面等功能](/docs/ai/backend-database-guide)
- [OAuth 登录配置教程：Google 和 GitHub](/docs/ai/backend-auth-guide)

网站设置

- [多语言网站设置教程](/docs/ai/localization)
- [域名绑定教程](/docs/ai/custom-domain)
- [阿里云购买域名教程（新手版）](/docs/ai/aliyun-domain-registration-guide)
- [重定向设置教程](/docs/ai/redirects)
- [页面不存在时：该用重定向还是 404？](/docs/ai/redirect-or-404)
- [Facebook Pixel（Meta Pixel）接入教程](/docs/ai/facebook-meta-pixel)

高级用法

- [为不同域名配置不同默认语言](/docs/ai/domain-locale-routing)

后端/

# 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}`**。

例如：

```plain-text
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 ID** 和 **Client Secret**。

### 2\. 在 Creght 填写 Google Provider

| Creght 字段 | 填写内容 |
| --- | --- |
| Provider Key | `google` |
| Display Name | `Google` |
| Client ID | Google Cloud 里的 Client ID |
| Client Secret | Google Cloud 里的 Client Secret |
| Redirect URL | 和 Google Cloud 中 Authorized redirect URIs 完全一致，例如 `https://your-domain.com/auth/oauth/callback/google` |
| Issuer | `https://accounts.google.com` |
| Scopes | `openid,profile,email` |
| Authorization URL | `https://accounts.google.com/o/oauth2/v2/auth` |
| Token URL | `https://oauth2.googleapis.com/token` |
| UserInfo URL | `https://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 Key | `github` |
| Display Name | `GitHub` |
| Client ID | GitHub OAuth App 的 Client ID |
| Client Secret | GitHub OAuth App 的 Client Secret |
| Redirect URL | 和 GitHub OAuth App 中 Authorization callback URL 完全一致，例如 `https://your-domain.com/auth/oauth/callback/github` |
| Issuer | `https://github.com` |
| Scopes | `read:user,user:email` |
| Authorization URL | `https://github.com/login/oauth/authorize` |
| Token URL | `https://github.com/login/oauth/access_token` |
| UserInfo URL | `https://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。

## 参考资料

- [Google OAuth 2.0 for web server applications](https://developers.google.com/identity/protocols/oauth2/web-server)
- [Google OpenID Connect redirect URI guide](https://developers.google.com/identity/openid-connect/openid-connect)
- [GitHub Docs: Creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)

本文目录

- [开始前准备](#开始前准备)
- [找到 Creght 回调地址](#找到-creght-回调地址)
- [配置 Google 登录](#配置-google-登录)
- [1\. 在 Google 创建 OAuth Client](#1-在-google-创建-oauth-client)
- [2\. 在 Creght 填写 Google Provider](#2-在-creght-填写-google-provider)
- [配置 GitHub 登录](#配置-github-登录)
- [1\. 在 GitHub 创建 OAuth App](#1-在-github-创建-oauth-app)
- [2\. 在 Creght 填写 GitHub Provider](#2-在-creght-填写-github-provider)
- [让 AI 添加登录入口](#让-ai-添加登录入口)
- [测试流程](#测试流程)
- [常见问题](#常见问题)
- [安全建议](#安全建议)
- [参考资料](#参考资料)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![用户交流群](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

用户交流群

## 链接

- [价格](/price)
- [帮助中心](/help)
- [联系我们](/contact)
- [博客](/blogs)
- [退款说明](/tuikuan)

## 资源

- [全部资源](/resources)
- [模板](/templates)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/effects)
- [Figma to Creght](/figma2creght)
- [AI 编程指南](/api)

## 产品对比

- [对比上线了](/creght-vs-sxl)
- [对比凡科建站](/creght-vs-fkw)

## 协议

- [用户协议](/legal/terms)
- [隐私政策](/legal/privacy)
- [可接受使用政策](/legal/acceptable-use)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)