Apple 登录 Android

Apple 在 Android 上登录很麻烦。 Apple 在 Android 上没有对 Sign in with Apple 的官方支持，因此该解决方案有点hacky。

Android 目前使用 Chrome 选项卡来显示 OAuth2 网站。这种方法面临以下挑战：

• 困难的配置
• 需要后端

了解 Android 上的流程。

我用一张图来解释一下android上的流程：

flowchart TD
    A("await SocialLogin.login()") -->|插件中处理|B(生成登录URL)
    B --> |传递链接| C(打开Chrome浏览器)
    C --> D(等待用户登录)
    D --> |Apple 重定向到您的后端|E（处理从 Apple 返回的数据）
    E --> F（重定向回应用程序）
    F --> G(返回JS)

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

创建服务ID

1. 登录 Apple 开发者门户。

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. 返回所有“所有标识符”

   

5. 单击“应用程序 ID”并转到“服务 ID”

   

6. 创建一个新的标识符

   1. 单击加号按钮

      

   2. 选择“服务 ID”并单击 Continue

      

   3. 输入描述和标识符，然后单击 Continuie。

      

      :::注意 这个 identifiers 将成为 clientId，您将在 initialize 函数和 ANDROID_SERVICE_ID 中传递给后端。

      请保存！ :::

      :::注意 服务 ID 不必与应用程序 ID 匹配，但我建议将服务 ID 设置为 YOUR_APP_ID.service 。提醒一下，我使用 me.wcaleniewolny.test.ionic.vue 作为我的应用程序 ID，但我使用 ee.forgr.io.ionic.service2 作为服务 ID。 :::

   4. 请验证详细信息并点击Register

      

   5. 点击刚刚创建的服务

      

   6. 启用 Sign in with Apple 选项

      

   7. 配置Sign In with Apple

      

   8. 确保“主应用程序 ID”设置为上一步中配置的应用程序 ID

      

   9. 添加您要托管后端的域。

      :::注意 该后端必须在 HTTPS 上运行。至于“返回 URL”，您可能希望在阅读本教程的下一部分并配置后端后返回到此。出于本教程的目的，我将使用 https://xyz.wcaleniewolny.me/login/callback 作为返回 URL，使用 xyz.wcaleniewolny.me 作为域。按下一步。 :::

   10. 确认数据并点击 Done

       

   11. 点击 Continue

       

   12. 点击 Save

       

创建密钥

1. 返回所有“所有标识符”

   

2. 单击Keys

   

3. 单击加号图标

   

4. 为您的密钥命名

   

   :::注意 这个名字并不重要，你可以输入任何内容。 :::

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

   

6. 选择主应用程序 ID，然后按 Save

   

   :::注意 该应用程序 ID 必须与前面步骤中的 ID 相同。 :::

7. 单击Continue

   

8. 单击Register

   

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

   

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

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

    

获取团队ID

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

1. 转到此网站 并向下滚动

2. 找到“团队ID”

   

配置应用程序重定向

正如您在图中看到的，后端执行一个名为“重定向回应用程序”的步骤。这需要手动更改您的应用程序。

1. 修改 AndroidManifest.xml

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

      

   2. 找到 MainActivity 并添加以下 Intent 过滤器

      

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

      :::注意 此示例假设您没有配置任何深层链接。如果是这样，请调整代码 :::

Note

您刚刚在您的应用程序中添加了一个新的深层链接。深层链接将如下所示：capgo-demo-app://path。您可以更改 android:scheme 和 android:host 来修改此深层链接的外观。 重要： 在后端配置中，此深层链接将变为 BASE_REDIRECT_URL

后端配置

Android 需要后端，但配置后端也会影响 IOS。 [此处]提供了一个示例后端(https://github.com/WcaleNieWolny/capgo-social-login-backend-demo/blob/main/index.ts)此示例提供以下内容：

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

Note

我使用 PM2 来托管此示例。可以在[此处]找到示例 ecosystem.config.js(https://github.com/WcaleNieWolny/capgo-social-login-backend-demo/blob/main/ecosystem.config.js.example)

鉴于我在本教程中所说的一切，env 部分的外观如下：

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

使用插件

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. 如果您还没有应用程序 ID，请单击加号按钮

   

2. 选择“应用程序 ID”并单击“继续”

   

3. 单击类型 App，然后单击 Continue

   

4. 输入描述和应用程序 ID

   

5. 启用 Sign with Apple 功能

   

6. 单击Continue

   

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