认证

使用 Facebook 登录

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

概述

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

访问 Facebook 开发者账户

Facebook 开发者门户

创建 Facebook 应用

  • 点击右上角的 My Apps
  • 点击右上角附近的 Create App
  • 选择您的应用类型并点击 Continue
  • 填写应用信息，然后点击 Create App
  • 这将带您进入 Add Products to Your App 界面（或者您可以通过点击左侧边栏的 Add Product 进入该界面）

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

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

为您的 Facebook 应用设置登录功能

在为应用添加产品页面：

  • 点击Facebook登录下方的设置
  • 跳过快速开始页面，在左侧边栏中点击Facebook登录下的设置
  • 在Facebook登录设置页面的有效的OAuth重定向URI中输入您的回调URI
  • 在有效的OAuth重定向URI框中输入以下内容
  • 点击右下角的保存更改

请注意，您需要设置正确的用例权限才能允许第三方应用读取电子邮件地址。操作步骤如下：

在构建您的应用下，点击用例页面。然后执行以下步骤：

  • 点击右侧身份验证和账户创建旁的编辑按钮，此操作将跳转到另一个页面
  • public_profile默认已设置，请确保在跳转页面中该权限和email的状态均为准备测试
  • 如未设置，请点击右侧email旁的添加按钮

复制您的 Facebook 应用ID和密钥

  • 在左侧边栏点击设置/基本
  • 从基本设置页面顶部复制您的应用ID
  • 在应用密钥下点击显示后复制您的密钥
  • 确保此页面所有必填字段均已填写完成

将您的 Facebook 应用ID和密钥输入到 Supabase 项目中

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

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

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

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

以 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 ..()}

现在，您应该能够通过Facebook登录，当用户尝试登录您的应用时会提示您提交登录审核。按照提示操作即可让您的应用上线以获得完整功能和产品。 您可以在这里阅读更多关于应用审核的信息。

资源