Apple 登录已成为移动应用中必不可少 的身份验证选项,尤其是在你的 App 已经提供了 Google 或 Facebook 等社交登录的情况下。Apple 甚至规定,如果 App 提供了第三方登录,就必须为 iOS 用户同时提供 Apple 登录选项。
在这篇博文中,我们将全方位拆解这一功能------从环境配置 到代码实现 ,再到 UI 设计 、后端校验 以及最佳实践。
🔥 什么是 Apple 登录? Apple 登录允许用户通过其 Apple ID 安全且私密地 登录你的应用。它支持选择性分享邮箱,或者使用 Apple 的"隐藏邮件地址"转发服务。借助 Flutter 插件,这一功能可以完美适配 iOS、macOS、Android 以及 Web 端。
📦 为什么要使用 sign_in_with_apple 插件? pub.dev 上的 sign_in_with_apple 是官方社区维护的 Flutter 桥接插件。它是目前集成 Apple 登录的主流方案,支持:
- ✔ 唤起 Apple 原生身份验证界面
- ✔ 请求用户信息(如全名和邮箱)
- ✔ 获取身份令牌 (Identity Tokens) 和授权码 (Authorization Codes)
- ✔ 跨平台支持 (通过
sign_in_with_apple_web等扩展支持 iOS、macOS、Android 和 Web)
🛠️ 准备工作 在开始之前,请确保你已满足以下条件:
- ✔ 拥有一个已付费的 Apple Developer 计划账号
- ✔ 已在 Apple Developer Portal 注册了应用的 Bundle ID
- ✔ 使用 iOS 13+ 的真机或模拟器进行测试
- ✔ 已在 Xcode 中配置了"Sign In with Apple"功能权限 (Capability)
👉 1. Apple Developer 后台配置
✅ 第一步:注册 App ID
- 登录后台,进入 Certificates, Identifiers & Profiles。
- 选择 Identifiers → 点击 + 号。
- 填写应用描述(Description)和 Bundle ID。
- 在下方列表勾选 Sign in with Apple。
- 保存变更。
📌 作用: 这一步是让你的应用获得调用 Apple 身份验证服务的权限。
✅ 第二步:创建 Service ID(可选) 如果你计划支持 Web 端或 Android 端 的重定向登录流程,则需要配置 Service ID:
- 前往 Identifiers → Service IDs。
- 注册一个具有唯一名称的服务。
- 为其勾选 Sign in with Apple。
- 配置用于 Web 验证的 重定向 URI (Redirect URIs) 。
📌 作用: 这主要用于 Web 端或基于 OAuth 的重定向验证流程。
👉 2. 添加 Flutter 依赖 打开你的 pubspec.yaml 文件,添加以下配置:
yaml
dependencies:
flutter:
sdk: flutter
sign_in_with_apple: ^7.0.1
运行:
arduino
flutter pub get
✔ 这一步将安装 Apple 登录插件及其相关的依赖项。
👉 3. iOS 平台配置 (Xcode)
-
在 Xcode 中打开项目: 路径为
ios/Runner.xcworkspace。 -
配置 Signing & Capabilities(签名与功能):
- 点击左上角的 + Capability 按钮。
- 搜索 Sign in with Apple 并双击添加。
-
核对配置,确保你的 App Target 包含:
- 正确的 Bundle ID。
- 已添加的 Sign in with Apple 功能权限。
-
(可选)启用 Keychain Sharing(钥匙串共享):
- 开启此项有助于在用户卸载重装应用后,依然能保持登录状态或找回凭据。
👉 4. 在 Flutter 中添加登录按钮
dart
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
接下来,在你的界面里加入这个按钮:
dart
SignInWithAppleButton(
onPressed: () async {
final credential = await SignInWithApple.getAppleIDCredential(
scopes: [
AppleIDAuthorizationScopes.email,
AppleIDAuthorizationScopes.fullName,
],
);
print("Authorization Code: ${credential.authorizationCode}");
print("User Email: ${credential.email}");
},
),
🔍 这段代码的作用:
-
✔ 唤起 Apple 原生登录弹窗
-
✔ 返回包含以下信息的凭证 (Credential):
authorizationCode(授权码)identityToken(身份令牌)email和fullName(可选)
-
✔ 将这些数据发送至后端进行身份验证。
👉 5. 深入理解返回的凭证 (Credentials) 当用户完成登录时:
- authorizationCode:一个短效代码,服务器用它向 Apple 换取访问令牌(Access Tokens)。
- identityToken :一个包含用户信息(邮箱、姓名)的 JWT (JSON Web Token) 。
- email & fullName :仅在用户第一次登录时显示。
📌 敲黑板: Apple 只会返回一次邮箱和姓名,所以请务必在第一次获取时就将其安全地存储到你的数据库中!
👉 6. 安全加固(后端校验) 拿到凭证后,为了确保安全,你需要:
- 将
authorizationCode发送到你的后端。 - 后端向 Apple 服务器请求交换访问令牌。
- 验证
identityToken的签名和声明(Claims)。 - 在你的系统中创建或验证用户会话。
📌 作用: 这能确保只有合法的 Apple ID 才能进入系统,有效防止令牌伪造或重放攻击。
注意: 如果你使用的是 Firebase Authentication,Firebase 会帮你处理这整套复杂的校验流程,你无需自己手动实现后端验证逻辑。
👉 7. Android 与 Web 端支持 该插件通过额外配置也可支持 Android 和 Web:
- ✔ Android :需要在
AndroidManifest.xml中配置重定向 Activity。 - ✔ Web:需在 Apple Developer 后台配置 Service ID 及其回调 URL。
📌 常见"坑点"提醒
- 🚫 并非每次登录都能拿到邮箱 出于隐私保护,Apple 仅在首次登录时发送邮箱。之后,你只能拿到用户的唯一 ID (user ID),参看stackoverflow。
- 🚫 必须使用付费 Apple 账号 免费版 Apple ID 无法注册 Apple 登录所需的各项服务。
✨ 完整代码示例
dart
import 'package:flutter/material.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
class AppleSignInDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SignInWithAppleButton(
onPressed: () async {
try {
final credential = await SignInWithApple.getAppleIDCredential(
scopes: [
AppleIDAuthorizationScopes.email,
AppleIDAuthorizationScopes.fullName,
],
);
// Send these credentials to the backend
// and create your user session
print(credential);
} catch (e) {
print("Error: $e");
}
},
),
),
);
}
}
📌 最佳实践
- ✅ 务必在服务器端验证 Token:永远不要只在客户端做判断。
- ✅ 安全存储用户信息:妥善保存初次获取到的邮箱和姓名。
- ✅ 做好容错处理:当 Apple 返回的用户信息有限时(非首次登录),确保 App 逻辑依然稳健。
- ✅ 使用真机测试:只有真机才能模拟最真实的授权行为和交互反馈。
📌 结语 通过使用 sign_in_with_apple 插件,你可以为 Flutter 用户提供快速且隐私优先 的身份验证体验。虽然前端 UI 的集成非常简单,但严谨的后端 Token 校验才是保障系统安全的重中之重。
无论你的项目是基于 Firebase、自定义后端还是其他认证服务器,本指南都为你提供了全方位的参考,助你信心满满地在 Flutter 应用中上线 Apple 登录功能。