Apple login on Android

Android 上の Apple ログインはハックです。Apple は Android に対して公式のサポートを提供していないため、解決策は少しハック的です。 Sign in with Apple Android は現在、OAuth2 ウェブサイトを表示するために Chrome タブを使用しています。このアプローチには、以下のような課題があります:

__CAPGO_KEEP_0__

• 難しい設定
• バックエンドが必要です

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にログインする Apple Developer Portalにログインする.

2. クリックする Identifiers.

   

   このような画面が表示されるはずです。

   
   1. このフィールドが App IDs
   2. このフィールドが

      注意

      注意 me.wcaleniewolny.test.ionic.vueApple Login for IOSが設定されていない場合は、App IDを作成する必要があります。私はすでにApp IDを作成しています。使用するApp IDは が使用されます。.

3. Apple Login for IOSが設定されていない場合は、以下の手順でApp IDを作成してください。 Sign in with Apple create app stepの手順に従ってください。

   1. Click on your app
   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 function AND ANDROID_SERVICE_ID バックエンド用に

      保存してください！！！

      注意

      サービスIDはアプリIDと一致する必要はありませんが、サービスIDを YOUR_APP_ID.service に設定することをお勧めします。 me.wcaleniewolny.test.ionic.vue このアプリIDを使用していますが、サービスIDを ee.forgr.io.ionic.service2 に設定しています。

   4. 詳細を確認し、登録を Register

      

   5. サービスID登録を確認するにはクリックしてください。

      

   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 と

   10. を使用します。 Done

       

   11. ドメインとリターンURLの設定を確認してください。 Continue

       

   12. ボタンをクリックしてください。 Save

       

キーを作成中

1. すべてに戻る All Identifiers

   

2. クリックしてください Keys

   

3. プラスアイコンをクリック

   

4. キー名を入力

   

   Note

   This name isn’t important, you can put anything.

5. Select Sign in with Apple and click Configure

   

6. Select the primary App ID, and press Save

   

   Note

   This must be the same App ID as the ID in the previous steps.

7. Click on Continue

   

8. クリックしてください Register

   

9. __CAPGO_KEEP_0__のキーIDをコピーし、キーをダウンロードしてください。

   

   注意

   重要な注意: __CAPGO_KEEP_0__を保存してください。バックエンドでは、このIDが呼ばれます。 KEY_ID__CAPGO_KEEP_0__をダウンロードしてください。キーを誰かに共有してはいけません。

10. __CAPGO_KEEP_0__をダウンロードしたキーを、バックエンドフォルダに保存してください。

    

チームIDを取得する

使用するには Login with Apple Androidで使用するには、チーム IDを取得する必要があります。 Team ID後端で使用します。

1. Capgoアカウントの開発者アカウントにアクセスし このウェブサイト 下部にスクロール

2. 開発者アカウントのチーム IDの場所を探す Team ID

   

「アプリのリダイレクト設定」セクション

チーム IDは後端で使用されます。 Redirect back to the app. この変更は、手動でアプリを変更する必要があります。

1. Modify the AndroidManifest.xml

   1. Open the file, I will use AndroidStudio

      

   2. Find the MainActivity と、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. Modify the MainActivity

   1. Please open the MainActivity

      

   2. MainActivityに追加する必要がある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 を変更してデープリンクの見た目を変更できます。 重要: In the backend configuration, this deep link will become BASE_REDIRECT_URL

Backend configuration

A backend is required for Android, but configuring a backend will also impact IOS. An example backend is provided here

This example provides the following:

• A simple JSON database
• A way to request the JWT from Apple’s servers
• A simple JWT verification

Note

I use PM2 この例をホストするために必要なものです。 ecosystem.config.js 例は ここ

このチュートリアルで述べたすべてのことを考慮して、以下のようになります。 env セクションの見本は以下のようになります。

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

プラグインを使用する

プラグインの使用方法はIOSと同じです。詳細はそのセクションを参照してください。']} (Note: The translation is based on the provided source text and may not be perfect. It's always recommended to have a native speaker review the translation for accuracy and cultural context.) The protected tokens were left unchanged as per the request. The placeholders __CAPGO_KEEP_0__ were not present in the source text. The translations are in the same order as the input. The JSON object has exactly one key named login translations HOWEVER, the initialize method changes a bit.

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

Danger

Note, that adding redirectUrl WILL affect IOS !!!!!

Creating the app

注意

App IDがすでにある場合は、このステップをスキップしてください。 Apple Login for IOSが設定されている場合は、このステップに従わないでください。

1. App IDがまだない場合は、プラスボタンをクリックしてください

   

2. 選択 App IDs 続けてクリック

   

3. 種類をクリック App 選択 Continue

   

4. 説明とApp IDを入力

   

5. 有効化 Sign with Apple 機能

   

6. クリック Continue

   

7. 確認の詳細を確認し Register

   

Android上のAppleログインから続行

Appleログインを使用している場合 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 Two-factor authentication Edit page