终极指南:在 Flutter 中通过 sign_in_with_apple 实现 Apple 登录

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

  1. 登录后台,进入 Certificates, Identifiers & Profiles
  2. 选择 Identifiers → 点击 + 号。
  3. 填写应用描述(Description)和 Bundle ID
  4. 在下方列表勾选 Sign in with Apple
  5. 保存变更。

📌 作用: 这一步是让你的应用获得调用 Apple 身份验证服务的权限。

✅ 第二步:创建 Service ID(可选) 如果你计划支持 Web 端或 Android 端 的重定向登录流程,则需要配置 Service ID

  1. 前往 IdentifiersService IDs
  2. 注册一个具有唯一名称的服务。
  3. 为其勾选 Sign in with Apple
  4. 配置用于 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)

  1. 在 Xcode 中打开项目: 路径为 ios/Runner.xcworkspace

  2. 配置 Signing & Capabilities(签名与功能):

    • 点击左上角的 + Capability 按钮。
    • 搜索 Sign in with Apple 并双击添加。
  3. 核对配置,确保你的 App Target 包含:

    • 正确的 Bundle ID
    • 已添加的 Sign in with Apple 功能权限。
  4. (可选)启用 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 (身份令牌)
    • emailfullName(可选)
  • ✔ 将这些数据发送至后端进行身份验证。


👉 5. 深入理解返回的凭证 (Credentials) 当用户完成登录时:

  • authorizationCode:一个短效代码,服务器用它向 Apple 换取访问令牌(Access Tokens)。
  • identityToken :一个包含用户信息(邮箱、姓名)的 JWT (JSON Web Token)
  • email & fullName仅在用户第一次登录时显示

📌 敲黑板: Apple 只会返回一次邮箱和姓名,所以请务必在第一次获取时就将其安全地存储到你的数据库中!


👉 6. 安全加固(后端校验) 拿到凭证后,为了确保安全,你需要:

  1. authorizationCode 发送到你的后端。
  2. 后端向 Apple 服务器请求交换访问令牌。
  3. 验证 identityToken 的签名和声明(Claims)。
  4. 在你的系统中创建或验证用户会话。

📌 作用: 这能确保只有合法的 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 登录功能。

相关推荐
Learner2 小时前
Python异常处理
java·前端·python
tao3556672 小时前
VS Code登录codex,报错(os error 10013)
java·服务器·前端
军军君012 小时前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
JarvanMo2 小时前
情迷服务器驱动 UI:我在 Flutter 开发中的爱与哀愁
前端
tzy2332 小时前
分享一个 HTTP(S) 代理&抓包工具,拦截和Mock Web客户端请求和服务端响应
前端·网络协议·http
代码小学僧2 小时前
普通前端仔的 2025 : 年终总结与 AI 对我的影响
前端·程序员·ai编程
Mike_jia2 小时前
TCP 粘包/拆包问题
前端
沐墨染2 小时前
敏感词智能检索前端组件设计:树形组织过滤与多维数据分析
前端·javascript·vue.js·ui·数据挖掘·数据分析
Kagol2 小时前
🎉TinyPro v1.4.0 正式发布:支持 Spring Boot、移动端适配、新增卡片列表和高级表单页面
前端·typescript·开源