认证

使用 LinkedIn 登录

要为您的项目启用 LinkedIn 认证，您需要设置一个 LinkedIn OAuth 应用并将应用凭证添加到 Supabase 仪表板。

概述

为您的应用设置 LinkedIn 登录包含 3 个部分：

访问 LinkedIn 开发者账户

LinkedIn 开发者门户

获取回调 URL

下一步需要一个回调URL，格式如下：https://<项目引用>.supabase.co/auth/v1/callback

  • 前往您的 Supabase项目仪表板
  • 点击左侧边栏中的 “身份验证” 图标
  • 在 “配置” 部分下点击 “提供商”
  • 从手风琴列表中点击 LinkedIn 展开，您将找到 回调URL，您可以点击 “复制” 将其复制到剪贴板

创建 LinkedIn OAuth 应用

  • 前往 LinkedIn 开发者仪表板
  • 点击右上角的 Create App
  • 输入您的 LinkedIn 页面 和 应用 Logo
  • 保存应用
  • 从顶部菜单点击 Products
  • 找到 Sign In with LinkedIn using OpenID Connect 并点击 Request Access
  • 从顶部菜单点击 Auth
  • 将您的 Redirect URL 添加到 Authorized Redirect URLs for your app 部分
  • 复制并保存新生成的 Client ID
  • 复制并保存新生成的 Client Secret

确保在 Auth 页面底部的 OAuth 2.0 Scopes 部分添加了适当的权限范围。

必需的 OAuth 2.0 权限范围

将 LinkedIn (OIDC) 凭证输入到 Supabase 项目

  • 前往您的 Supabase项目仪表板
  • 在左侧边栏中，点击 “身份验证” 图标（靠近顶部）
  • 在 “配置” 部分下，点击“提供商”
  • 从手风琴列表中点击 LinkedIn (OIDC) 展开，并将 LinkedIn (OIDC) 已启用 切换为 “开”
  • 输入您在上一步中保存的 LinkedIn (OIDC) 客户端ID 和 LinkedIn (OIDC) 客户端密钥
  • 点击 “保存”

将登录代码添加到客户端应用

当用户登录时，调用 signInWithOAuth() 并将 linkedin_oidc 作为 provider 参数：

1
2
3
4
5
async function () {  const { ,  } = await ..({    : 'linkedin_oidc',  })}

以 PKCE 流程为例，比如在服务器端身份验证中，您需要额外的步骤来处理代码交换。调用 signInWithOAuth 时，提供一个指向回调路由的 redirectTo URL。此重定向 URL 应添加到您的重定向允许列表中。

在浏览器中，signInWithOAuth 会自动重定向到 OAuth 提供商的身份验证端点，然后再重定向到您的端点。

1
2
3
4
5
6
await ..({  ,  : {    : `http://example.com/auth/callback`,  },})

在回调端点，处理代码交换以保存用户会话。

在 app/auth/callback/route.ts 创建一个新文件，并填充以下内容：

app/auth/callback/route.ts
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
34
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`)}

当用户登出时，调用 signOut() 从浏览器会话和localStorage中移除用户信息：

1
2
3
async function () {  const {  } = await ..()}

LinkedIn Open ID Connect (OIDC) 集成

我们将用新的 LinkedIn (OIDC) 提供商替换原有的 LinkedIn 提供商，以支持 LinkedIn OAuth APIs 的最新变更。新提供商采用 Open ID Connect 标准。鉴于这一变更，我们已禁用对原有 LinkedIn 提供商的编辑功能，并将于 2024 年 1 月 4 日正式移除该提供商。

在 2023 年 8 月 1 日前创建 LinkedIn OAuth 应用的开发者，应按照上述步骤创建新的 OAuth 应用，并将凭证从原有的 LinkedIn 提供商迁移至 LinkedIn (OIDC) 提供商。您也可以前往 Products 板块，为现有 OAuth 应用添加新发布的 Sign In with LinkedIn using OpenID Connect 功能。

使用 Supabase CLI 测试 LinkedIn OAuth 应用的开发者，还需更新 config.toml 文件以使用新提供商：

1
2
3
4
[auth.external.linkedin_oidc]enabled = trueclient_id = ...secret = ...

如对此变更有任何疑问，请联系支持团队。

相关资源