苹果登录

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

配置困难

• __CAPGO_KEEP_0__
• 需要一个后端

了解安卓上的流程

让我们使用一个图表来解释安卓上的流程：

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登录，需要创建一个。对于我来说，我已经创建了一个。将要使用的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 服务 ID initialize AND ANDROID_SERVICE_ID 后端使用。

      请务必保存!!!

      注意

      服务 ID 不需要与 App ID 匹配，但我建议将服务 ID 设置为 YOUR_APP_ID.service 作为一个提示，我正在 me.wcaleniewolny.test.ionic.vue 但我正在 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. 设置域名和返回 URL 字段

      

      __CAPGO_KEEP_0__

      必须使用 HTTPS 运行此后端。关于这个问题， 你可能需要在阅读下一节教程和配置后端之后再回来。为了本教程的目的，我将使用 作为返回 URL 和 Return URLs作为域名。点击下一步。 https://xyz.wcaleniewolny.me/login/callback 确认数据并点击 xyz.wcaleniewolny.me 确认域名和返回 URL 配置

   10. 点击 Done

       

   11. 点击 Continue

       

   12. __CAPGO_KEEP_0__ Save

       

生成密钥

1. 返回所有 All Identifiers

   

2. 点击 Keys

   

3. 点击加号

   

4. 命名密钥

   

   注意

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

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

   

6. 选择主 App ID，点击 Save

   

   注意

   必须与之前步骤中的 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 过滤器

      

      <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 = Service ID

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

标题为“使用插件”的部分

然而 login __CAPGO_KEEP_0__ __CAPGO_KEEP_1__, initialize 方法会有所不同。

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

危险

注意，添加 redirectUrl 将会影响 IOS！ 创建应用

标题：创建应用

__CAPGO_KEEP_0__

如果您已经有一个 App ID，则可以跳过这个步骤。 如果您已经配置了 IOS 的 Apple 登录，则不要遵循这个步骤。

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

   

2. 选择 App IDs 并点击继续

   

3. 点击类型 App 并点击 Continue

   

4. 输入描述和 App ID

   

5. 启用 Sign with Apple 功能

   

6. 点击 Continue

   

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