likes
comments
collection
share

[译]Flutter Favorite之使用Apple ID登录插件sign_in_with_apple

作者站长头像
站长
· 阅读数 6

本文翻译自pub： sign_in_with_apple | Flutter Package (flutter-io.cn)

译时版本：sign_in_with_apple 3.3.0

使用Apple登录

使用 Apple 登录的 Flutter 桥接。

支持通过 Apple ID 登录，包括从用户钥匙串中检索凭证。

支持的平台

  • iOS
  • macOS
  • Android

示例用法

SignInWithAppleButton(
  onPressed: () async {
    final credential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    print(credential);

    // Now send the credential (especially `credential.authorizationCode`) to your server to create a session
    // after they have been validated with Apple (see `Integration` section for more information on how to do this)
    // 现在发送凭证（特别是 `credential.authorizationCode`） 到你的服务器，在Apple（ `Integration`  集成部分有更多如何实现的信息）验证之会创建 session。
  },
);

流程

[译]Flutter Favorite之使用Apple ID登录插件sign_in_with_apple

[译]Flutter Favorite之使用Apple ID登录插件sign_in_with_apple

集成

集成 Apple 登录不只是在 pubspec.yaml 中添加依赖，也会使用它暴露出来的凭证接收函数。

一旦收到凭证，它们需要通过 Apple 服务器验证（来确保他们有效，且确实和上面提到的用户有关），然后会从服务器得到一个 session 放在你的系统上。

你的服务器之后每天都会通过 Apple 验证 session (通过 刷新Token 它可以获得初始化验证)，如果授权已在 Apple 那边撤销，则也会在你的系统中撤销 session 。

前提

在你可以开始集成（或测试） Apple 登录之前，需要一个 Apple 开发者程序的付费成员 。 Apple 登录是受限的服务，对于免费的 Apple ID (源) 是不可用的。

设置

注册一个 App ID

如果你还没有 App ID, 在 developer.apple.com/account/res… 按照如下步骤创建一个新的：

  • 点击 "Register an App ID"

  • 在向导中选择 "App IDs" ，点击 "Continue"

  • 设置 Description 和 Bundle ID ，选择 Sign In with Apple capability

    • 通常这里 "Enable as a primary App ID" 的默认设定已经够用。如果你想要装载多个应用，全部都为你的用户共享相同的 Apple ID 凭证，请查阅 Apple 文档看一下最好的设置方式。

  • 点击 "Continue"，然后点击 "Register" 完成创建 App ID。

如果你已经有了一个 App ID ，想使用它来进行 Apple 登录：

  • 在列表中打开 App ID
  • 选中 "Sign in with Apple" capability
  • 点击 "Save"

如果你已经改变了应用的 capability ，你需要获取更新后的条款配置文件（例如使用 Xcode ）来使用新的 capability 。

创建一个 Service ID

Service ID 只用于 Web 或 Android 集成。如果你只是用于集成 iOS，可以跳过此步骤。

访问你的 Apple 开发者页面，然后到 "Identifiers" ，然后做下面的步骤：

接下来跳转到 developer.apple.com/account/res… ，然后做下面的步骤：

  • 点击 "Register an Services ID"

  • 选择 "Services IDs"， 点击 "Continue"

  • 设置你的 "Description" 和 "Identifier"

    • "Identifier" 之后会作为你的 clientID 被引用到。

  • 点击 "Continue" 然后 "Register"

现在 Sevice 已被创建，我们需要使其可用于 Apple 登录：

  • 在 Service 列表中选择 Service
  • 选中 "Sign in with Apple" 相邻的 Box ，然后点击 "Configure"
  • 在 Domains and Subdomains 里添加你想使用 Apple 登录的网站的域，例如：example.com. 在这里你至少需要输入一个域，即使你不想在任何网站上使用 Apple 登录。
  • 在 Return URLs box 里添加你想使用的完整的返回URL， 例如： example.com/callbacks/s…
  • 点击 "Next" 然后 "Done" 关闭设置对话框
  • 点击 "Continue" 然后 "Save" 更新 Service

