使用Apple登录

要为项目启用Apple Auth，您需要设置Apple OAuth应用程序，并将应用程序凭据添加到MemFire Cloud项目仪表板。

概述

Apple OAuth包括六大步骤：

  • 获取具有 使用Apple登录 功能的 App Id。
  • 获取Services Id - 这将用作 client_id。
  • 获取用于获取 client_secret的secret key。
  • 使用 secret key生成client_secret。
  • 将您的 client id和 client secret 密钥添加到MemFire Clpud Project。
  • 将登录代码添加到JS客户端应用程序。

访问您的Apple Developer帐户#

Apple Developer Portal.

获取应用程序ID#

  • 跳转到Certificates, Identifiers & Profiles文件.
  • 单击左侧的Identifiers。
  • 单击左上角Identifiers旁边的+符号。
  • 选择 App IDs并单击 继续。
  • 选择 App 类型，然后单击继续。
  • 填写应用程序信息：
    • 应用程序描述。
    • 绑定ID (苹果推荐反向域名风格，所以如果你的域名是acme.com，而您的应用程序称为roadrunner，请使用：com.acme.roadrunner)。
    • 向下滚动并选中使用Apple登录。
    • 单击右上角的继续。
    • 单击右上角的注册。

获取服务ID#

当您进行API调用以验证用户时，这将用作client_id。

  • 跳转到Certificates, Identifiers & Profiles文件.
  • 单击左侧的Identifiers。
  • 单击左上角Identifiers旁边的+符号。
  • 选择 Services IDs 并单击“继续”。
  • 填写应用程序信息：
    • 应用程序描述。
    • 绑定ID (您不能使用上一步中的同一绑定的ID，但可以在开头添加一些内容，例如app.，使其成为app.com.acme.roadrunner).
    • 保存此ID -- 此ID稍后将成为您的 client_id 。
    • 单击右上角的继续。
    • 单击右上角的注册。

查找您的回调URL#

下一步需要回调URL，如下所示：

https://<project-ref>.supabase.co/auth/v1/callback

  • 转到MemFire Cloud项目仪表板.
  • 单击左侧边栏底部的 设置 图标。
  • 单击列表中的 API 。
  • 在 Config / URL下，您将找到您的API URL，您可以单击复制将其复制到剪贴板。
  • 现在只需在末尾添加 /auth/v1/callback 即可获得完整的OAuth重定向URI。

配置服务ID#

  • 在 Identifiers下，单击新创建的服务ID。
  • 选中使用Apple登录旁边的复选框以启用它。
  • 单击右侧的配置。
  • 确保在Primary App ID下选择了新创建的绑定ID`
  • 将域添加到域和子域框中（不要添加https://，只添加域）。
  • 在 Return URLs 框中，键入在上一步中找到的应用程序的回调URL，然后单击右下角的下一步。
  • 单击底部的完成。
  • 单击右上角的继续。
  • 单击右上角的保存。

下载密钥

现在，您需要从Apple下载一个 secret key文件，用于生成 client_secret。

  • 跳转到Certificates, Identifiers & Profiles文件.
  • 单击左侧的Keys。
  • 单击左上角Keys旁边的+符号。
  • 输入Key Name。
  • 选中使用Apple登录。
  • 单击右上角的保存。
  • 从下拉选择器中选择新创建的服务ID。
  • 单击右上角的保存。
  • 单击右上角的继续。
  • 单击右上角的注册。
  • 单击右上角的下载。
  • 保存下载的文件——其中包含用于生成 client_secret的 secret key。
  • 单击右上角的完成。

生成client_secret#

您下载的 secret key 用于创建验证用户所需的 client_secret 字符串。

根据Apple Docs它必须是JWT，使用具有P-256曲线和SHA-256哈希算法的椭圆曲线数字签名算法（ECDSA）加密的令牌。

此时，生成此JWT令牌的最简单方法是使用Ruby。 如果您没有安装Ruby，可以在此处下载Ruby。

  • 安装Ruby（或检查以确保它已安装在您的系统上）。
  • 安装 ruby-jwt.
  • 从命令行运行：sudo gem install jwt。

使用文本编辑器创建以下脚本：secret_gen.rb 

1require "jwt"
2
3key_file = "Path to the private key"
4team_id = "Your Team ID"
5client_id = "The Service ID of the service you created"
6key_id = "The Key ID of the private key"
7
8validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.
9
10private_key = OpenSSL::PKey::EC.new IO.read key_file
11
12token = JWT.encode(
13    {
14        iss: team_id,
15        iat: Time.now.to_i,
16        exp: Time.now.to_i + 86400 * validity_period,
17        aud: "https://appleid.apple.com",
18        sub: client_id
19    },
20    private_key,
21    "ES256",
22    header_fields=
23    {
24        kid: key_id
25    }
26)
27puts token
  1. 编辑 secret_gen.rb 文件:
  • key_file = “从Apple下载的私钥的路径”。它应该是这样的：AuthKey_XXXXXXXX.p8。
  • team_id = 您的团队id。这可以在Apple Developer网站的右上方找到（在您的名字旁边）。
  • client_id = 您创建的服务的服务id。这是您在上述步骤获取服务ID中创建的服务ID。如果您丢失了此ID，可以在Apple开发者网站中找到：
    • 跳转到Certificates, Identifiers & Profiles文件.
    • 单击左侧的Identifiers。
    • 在右上角的下拉列表中，选择服务ID。
    • 在列表中查找您的Identifier（即app.com.acme.roadrunner）。
  • key_id = 私钥的密钥id。这可以在下载的机密文件的名称中找到（对于名为AuthKey_XXXXXXXX.p8的文件，您的key_id为XXXXXXXX）。如果您丢失了此ID，可以在Apple开发者网站中找到：
    • 跳转到Certificates, Identifiers & Profiles文件.
    • 单击左侧的Keys。
    • 单击列表中新创建的密钥。
    • 在 Key ID 下查找Key_ID。
  1. 从命令行运行：ruby secret_gen.rb>client_secret.txt。
  2. 您的 client_secret 现在存储在此 client_secret.txt文件。

将OAuth凭据添加到Supabase#

  • 跳转到MemFire Cloud 项目仪表.
  • 在左侧边栏中，单击“身份验证”图标（靠近顶部）。
  • 单击列表中的设置以转到身份验证设置页面。
  • 在站点URL下输入应用程序的最终（托管）URL（这很重要）。
  • 在外部OAuth提供程序下，将Apple Enabled设置为 ON。
  • 输入前面步骤中保存的 client_id 和 client_secret 。
  • 单击保存。

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

当您的用户登录时，调用signInWithOAuth()，并将apple作为provider：

1async function signInWithApple() {
2  const { data, error } = await supabase.auth.signInWithOAuth({
3    provider: 'apple',
4  })
5}

当用户注销时，调用signOut() 将其从浏览器会话和localStorage中删除：

1async function signout() {
2  const { error } = await supabase.auth.signOut()
3}

资料