终极指南:在 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 登录功能。

相关推荐
码事漫谈15 分钟前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
ZC跨境爬虫19 分钟前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝20 分钟前
svg图片
前端·css·学习·html·css3
王夏奇37 分钟前
python中的__all__ 具体用法
java·前端·python
大家的林语冰1 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
jiayong232 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
田八2 小时前
聊聊AI的发展史,AI的爆发并不是偶然
前端·人工智能·程序员
zhanghongbin012 小时前
AI 采集器:Claude Code、OpenAI、LiteLLM 监控
java·前端·人工智能
IT_陈寒2 小时前
Python的列表推导式里藏了个坑,差点让我加班到凌晨
前端·人工智能·后端
吴声子夜歌2 小时前
ES6——正则的扩展详解
前端·mysql·es6