为了和 Apple 服务器通信来验证从应用客户端接收到的授权码，你需要在 developer.apple.com/account/res… 上创建一个 key ：

  • 点击 "Create a key"

  • 设置 "Key Name" (例如： "Sign in with Apple key")

  • 选中 "Sign in with Apple" 相邻的 box ，然后点击同一行的 "Configure"

  • 在 "Primary App ID" 下面，选择你要使用的应用的 App ID (新创建的或者已有的)

  • 点击 "Save" 离开详情视图

  • 点击 "Continue" ，然后点击 "Register"

  • 现在你会看一个只会显示一次的界面，你需要点击 "Download" 按钮下载 key

    • 也要注意 "Key ID" 之后会用于配置服务器

现在所有都在 Apple 开发者入口设置好了，然后我们可以开始设置服务器了。

服务器

服务器部分通常集成到已有的后台，这里有一些现成的包用于大多数现有的编程语言和 Web 框架。

为了展示如何创建一个完整的示例，我们在 Glitch  上安装了一个示例工程，Glitch 提供了简单免费的支持HTTPS的 Web API ，正是我们这里需要的。

要开始这个基于 Glitch 的示例，访问工程的页面 glitch.com/~flutter-si…  点击 "Remix this" 。现在你拥有了属于你自己的示例服务器的副本。

首先在左侧的文件浏览器选择  .env 文件，把它放到你的凭证里 (这些不会是公开的，只会和受邀的合作者共享) 。

