EasyApp

Apple 登录/邮箱注册、登录

了解 EasyAppSwiftUI 项目如何集成 Apple 登录/邮箱注册、登录

设置通过 Apple 登录 (推荐)

我们推荐您使用 Apple 登录,相较于传统的注册、登录流程,Apple 登录整体流程用户体验会更好。当然如果您不打算使用 Apple 登录,您可以跳过这一步。

配置 Apple 登录

首先确保您有 可用的 Apple 开发者账号。如果您还未注册,请参考官方文档来注册。 注册完成之后,登录您的开发者账号进入到Identifiers页面,点击+按钮

第一步:注册 Services ID

Identifiers addIdentifiers

选择 Services IDs 并且点击 Continue 按钮

ServicesIDs

Description 可以用您的应用名字+Services ID 来命名。

Identifier 建议用 bundleID.ServicesID 来命名。其中 bundleID 是您在 App 的 唯一标识符。

点击 Continue 按钮

RServicesIDs

您可以在 Xcode 工程中这里找到 bundleID。 XcodeBundleID

点击 Register 按钮 registerIdent

完成之后,我们回到Identifiers页面,点击我们刚刚新建的 Services IDs

successRegisterIdent

如果您未找到我们刚刚新建的 Services IDs,如下图所示进行筛选 filterIdns

启用 Sign in with Apple 功能,并点击 Configure 按钮 configIdns

在弹窗中,有以下几个选项需要您配置:

请替换 SUPABASE_PROJECT_ID 为您的 Supabase 项目 ID。可以在这里找到 findSupabaseProjectID

在文档示例中,我们的SUPABASE_PROJECT_IDmutkgdbrerijqhqccalu

  1. Primary App ID 中,下拉框选中您的 App 的 Bundle Identifier
  2. Domains and Subdomains字段中输入 supabase.co,SUPABASE_PROJECT_ID.supabase.co
  3. Return URLs字段中输入 https://SUPABASE_PROJECT_ID.supabase.co/auth/v1/callback
  4. 点击 Next 按钮、 Done 按钮

WebAuthConfig

点击 Continue 按钮,并点击 Save 按钮

saveWebAuthConfig saveWebAuthConfig2

第二步:创建用于"通过 Apple 登录"的.p8 认证密钥

进入到Keys页面,点击+按钮

CreateKeys

  1. 输入您的 Key Name,为了方便后续的识别,我们建议您使用 App 名字+Keys 来命名。
  2. 选择 Sign in with Apple 功能,点击 Configure 按钮。
  3. 点击 Configure 按钮后,在Primary App ID 下拉框中选择您的 App ID
  4. 点击 Save 按钮 RNewKey CKeys

接着点击 Continue 按钮,点击 Register 按钮

NewKeyCon

NewKeyReg

第三步:Supabase 接入 Apple 登录

进入Supabase 项目,点击 侧边栏Authentication、点击Sing In/Providers、点击Apple 按钮。 SupabaseSignApple

在弹窗中,需要您配置以下信息:

  1. 开启 Enable Sign in with Apple 功能
  2. Client IDs 字段中输入您的 Services ID 和 App 的唯一标识符bundleID。(用逗号分隔,不要有空格) AppleModalSave

Secret Key (for OAuth) 这一栏,可以空着不填。

  1. 点击保存

是否忘记了 Services IDbundleID?没关系,我们再回顾一下。

  1. Identifiers 页面中,找到我们刚刚新建的 Services IDssuccessRegisterIdent

  2. 在 Xcode 工程中,找到 Bundle IdentifierXcodeBundleID

或者在Identifiers 页面中,也可以找到 IdensBIds

第四步:测试 Apple 登录

Apple 登录的测试,需要您在真机上进行。

回到 Supabase 控制台,查看 Users 表,您可以看到您刚刚 Apple 登录的用户信息。

SignAppleSuccess

恭喜您 🎉🎉🎉,您已经成功集成 Apple 登录功能。

支持邮箱验证功能

Supabase 默认启用电子邮件认证,EasyApp 当然也是支持的。但是需要您配置Deek Linking。配置过程非常简单。

  1. 在Xcode中设置 URL Type

urlType

在截图中,您需要填写identifierURL Schemas

  • identifier 推荐使用 Bundle Identifier。
  • URL Schemas 推荐使用 您的 App名称。
  1. 在 Supabase 中配置 Deek Linking

接着来到 Supabase 的 Authentication 页面,点击 URL Configuration 按钮。 urlConfirm

点击Add URL 按钮,然后输入您的 App 的 URL。

在填写Deek Linking时,我们推荐您使用 您的App名称://user?type=sign_up 这种格式。

我们来解释下为什么这么设置,其中user表示模块名,type表示类型,sign_up表示验证邮箱。 user模块有以下几种类型:

  • sign_up:验证邮箱
  • reset_password:重置密码

所以我们用type来去做区分。

SwiftUI中,我们再通过 模块名+ type来去做区分。

.onOpenURL { url in
  let value = url.getEaspAppDeepLinkUrlParam(hostKey: "user", name: "type")
  guard value == "reset_password" else { return }

  /// 处理重置密码逻辑
}
.onOpenURL { url in
  let value = url.getEaspAppDeepLinkUrlParam(hostKey: "user", name: "type")
  guard value == "sign_up" else { return }

  /// 处理验证邮箱逻辑
}

Add URL 填写规则: URL Schemas + ://

EasyApp模板中 已经配置好了 邮箱验证/密码重置的 Deeplinking 规则。您需要配置在 Xcode 中配置identifierURL Schemas。 然后在您的Supabase中配置如图所以Deeplinking。即可。

您后续有其他需求,按照这个规则配置就行

到此,您已经可以正常使用 Email 认证功能了。

流程: 用户注册成功 -> Supabase 发送邮件 -> 用户点击邮件中的链接 -> 会直接回到 App 中 -> 登录成功。

  1. 重发验证邮件

为了用户体验,我们做了以下优化:

  • 当用户注册成功后,假设用户并没有及时去验证邮件,他在某个时间点,重新打开App,我们会判断当前这个用户是否已经验证邮件 如果用户没有验证邮件,我们会提示用户去验证邮件。

所以我们提供了一个VerifyEmailView

这个组件会在用户没有验证邮件时,自动弹出,并且支持用户重新发送验证邮件。

Supabase 平台提供了默认的邮件发送服务供您试用。该服务每小时限发 2 封邮件,且仅提供尽力而为的可用性。如需用于生产环境,建议您配置自定义 SMTP 服务器。 具体操作指南请参阅《自定义 SMTP 配置手册》

关闭邮箱验证功能

如果您不打算使用 Email 认证功能,您可以关闭它们。 email emailNoComfirm

如果您关闭邮箱验证功能,用户注册完成之后,为了优化最短登录流程:我们会让用户直接登录成功。

App 内购买(可选)

Last updated on