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