AndroidでのApple login

AndroidでのAppleログインは少し強引な実装です。Appleは Sign in with Apple Androidを公式にサポートしていないため、解決策も少し強引です。

現在、AndroidではOAuth2のWebサイトを表示するためにChromeタブを使用しています。この手法には次の課題があります：

• 設定が複雑
• バックエンドが必要

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)

課題とフローを把握したところで、設定を開始しましょう。

Service IDの作成

1. にログインしてください Apple Developer Portal.

2. 次をクリックします： Identifiers.

   

   次のような画面が表示されます：

   
   1. このフィールドが以下のようになっていることを確認してください： App IDs
   2. App ID が見つかることを確認してください。

      注意

      iOS 用の Apple Login が設定されていない場合は、作成する必要があります。ここでは、作成済みのものを使用します。使用する App ID は me.wcaleniewolny.test.ionic.vueです。まだ作成していない場合は、 「create app step」の手順に従って作成してください。.

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 をアプリIDとして使用していますが、私は ee.forgr.io.ionic.service2 をService IDとして使用しています。

   4. 詳細を確認して、クリックしてください Register

      

   5. 作成したばかりのサービスをクリック

      

   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 をリターン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

   

   注意

   前のステップで使用したApp IDと同じものである必要があります。

7. 次をクリックします： Continue

   

8. 次をクリックします： Register

   

9. Key IDをコピーしてキーをダウンロードします。

   

   注意

   重要: このIDを保存してください。バックエンドでは以下のように呼ばれます： KEY_IDキーをダウンロードします。このキーは絶対に共有しないでください。

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

    

Team 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 を追加します。

      

      <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 セクションは以下のようになります：

• ANDROID_SERVICE_ID = サービス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"
}

プラグインを使用する方法

関数の使い方は 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 Loginを設定済みの場合は、このステップは行わないでください。

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

   

2. 選択します App IDs 「Continue」をクリックします

   

3. タイプをクリック App をクリックし、 Continue

   

4. 説明とApp IDを入力してください

   

5. 有効にする Sign with Apple capability

   

6. クリック Continue

   

7. 詳細を確認してクリック Register

   

AndroidでのAppleログインの継続

使用している場合 AndroidでのApple login 認証とアカウントフローを計画するには、これを次と連携させてください @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 の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。