之后点击左上方头像相邻的 "Share" 按钮，选择 "Live App" 然后复制页面入口 URL (例如： https://some-random-identifier.glitch.me)。

现在在 developer.apple.com/account/res… 上更新一下之前创建的 Service 来包含 Return URLs 下的URL ：  https://[YOUR-PROJECT-NAME].glitch.me/callbacks/sign_in_with_apple (替换 [] 里的名称)。

这些完成之后，现在你可以进行集成 Apple 登录到你的 Flutter 应用的代码中了。

Android

从两个方法来展现添加 Apple 登录到 Flutter 应用中。 首先我们看一下使示例应用和服务端设置配合运转，然后介绍从头开始设置应用所需的其它步骤。

要在 Android 上使用此插件，你需要使用 Android V2 Embedding 。 你可以查看 AndroidManifest.xml 并查找下面的元素来发现你是否已经在使用新的 embedding :

<meta-data
  android:name="flutterEmbedding"
  android:value="2" 
/>

如果你不是使用 Android V2 Embedding，请首先使用下面的向导升级你的应用： github.com/flutter/flu…

Web

要支持 Web ，你需要在 index.html 的 <head> 标签里添加以下脚本的导入：

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

(我们还未发现按需加载的方法，因为脚本看上去在页面加载时自己初始化了。)

然后在 Apple 开发者入口的 Service 配置中，添加托管 Domains and Subdomains 和 Returns URLs 中页面的域。

前者是需要的，你可以在Web页面上打开流程，后者用来从弹出框向打开的页面发送回最终凭证。（如果你省略了这一步，流程只会静默地卡在最后一步。）

示例应用

  • 在你的编辑器中打开包下的 example 文件夹

  • 运行 flutter packages get

  • 打开 lib/main.dart，看一下 SignInWithAppleButton.onPressed 回调

    • 设置 scopes 参数为你需要的范围，我们可以保持请求名称和邮件用于测试。
    • 更新传递给 WebAuthenticationOptions 构造方法的值来匹配 Apple 开发者入口的值
    • 同样更新 signInWithAppleEndpoint 变量指向你的（应用？）

  • 更新了代码之后，在 Android 设备或模拟器上 flutter run 示例

你的应用

在应用的 android/app/src/main/AndroidManifest.xml 里添加

<!-- Set up the Sign in with Apple activity, such that it's callable from the browser-redirect -->
<activity
    android:name="com.aboutyou.dart_packages.sign_in_with_apple.SignInWithAppleCallback"
    android:exported="true"
>
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="signinwithapple" />
        <data android:path="callback" />
    </intent-filter>
</activity>

Apple 登录回调你的服务器（在 WebAuthenticationOptions.redirectUri 中指定）时，使用下面的 URL 来安全地重定向到你的 Android 应用：

intent://callback?${PARAMETERS FROM CALLBACK BODY}#Intent;package=YOUR.PACKAGE.IDENTIFIER;scheme=signinwithapple;end

PARAMETERS FROM CALLBACK BODY 会使用从 Apple 服务器端点接收到的编码后(urlencoded)的内容来填充，然后 package 参数会被改为匹配你的应用的包识别ID （package identifier） (像在 Google Play 商店发布的那样)。保持 callback 路径 和 signinwithapple 主题不动。

此外，当在客户端处理传入的凭证时，确保如果你的服务器已经验证过传入的 code 参数时，只覆写当前（客人）用户的session，以使你的应用不受到恶意传入的链接的影响（例如：当前用户登出）。

iOS

这时，你应用已经在你的应用的 capability 或为了运行示例的测试应用中添加了 Apple 登录 capability 。

如果在 XCode 中，你没有打开 Automatically manage Signing，你需要重新创建和下载更新后的条款配置文件用于你的应用，它们包含新的 Sign in with Apple capability 。然后你可以下载新的凭证然后在 XCode 中选择它们。

如果 XCode 管理你的签名，这一步会自动为你完成。只需要确认 Sign in with Apple capability 如下面示例中描述的已经激活。

此外，这假设你至少拥有一个在你的开发者用户上已注册用于本地测试的 iOS 设备，这样你可以在设备上运行这个示例。

Example

  • 在命令行终端打开 example 文件夹，运行 flutter packages get

  • 在 XCode 中打开 example/ios/Runner.xcworkspace

  • 在 Runner (文件浏览器侧边栏) -> Targets -> Runner -> Signing & Capabilities 设置 "Bundle Identifier" ("App ID") 为之前在 Apple 开发者入口创建的值。

    • 确保 "Sign in with Apple" 在 capability 列表中 (如果没有的话，通过 + 添加)

  • 现在在 example 文件夹打开一个命令行终端，执行下面的命令：

    • cd ios
    • bundle install ，安装用于 Cocoapods 的 Ruby 依赖
    • bundle exec pod install ，为 iOS 工程安装Cocoapods

  • 在命令行终端返回到 example 文件夹的根目录，然后在测试设备上 flutter run

你的应用

  • 首先也是最重要的是确保你的应用拥有 "Sign in with Apple" capability (Runner (文件浏览器侧边栏 -> Targets -> Runner -> Signing & Capabilities)，否则 Apple 登录会失败而没有任何可视化的指示(代码仍会接收异常)。

  • 集成上面展示的示例服务器或者创建你自己的后台

    • 确保当验证用 Apple 服务器接收到的 code 参数时使用的 clientID 依赖于客户端： 使用在 Apple 平台上运行的应用的 code 时使用 App ID (一些地方也称作 "Bundle ID")，使用从 Web授权流程接收到的的 code 时使用 service ID 。

macOS

macOS 上的设置和 iOS 大致相似。通常用于 macOS 的 Flutter 开发，你需要在 dev 或 master 频道上。

示例

  • 在命令行终端打开 example 文件夹，运行 flutter packages get

  • 在 XCode 中打开 example/macos/Runner.xcworkspace

  • 在 Runner 下 (文件浏览器侧边栏) -> Targets -> Runner -> Signing & Capabilities 设置 "Bundle Identifier" ("App ID") 为之前在 Apple 开发者入口创建的值。

    • 确保 "Sign in with Apple" 在 capability 列表中 (如果没有的话，通过 + 添加)
    • 另外，这里没有警告信息。 (例如：你的 Mac 必须在已经在本地设备注册。(如果没有，你会看到 "one click fix" 按钮用来做这个。))

  • 在命令行终端返回到 example 文件夹的根目录，然后在测试设备上 flutter run