OAuth 设置

🌐 OAuth Setup

允许用户使用他们喜欢的社交账号登录，如 GitHub、Google 等。

🌐 Enable users to sign in with their favorite social accounts like GitHub, Google, and more.

什么是 OAuth？

🌐 What is OAuth?

OAuth 允许用户使用他们已有的账户（如 GitHub 或 Google）登录，而无需创建新密码。这既更快速也更安全。

🌐 OAuth lets users log in using accounts they already have (like GitHub or Google) instead of creating new passwords. It's faster and more secure.

GitHub OAuth 设置

🌐 GitHub OAuth Setup

有关详细说明，请参阅 Supabase GitHub OAuth 文档。

1. 创建 GitHub OAuth 应用

🌐 1. Create GitHub OAuth App

前往 GitHub 开发者设置
点击 “新建 OAuth 应用”
填写详细信息：
- 应用名称: Your Onlook App
- 主页网址：http://localhost:3000（或你的生产域名）
- 授权回调 URL:
  - 本地开发: http://localhost:54321/auth/v1/callback
  - 生产：https://your-production-domain/auth/v1/callback
点击 "注册应用"
复制你的 客户端 ID 和 客户端密钥

2. 配置 Supabase

🌐 2. Configure Supabase

打开你的 Supabase 控制台
前往 身份验证 → 提供商
找到 GitHub 并点击启用
粘贴你的：
- 客户ID
- 客户端密钥
点击保存

3. 更新你的应用

🌐 3. Update Your App

将 GitHub 提供程序添加到你的登录页面：

🌐 Add the GitHub provider to your login page:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(supabaseUrl, supabaseKey)

// Add GitHub login button
const signInWithGitHub = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github'
  })
  if (error) console.error('Error:', error)
}

Google OAuth 设置

🌐 Google OAuth Setup

有关详细说明，请参阅 Supabase Google OAuth 文档。

1. 创建 Google OAuth 应用

🌐 1. Create Google OAuth App

前往 Google Cloud 控制台
创建新项目或选择已有项目
转到 API 和服务 → 凭据
点击 “创建凭据” → “OAuth 客户端 ID”
选择 "Web 应用"
添加授权的重定向 URI：
- 本地开发: http://localhost:54321/auth/v1/callback
- 生产：https://your-production-domain/auth/v1/callback
复制你的 客户端 ID 和 客户端密钥

2. 配置 Supabase

🌐 2. Configure Supabase

在 Supabase 仪表板中，进入 身份验证 → 提供商
找到 Google 并点击启用
粘贴你的客户端 ID和客户端密钥
点击保存

3. 添加到你的应用

🌐 3. Add to Your App

const signInWithGoogle = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google'
  })
  if (error) console.error('Error:', error)
}

其他提供商

🌐 Other Providers

Supabase 支持多种 OAuth 提供商。有关所有提供商的完整设置说明，请参阅 Supabase 社交登录文档。

🌐 Supabase supports many OAuth providers. For comprehensive setup instructions for all providers, see the Supabase Social Login documentation.

常见的提供商包括：

🌐 Popular providers include:

Discord：在 Discord 开发者门户按照类似步骤操作
Twitter：在 Twitter 开发者门户设置
Facebook：在 Facebook Developers 配置
苹果：在 Apple Developer 设置

注意：对于每个提供商，请记得同时添加本地 (http://localhost:54321/auth/v1/callback) 和生产 (https://your-production-domain/auth/v1/callback) 重定向 URI，以避免 redirect_uri_mismatch 错误。

重要提示

🌐 Important Notes

环境变量

🌐 Environment Variables

确保你的 .env.local 拥有：

🌐 Make sure your .env.local has:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

测试

🌐 Testing

启动你的 Onlook 应用
点击 OAuth 登录按钮
你将被重定向到提供商（GitHub/Google）
授权后，你将被重定向回你的应用
检查用户是否已登录

故障排除

🌐 Troubleshooting

“无效的重定向 URI”

在 OAuth 应用设置中仔细检查你的回调 URL
确保完全匹配：http://localhost:54321/auth/v1/callback

“未找到客户端 ID”

请核实你是否正确复制了客户端ID和客户端密钥
检查在 Supabase 中是否启用了 OAuth 提供程序

“访问被拒绝”

确保你的 OAuth 应用是公开的（不是开发模式）
对于 GitHub：检查用户是否有权限访问你的组织（如果适用）

下一步

🌐 Next Steps

一旦 OAuth 正常工作：

🌐 Once OAuth is working:

自定义登录界面
添加用户资料信息
设置基于角色的访问权限
配置电子邮件通知

就是这样！你的用户现在可以使用他们的社交账号登录了。🎉

🌐 That's it! Your users can now sign in with their social accounts. 🎉

On this page