Android 上的 Apple 登录

, Sign in with Apple ,

,

• ,
• ,

,

,

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. 登录到 苹果开发者门户.

2. 点击 Identifiers.

   

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

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

      注意

      如果您没有配置IOS的Apple登录，请创建一个。对于我来说，我已经创建了一个。将要使用的应用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 请保存!!!

      注意

      将成为你将在函数中传递的参数

      Service ID 和 App ID 不一定要匹配，但我建议将 Service ID 设置为 YOUR_APP_ID.service . 请注意，我使用 me.wcaleniewolny.test.ionic.vue 作为 App ID，但我使用 ee.forgr.io.ionic.service2 作为 Service ID.

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

      

   5. 点击新创建的服务

      

   6. 启用 Sign in with Apple 选项

      

   7. 配置 Sign In with Apple

      

   8. 确保设置为上一步中配置的 App ID Primary App ID 设置主 App ID 下拉菜单

      

   9. 设置域名和返回 URL 字段

      

      本后端

      必须 在 HTTPS 上运行。至于 您可能需要在阅读下一节教程和配置后端之后再回来处理。为了本教程的目的，我将使用 Return URLs, you might want to come back to this after reading the next section of this tutorial and after configuring the backend. For the purposes of this tutorial, I will use https://xyz.wcaleniewolny.me/login/callback 为返回 URL 和域名 xyz.wcaleniewolny.me 请按下 "next"

   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 可以在这里找到 鉴于我在教程中所说的所有内容，这个部分将如下所示：

protectedTokens env targetLanguage

• ANDROID_SERVICE_ID = 服务 ID
• IOS_SERVICE_ID = 应用 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 然而， 方法有一些变化。复制到剪贴板 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 点击继续

   

3. 点击类型 App 点击 Continue

   

4. 输入描述和 App 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 的实现细节, 和 双因素认证 对于双因素认证的实现细节。