Android 上的 Apple 登录

苹果登录在 Android 上是hacky。苹果没有对 Android 的官方支持 Sign in with Apple 在 Android 上，所以解决方案略微hacky。

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)

现在您了解了挑战和流程，让我们开始配置。

创建服务 ID

1. 登录 Apple Developer Portal.

2. 点击 Identifiers.

   

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

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

      注意

      如果您没有配置 iOS 的 Apple 登录， me.wcaleniewolny.test.ionic.vue如果您没有配置 iOS 的 Apple 登录， 如果您没有配置 iOS 的 Apple 登录，请使用"创建应用程序"步骤创建一个。.

3. 确保该功能在您的应用程序中启用 Sign in with Apple 为您的应用程序启用该功能

   1. 点击您的应用程序
   2. 确保该功能已启用 Sign in with Apple 启用 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 不需要与 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. 确保设置为上一步配置的 App ID 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

   

   注意

   必须与之前步骤中的 ID 相同的 App 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 并添加以下意图过滤器

      

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

      注意

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

注意

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

后端配置

对于 Android，需要一个后端，但配置后端也会影响 IOS。以下是一个例子 这里

此示例提供以下内容：

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

注意

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

部分将看起来像这样： env 服务ID

• ANDROID_SERVICE_ID 应用ID
• IOS_SERVICE_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"
}

标题为“使用插件”

使用方式与IOS相同，具体请参见相关说明。 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 登录,请不要执行此步骤。

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

   

2. 选择 App IDs 选择 App ID 类型

   

3. 选择 App 类型 App __CAPGO_KEEP_0__ Continue

   

4. 输入描述和应用 ID

   

5. 启用 Sign with Apple 功能

   

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 中的实现细节 两因素身份验证 对于在两因素身份验证中的实现细节