Android 端 Apple 登录

在 Android 上做 Apple 登录很 hacky。Apple 官方并不支持 Sign in with Apple 在 Android 上，因此该方案略显 hack。

Android 目前使用 Chrome tabs 来展示 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)

既然你已经了解了挑战和流程，让我们开始配置吧。

创建 Service ID

1. 登录 Apple Developer Portal.

2. 点击 Identifiers.

   

   你应该会看到如下界面：

   
   1. 请确保该字段显示为 App IDs
   2. 请确认你能找到你的 App ID。

      注意

      如果你还没有为 iOS 配置 Apple Login，则需要创建一个。我这里已经创建好了，我将使用的 App ID 是 me.wcaleniewolny.test.ionic.vue。如果你还没有，请参考 创建 App 步骤.

3. 请确保 Sign in with Apple 已为您的 App 启用该功能

   1. 点击您的 App
   2. 请确保 Sign in with Apple 已启用该功能
   3. 如果尚未启用，请将其启用。

4. 返回所有 All Identifiers

   

5. 点击 App Ids 并前往 Services IDs

   

6. 创建新的标识符

   1. 点击加号按钮

      

   2. 选择 Servcice IDs 并点击 Continue

      

   3. 输入描述和标识符并点击 Continuie.

      

      注意

      这个 identifiers 将成为 clientId 您将在以下内容中传入 initialize 函数，并且 ANDROID_SERVICE_ID 用于后端。

      请务必保存！！！

      注意

      Service ID 不需要与 App ID 一致，但我建议将 service ID 设置为 YOUR_APP_ID.service 。提醒一下，我的 App ID 使用的是 me.wcaleniewolny.test.ionic.vue ，但 service ID 使用的是 ee.forgr.io.ionic.service2 。

   4. 请核对详情并点击 Register

      

   5. 点击新创建的 Service

      

   6. 启用 Sign in with Apple 选项

      

   7. 配置 Sign In with Apple

      

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

      

   9. 添加您将用于托管后端的域名。

      

      注意

      该后端 必须 通过 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. 为您的密钥命名

   

   注意

   此名称并不重要，可以随意填写。

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

   

6. 选择主 App ID，然后点击 Save

   

   注意

   此 App ID 必须与前述步骤中的 ID 保持一致。

7. 点击 Continue

   

8. 点击 Register

   

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

   

   注意

   重要提示： 请保存此 ID，在后端中它将被称为 KEY_ID。下载密钥。请务必妥善保管，切勿泄露。

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

    

获取 Team ID

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

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

2. 找到 Team ID

   

配置 App 重定向

正如你在图中看到的，后端会执行一个名为 Redirect back to the app的操作。这需要手动修改你的 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. 添加以下 code：

      

      @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);
      }

      注意

      本示例假设你还没有配置任何 deep link。如果已配置，请调整 code

注意

你刚刚在应用里添加了一个新的 deep link。它看起来大概是这样： capgo-demo-app://path。你可以更改 android:scheme 以及 android:host 来修改这个 deep link 的显示方式。 重要提示： 在后端配置中，该 deep link 将变为 BASE_REDIRECT_URL

后端配置

Android 需要后端支持，但配置后端也会影响 iOS。我们提供了一个后端示例 此处

该示例包含以下内容：

• 一个简单的 JSON 数据库
• 一种从 Apple 服务器请求 JWT 的方式
• 简单的 JWT 验证

注意

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

结合本教程中的所有内容，以下是 env 部分的内容展示：

• ANDROID_SERVICE_ID = Service 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"
}

使用该 plugin

使用 login 函数的使用方式保持不变，与 iOS 一致。详情请参阅该章节。 但是，该 initialize 方法略有不同。

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

危险

请注意，添加 redirectUrl 将会 影响 iOS !!!!!

创建应用

注意

如果你已有 App ID，可以跳过此步骤。 若已为 iOS 配置过 Apple Login，请勿执行此步骤。

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

   

2. 选择 App IDs 并点击继续

   

3. 点击类型 App 并点击 Continue

   

4. 输入描述和 App ID

   

5. 启用 Sign with Apple Capability

   

6. 点击 Continue

   

7. 确认详情并点击 Register

   

在 Android 上继续 Apple 登录

如果你正在使用 Android 端 Apple 登录 规划身份验证和账户流程，并将它与 使用 @capgo/capacitor-social-login 了解使用 @capgo/capacitor-social-login 时的原生能力， @capgo/capacitor-social-login 了解 @capgo/capacitor-social-login 中的实现细节， @capgo/capacitor-passkey 了解 @capgo/capacitor-passkey 中的实现细节， @capgo/capacitor-native-biometric 了解 @capgo/capacitor-native-biometric 中的实现细节，以及 双重身份验证 了解双因素认证中的实现细节。