认证

使用 WorkOS 实现 SSO 和社交登录

使用 WorkOS 实现社交登录

第一步：创建 WorkOS 组织

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

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

第二步：获取 Client ID 和 WORKOS_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`)}

相关资源