认证

使用 WorkOS 实现 SSO 和社交登录


使用 WorkOS 实现社交登录

第一步:创建 WorkOS 组织

登录 WorkOS 仪表板,访问 Organizations 标签页创建组织。 创建组织

或者,您也可以通过 WorkOS API 创建组织

第二步:获取 Client IDWORKOS_API_KEY

获取环境变量中的 Client ID 和 Secret

访问 WorkOS 仪表板的入门页面。从 Quickstart 面板复制以下值:

  • WORKOS_CLIENT_ID
  • WORKOS_API_KEY

第三步:将 WorkOS 凭证添加到 Supabase 项目

在 Supabase 应用的身份验证提供商设置面板中输入 WorkOS 应用详情

  1. 进入 Supabase 项目仪表板
  2. 在左侧边栏点击 Authentication 图标(靠近顶部)
  3. 点击 Configuration 部分下的 Providers
  4. 从折叠列表中点击 WorkOS 展开
  5. WorkOS Enabled 开关切换为 ON
  6. 在 WorkOS URL 字段输入 https://api.workos.com
  7. 输入上一步保存的 WorkOS Client ID 和 WorkOS Client Secret
  8. 复制表单中的 Callback URL (for OAuth) 值并妥善保存
  9. 点击 Save 保存

第四步:在 WorkOS 仪表板中设置 Supabase 重定向 URI

访问 WorkOS 仪表板,点击左侧导航面板中的 redirects 按钮。

在重定向页面,输入您在上一步保存的 Supabase 项目的 Callback URL (for OAuth),如下图所示:

在 WorkOS 仪表板中设置 Supabase 项目重定向 URL

步骤 5. 在客户端应用中添加登录代码

当用户登录时,调用 signInWithOAuth 方法并指定 workos 作为身份提供商(provider)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function () { const { , } = await ..({ : 'workos', : { : 'http://example.com/auth/v1/callback', // 确保您的重定向URL已在Supabase仪表板Auth设置中配置 : { : '<connection_id>', }, }, }) if (.) { (.) // 使用您的服务器或框架的重定向API }}

在您指定的回调URL中,将授权码(code)交换为已登录的用户资料:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { NextResponse } from 'next/server'import { createClient } from '@/utils/supabase/server'export async function GET(request: Request) { const { searchParams, origin } = new URL(request.url) const code = searchParams.get('code') // 如果参数中包含"next",则将其用作重定向URL let next = searchParams.get('next') ?? '/' if (!next.startsWith('/')) { // 如果"next"不是相对URL,则使用默认值 next = '/' } if (code) { const supabase = await createClient() const { error } = await supabase.auth.exchangeCodeForSession(code) if (!error) { const forwardedHost = request.headers.get('x-forwarded-host') // 负载均衡器前的原始来源 const isLocalEnv = process.env.NODE_ENV === 'development' if (isLocalEnv) { // 开发环境中可以确定没有负载均衡器,因此无需关注X-Forwarded-Host return NextResponse.redirect(`${origin}${next}`) } else if (forwardedHost) { return NextResponse.redirect(`https://${forwardedHost}${next}`) } else { return NextResponse.redirect(`${origin}${next}`) } } } // 将用户重定向至错误页面并显示说明 return NextResponse.redirect(`${origin}/auth/auth-code-error`)}

相关资源