认证

使用 Slack 登录


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

概述

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

访问您的 Slack 开发者账户

Slack 开发者门户

查找您的回调 URL

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

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

创建 Slack OAuth 应用

  • 访问 api.slack.com
  • 点击 Create New App(创建新应用)

Create an app...(创建应用...)部分:

  • 点击 From scratch(从零开始)
  • 输入您的应用名称
  • 选择您的 Slack Workspace(Slack 工作区)
  • 点击 Create App(创建应用)

App Credentials(应用凭证)部分:

  • 复制并保存新生成的 Client ID(客户端ID)
  • 复制并保存新生成的 Client Secret(客户端密钥)

在侧边栏中选择 OAuth & Permissions(OAuth 和权限),找到 Redirect URLs(重定向URL):

  • 点击 Add New Redirect URL(添加新重定向URL)
  • 粘贴您的 Callback URL(回调URL)后点击 Add(添加)
  • 点击 Save URLs(保存URL)

Scopes(权限范围)部分:

将 Slack 凭证输入到您的 Supabase 项目中

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

在客户端应用中添加登录代码

当用户登录时,调用 signInWithOAuth() 并将 provider 参数设为 slack_oidc

1
2
3
4
5
async function () { const { , } = await ..({ : 'slack_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 ..()}

资源