使用Apple登录

在网页中使用 OAuth 流程#

"使用 Apple 登录"的 OAuth 流程专为网页或基于浏览器的登录方式设计。它可用于基于网页的应用和网站，不过某些用户可能更适合直接使用 Sign in with Apple JS。

在后台，Supabase Auth 使用 Apple 提供的 REST API。

要发起登录，您可以使用 Supabase JavaScript 库中的 signInWithOAuth() 方法：

1
2
3
supabase.auth.signInWithOAuth({  provider: 'apple',})

此调用会将用户带到 Apple 的授权页面。流程结束后，用户的个人信息会与 Supabase Auth 交换并验证，然后重定向回您的网页应用，附带代表用户会话的访问令牌和刷新令牌。

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

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

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

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`)}

配置 #

您需要准备以下信息：

1. Apple 开发者账户的 Team ID，这是一个 10 位字母数字字符串，唯一标识应用开发者。通常可在 Apple 开发者控制台右上角菜单中找到。
2. 为 Sign in with Apple for Email Communication 注册电子邮件来源，可在 Apple 开发者控制台的 Services 部分找到。
3. App ID，唯一标识您正在构建的应用。您可以从 Apple 开发者控制台的 Identifiers 部分创建新的 App ID（使用右上角的筛选菜单查看所有 App ID）。这些通常是反向域名字符串，例如 com.example.app。创建 App ID 时，请确保在 Capabilities 列表中配置 Sign in with Apple。目前 Supabase Auth 不支持 Server-to-Server 通知端点，因此该设置应留空。（过去 App ID 被称为 bundle IDs）
4. Services ID，唯一标识上一步注册应用提供的网络服务。您可以从 Apple 开发者控制台的 Identifiers 部分创建新的 Services ID（使用右上角的筛选菜单查看所有 Services ID）。这些通常是反向域名字符串，例如 com.example.app.web。
5. 为新创建的 Services ID 配置网站 URL。您应使用的网域是托管 Supabase 项目的域。通常是 <project-id>.supabase.co，而重定向 URL 是 https://<project-id>.supabase.co/auth/v1/callback。
6. 在 Apple 开发者控制台的 Keys 部分创建签名 Key。您可以使用下方工具生成密钥，并将其添加到 Supabase 项目的 Auth 配置中。请安全存储 AuthKey_XXXXXXXXXX.p8 文件。如果丢失或意外公开，请立即从 Apple 开发者控制台撤销并创建新密钥。您需要每 6 个月使用此文件生成新密钥，因此请确保在日历中设置定期提醒！
7. 最后，将上述配置信息添加到 Supabase 仪表板的 Apple 提供商配置中。

使用 Sign in with Apple JS#

Sign in with Apple JS 是 Apple 官方框架，用于在网站上进行 Apple 用户认证。虽然它可用于基于网页的应用，但这些用例更适合使用上述 OAuth 流程。我们建议仅在传统网站上使用此方法。

用户通过 Sign in with Apple JS 授权后，您可以在网站上使用 Supabase JavaScript 库的 signInWithIdToken() 方法获取访问令牌和刷新令牌：

1
2
3
4
5
6
7
8
9
function signIn() {  const data = await AppleID.auth.signIn()  await supabase.auth.signInWithIdToken({    provider: 'apple',    token: data.id_token,    nonce: '<nonce used in AppleID.auth.init>',  })}

或者，您可以使用 AppleIDSignInOnSuccess 事件配合 usePopup 选项：

1
2
3
4
5
6
7
8
// 监听授权成功事件document.addEventListener('AppleIDSignInOnSuccess', async (event) => {  await supabase.auth.signInWithIdToken({    provider: 'apple',    token: event.data.id_token,    nonce: '<value used in appleid-signin-nonce meta tag>',  })})

初始化库时，请确保请求 name email 作用域。

配置 #

使用 Sign in with Apple JS 需要配置以下选项：

1. App ID，唯一标识您正在构建的应用。您可以从 Apple 开发者控制台的 Identifiers 部分创建新的 App ID（使用右上角的筛选菜单查看所有 App ID）。这些通常是反向域名字符串，例如 com.example.app。请确保为您创建或已有的 App ID 在 Capabilities 列表中配置 Sign in with Apple。目前 Supabase Auth 不支持 Server-to-Server 通知端点，因此该设置应留空。（过去 App ID 被称为 bundle IDs）
2. 获取附加到 App ID 的 Services ID，唯一标识网站。初始化 Sign in with Apple JS 时将此值用作客户端 ID。您可以从 Apple 开发者控制台的 Identifiers 部分创建新的 Services ID（使用右上角的筛选菜单查看所有 Services ID）。这些通常是反向域名字符串，例如 com.example.app.website。
3. 为新创建的 Services ID 配置网站 URL。您应使用的网域是托管网站的域。重定向 URL 也必须指向您网站上接收 Apple 回调的页面。
4. 将创建的 Services ID 注册到项目的 Supabase 仪表板 Apple 提供商配置 中的 Client IDs 下。