使用 Facebook 登录
要为您的项目启用 Facebook 认证,您需要设置一个 Facebook OAuth 应用并将应用凭证添加到 Supabase 仪表板中。
概述
为您的应用程序设置 Facebook 登录包含 3 个部分:
- 在 Facebook 开发者网站上创建并配置 Facebook 应用
- 将您的 Facebook 密钥添加到 Supabase 项目中
- 将登录代码添加到您的 Supabase JS 客户端应用
访问 Facebook 开发者账户
- 访问 developers.facebook.com
- 点击右上角的
Log In
进行登录
创建 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,您可以点击 “复制” 将其复制到剪贴板
要使用Supabase CLI在本地测试OAuth,请参阅 本地开发文档。
为您的 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 客户端密钥
- 点击 “保存”
将登录代码添加到客户端应用
请确保在以下代码中使用正确的 supabase
客户端。
如果您未使用服务器端渲染或基于 cookie 的身份验证,可以直接使用 @supabase/supabase-js
中的 createClient
。如果您正在使用服务器端渲染,请参阅 服务器端身份验证指南,了解创建 Supabase 客户端的说明。
当用户登录时,调用 signInWithOAuth()
并将 provider
参数设为 facebook
:
12345async function () { const { , } = await ..({ : 'facebook', })}
以 PKCE 流程为例,比如在服务器端身份验证中,您需要额外的步骤来处理代码交换。调用 signInWithOAuth
时,提供一个指向回调路由的 redirectTo
URL。此重定向 URL 应添加到您的重定向允许列表中。
在浏览器中,signInWithOAuth
会自动重定向到 OAuth 提供商的身份验证端点,然后再重定向到您的端点。
123456await ..({ , : { : `http://example.com/auth/callback`, },})
在回调端点,处理代码交换以保存用户会话。
在 app/auth/callback/route.ts
创建一个新文件,并填充以下内容:
app/auth/callback/route.ts
12345678910111213141516171819202122232425262728293031323334import { 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中移除用户数据:
123async function () { const { } = await ..()}
现在,您应该能够通过Facebook登录,当用户尝试登录您的应用时会提示您提交登录审核
。按照提示操作即可让您的应用上线以获得完整功能和产品。
您可以在这里阅读更多关于应用审核的信息。