Android 上的 Apple 登录

Android 上的 Apple 登录比较复杂。Apple 没有官方支持 Android 上的 Sign in with Apple,因此解决方案略显取巧。

Android 目前使用 chrome 标签页显示 OAuth2 网站。这种方法面临以下挑战:

• 配置困难
• 需要后端

了解 Android 上的流程

让我用一张图表来解释 Android 上的流程:

        flowchart TD
            A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
            B --> |Pass the link| C(Open the Chrome browser)
            C --> D(Wait for the user to login)
            D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
            E --> F(Redirect back to the app)
            F --> G(Return to JS)
        

现在你已经了解了挑战和流程,让我们开始配置。

创建服务 ID

1. 登录到 Apple Developer Portal。

2. 点击 Identifiers。

   

   你应该会看到如下屏幕:

   
   1. 确保此字段显示 App IDs
   2. 确保你能找到你的 App ID。

      Note

      如果你还没有为 iOS 配置 Apple 登录,你需要创建一个。对我来说,我已经创建了一个。我将使用的 App ID 是 me.wcaleniewolny.test.ionic.vue。如果你还没有,请使用创建应用步骤创建一个。

3. 确保为你的应用启用了 Sign in with Apple 功能

   1. 点击你的应用
   2. 确保已启用 Sign in with Apple 功能
   3. 如果未启用,请启用它。

4. 返回 All Identifiers

   

5. 点击 App Ids 并转到 Services IDs

   

6. 创建新标识符

   1. 点击加号按钮

      

   2. 选择 Servcice IDs 并点击 Continue

      

   3. 输入描述和标识符,然后点击 Continuie。

      

      Note

      此 identifiers 将成为你在 initialize 函数中传递的 clientId 以及后端的 ANDROID_SERVICE_ID。

      请保存它!!!

      Note

      服务 ID 不必与 App ID 匹配,但我建议将服务 ID 设置为 YOUR_APP_ID.service。提醒一下,我的 App ID 使用 me.wcaleniewolny.test.ionic.vue,但服务 ID 使用 ee.forgr.io.ionic.service2。

   4. 请验证详情并点击 Register

      

   5. 点击新创建的服务

      

   6. 启用 Sign in with Apple 选项

      

   7. 配置 Sign In with Apple

      

   8. 确保 Primary App ID 设置为上一步中配置的 App ID

      

   9. 添加你将托管后端的域名。

      

      Note

      此后端必须运行在 HTTPS 上。至于 Return URLs,你可能希望在阅读本教程的下一部分并配置后端后再回到此处。在本教程中,我将使用 https://xyz.wcaleniewolny.me/login/callback 作为返回 URL,使用 xyz.wcaleniewolny.me 作为域名。按下一步。

   10. 确认数据并点击 Done

       

   11. 点击 Continue

       

   12. 点击 Save

       

创建密钥

1. 返回 All Identifiers

   

2. 点击 Keys

   

3. 点击加号图标

   

4. 命名你的密钥

   

   Note

   此名称并不重要,你可以填写任何内容。

5. 选择 Sign in with Apple 并点击 Configure

   

6. 选择主 App ID,然后按 Save

   

   Note

   这必须与前面步骤中的 App ID 相同。

7. 点击 Continue

   

8. 点击 Register

   

9. 复制密钥 ID 并下载密钥。

   

   Caution

   重要: 保存此 ID,在后端中它将被称为 KEY_ID。下载密钥。确保永远不要共享此密钥。

10. 找到下载的密钥并将其保存在后端文件夹中。

    

获取 Team ID

为了在 Android 上使用 Login with Apple,你需要获取 Team ID。它将在后端中使用。

1. 前往此网站并向下滚动

2. 找到 Team ID

   

配置应用重定向

正如你在图表中看到的,后端执行一个名为 Redirect back to the app 的步骤。这需要手动更改你的应用。

1. 修改 AndroidManifest.xml

   1. 打开文件,我将使用 AndroidStudio

      

   2. 找到 MainActivity 并添加以下 Intent filter

      

      <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="capgo-demo-app" android:host="path" />
      </intent-filter>

2. 修改 MainActivity

   1. 请打开 MainActivity

      

   2. 添加以下代码:

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      Caution

      此示例假设你没有配置任何 deep link。如果有,请调整代码

Note

你刚刚在应用中添加了一个新的 deep link。该 deep link 将类似于:capgo-demo-app://path。你可以更改 android:scheme 和 android:host 来修改此 deep link 的外观。 重要: 在后端配置中,此 deep link 将成为 BASE_REDIRECT_URL

后端配置

Android 需要后端,但配置后端也会影响 iOS。此处提供了一个示例后端

此示例提供以下内容:

• 简单的 JSON 数据库
• 从 Apple 服务器请求 JWT 的方法
• 简单的 JWT 验证

Note

我使用 PM2 来托管此示例。可以在此处找到示例 ecosystem.config.js

根据我在本教程中所说的一切,以下是 env 部分的样子:

• ANDROID_SERVICE_ID = 服务 ID
• IOS_SERVICE_ID = App ID

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

使用插件

login 函数的使用方式没有变化,与 iOS 相同。有关更多信息,请参阅该部分。但是,initialize 方法有一些变化。

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

Danger

注意,添加 redirectUrl 将影响 iOS !!!!!

创建应用

Note

如果你已经有 App ID,可以跳过此步骤。 如果你已经为 iOS 配置了 Apple 登录,请不要执行此步骤。

1. 如果你还没有 App ID,请点击加号按钮

   

2. 选择 App IDs 并点击 continue

   

3. 点击类型 App 并点击 Continue

   

4. 输入描述和 App ID

   

5. 启用 Sign with Apple 功能

   

6. 点击 Continue

   

7. 确认详情并点击 Register