Android 上的 Apple 登录

在 Android 上使用 Apple 登录是hacky。Apple 对 Android 没有官方支持，所以解决方案略微hacky。 Sign in with Apple Android 当前使用 Chrome tabs 来显示 OAuth2 网站。这一方法存在以下挑战：

配置困难

• 需要后端
• 理解 Android 流程

标题：理解 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 开发者门户.

2. 点击 Identifiers.

   

   您应该看到一个类似这样的屏幕：

   
   1. 确保该字段显示 App IDs
   2. 确保您可以找到您的 App ID。

      注意

      如果您没有为 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.

      

      注意

      这 identifiers 将成为你将在函数中传递的 clientId 用于后端的 initialize 请保存它!!! ANDROID_SERVICE_ID 注意

      选择服务 ID 选项

      注意

      服务 ID 不需要与 App ID 匹配，但我建议将服务 ID 设置为 YOUR_APP_ID.service . 作为提示，我使用 me.wcaleniewolny.test.ionic.vue 作为我的 App ID，但我使用 ee.forgr.io.ionic.service2 作为服务 ID.

   4. 请确认详细信息并点击 Register

      

   5. 点击新创建的服务

      

   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 为了本教程的目的，我将使用 xyz.wcaleniewolny.me 用于返回 URL 和

   10. 域名。按下下一步。 Done

       

   11. 确认域名和返回 URL 配置 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. 复制密钥 ID 并下载密钥。

   

   注意

   非常重要： 保存这个 ID，后端会用它来称呼 KEY_ID下载密钥。请务必不要与任何人分享这个密钥。

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

    

获取团队 ID

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

1. 前往 访问 向下滚动

2. 找到 Team ID

   

配置应用重定向

如图所示，后端执行一个名为 Redirect back to the app的步骤。这需要手动修改您的应用。

1. 修改 AndroidManifest.xml

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

      

   2. 找到并添加以下意图过滤器 MainActivity 并添加以下意图过滤器 __CAPGO_KEEP_0__ 到 MainActivity

      

      <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.java 文件在 Android Studio MainActivity

      

   2. code 添加到 MainActivity 处理深度链接

      

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

      注意

      本例假设您没有配置任何深度链接。如果您有，请调整code

注意

您刚刚为应用程序添加了一个新的深度链接。深度链接将类似于此： capgo-demo-app://path您可以修改 android:scheme 和 android:host 来修改此深度链接的外观. 重要提示： 在后端配置中，这个深度链接将变成 BASE_REDIRECT_URL

后端配置

后端是Android所必需的，但配置后端也会影响IOS。提供了一个示例后端 here

本示例提供以下内容：

• 一个简单的 JSON 数据库
• 从 Apple 服务器获取 JWT 的方法
• 一个简单的 JWT 验证

注意

我使用 PM2 以便托管此示例。示例 ecosystem.config.js 可以在这里找到 鉴于我在教程中所说的所有内容，这是如何做到的

Given everything that I said in this tutorial, here is how the env section 将看起来：

• 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"
}

使用插件

The 使用的 login function 的变化，和 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 登录。 如果您没有 App ID，请点击加号按钮

1. 添加新标识符加号按钮

   

2. 选择并点击继续 App IDs 选择App ID类型

   

3. 选择并点击 App 选择App类型 Continue

   

4. 输入App描述和Bundle ID

   

5. 能力 Sign with Apple 启用Sign in with Apple能力

   

6. Capacitor, Continue

   

7. 确认详细信息并点击 Register

   

从Android上的Apple登录继续

如果您正在使用 Android上的Apple登录 来规划身份验证和帐户流程，连接它到 使用@capgo/capacitor-social-login 为native能力在使用@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的实现细节 双因素认证 关于双因素认证的实现细节