Apple Androidでのログイン

Android上のAppleログインはハックです。 AppleはAndroidに対して公式のサポートを提供していないため、解決策は少しハック的です。 Sign in with Apple Android上では、解決策は少し工夫が必要です。

難しい設定

• バックエンドが必要
• Androidのフローを理解すること

タイトル「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 デベロッパー ポータル.

2. クリックして Identifiers.

   

   Apple Developer Portalの識別子画面

   
   1. アプリIDが見つかることを確認してください。 App IDs
   2. 注記

      注意

      Apple Login for IOS を設定していない場合は、1 つを作成する必要があります。私にはすでに 1 つが作成されています。使用するアプリ ID は me.wcaleniewolny.test.ionic.vueが使用されます。1 つがない場合は、以下の手順で作成してください。 アプリを作成する手順.

3. アプリの設定で、以下の機能が有効になっていることを確認してください。 Sign in with Apple アプリを選択

   1. アプリのリストからアプリを選択
   2. Sign in with Apple 機能が有効になっているチェックボックス 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 お願いします!!!

      サービスIDはアプリIDと一致する必要はありませんが、サービスIDを設定することをお勧めします

      注意

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

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

      

   5. 新しく作成されたサービス ID をクリックしてください。

      

   6. オプションを有効にします。 Sign in with Apple option

      

   7. Enable the option Sign In with Apple

      

   8. を確認してください。 Primary App ID に設定されているApp IDを使用してください。

      

   9. を追加してください。

      

      注意

      はHTTPSで実行されている必要があります。については、後でこのセクションに戻ってください。このチュートリアルの目的のために、を使用します。 のURLを使用します。 HTTPSを実行している場合。 Return URLsはHTTPSで実行されている必要があります。については、後でこのセクションに戻ってください。このチュートリアルの目的のために、を使用します。 https://xyz.wcaleniewolny.me/login/callback はHTTPSで実行されている必要があります。については、後でこのセクションに戻ってください。このチュートリアルの目的のために、を使用します。 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

   

   注意

   このIDは、前のステップで使用したIDと同じでなければなりません。

7. クリックしてください Continue

   

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

   

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

   

   注意

   重要な注意事項： バックエンド側ではこのIDを使用します。IDを保存してください。 KEY_IDキーのダウンロード。キーの共有は絶対に避けてください。

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

    

チームIDの取得

Androidで使用するには、チームIDを取得する必要があります。バックエンド側で使用されます。 Login with Apple Androidで使用するには、チームIDを取得する必要があります。バックエンド側で使用されます。 Team IDチームIDを取得するには、以下のサイトをご覧ください。

1. チームIDの取得 このサイトをご覧ください。 とスクロール

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 MainActivity

   1. Android StudioでMainActivity.javaファイルを開いてください MainActivity

      

   2. codeをMainActivityに追加して深リンクを処理

      

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

      Caution

      この例では、深いリンクが設定されていないことを前提としています。設定されている場合は、codeを調整してください。

注意

あなたは新しいデープリンクをアプリに追加しました。デープリンクは以下のようになります。 capgo-demo-app://path。このデープリンクの android:scheme と android:host を変更して、このデープリンクの表示を変更できます。 重要なこと: バックエンド設定では、このデープリンクは BASE_REDIRECT_URL

バックエンド設定

Androidではバックエンドが必要ですが、バックエンドを設定するとiOSにも影響します。Androidの例バックエンドは ここ

この例では以下のものが提供されています:

• シンプルなJSONデータベース
• AppleのサーバからJWTを要求する方法
• シンプルなJWT検証

注意

私は PM2 この例をホストするために使用しています。 例は ecosystem.config.js ここにあります here

= サービスID env =

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

プラグインの使用

このセクションでは、機能の使用方法について詳しく説明しています。 login ただし 、メソッドは少し異なります。 initialize 注意

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

危険

注意：追加 redirectUrl WILL IOS に影響

アプリを作成

注意

既存の App ID があれば、このステップをスキップしてください。 Apple Login for IOS が設定済みの場合は、このステップを実行しないでください。

1. 既存の App ID がなければ、プラスボタンをクリック

   

2. 選択 App IDs 続行

   

3. 種類をクリックする App とクリックする Continue

   

4. 説明とアプリ ID を入力する

   

5. 有効にする Sign with Apple 機能

   

6. クリックする Continue

   

7. 詳細を確認し、クリックする Register

   

Apple ログイン on Android から続けてください

Apple ログイン on Android を使用している場合 Apple ログイン on Android Apple ログイン on Android を使用して認証とアカウントフローの計画に利用する場合、Capacitor から接続してください @capgo/capacitorのソーシャルログインを使用します。 Capacitor-capgo/capacitor-social-loginのネイティブ機能のために @capgo/capacitor-ソーシャルログイン @capgo/capacitor-social-loginの実装詳細のために @capgo/capacitor-パスキー @capgo/capacitor @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 2要素認証 2要素認証