Android の Apple ログイン

Android 上の Apple ログインは、ハックです。 Apple は Android での公式サポートを提供していません。 Sign in with Apple Android 上の解決策は、少しハックです。

Android は現在、OAuth2 ウェブサイトを表示するために 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)

今、課題とフローについて理解したので、設定を開始しましょう。

サービス IDを作成する

1. Apple Developer Portal にログインする Apple Developer Portal.

2. Apple Developer Portal の識別子セクション Identifiers.

   

   Apple Developer Portal の識別子画面

   
   1. App ID を見つけることができます。 App IDs
   2. App ID を見つけることができます。

      注意

      __CAPGO_KEEP_0__のAppleログインを設定していない場合は、__CAPGO_KEEP_0__を設定する必要があります。私にはすでに__CAPGO_KEEP_0__が作成されています。使用するアプリIDは me.wcaleniewolny.test.ionic.vue__CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。 __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。.

3. __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。 Sign in with Apple __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。

   1. __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。
   2. __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。 Sign in with Apple __CAPGO_KEEP_0__がなければ、以下の手順で__CAPGO_KEEP_0__を作成してください。
   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と一致する必要はありませんが、サービスIDを設定することをお勧めします。 YOUR_APP_ID.service 使用しているアプリIDは me.wcaleniewolny.test.ionic.vue ですが、サービスIDとして ee.forgr.io.ionic.service2 を使用しています。

   4. 詳細を確認し、 Register

      

   5. 新しく作成したサービス

      

   6. 機能 Sign in with Apple 機能を有効

      

   7. 設定 Sign In with Apple

      

   8. 次のステップで設定したApp IDに設定されていることを確認してください Primary App ID App ID設定のドロップダウン

      

   9. ドメインとリターンURLの設定フィールド

      

      このバックエンド

      は HTTPSで実行されている必要があります。ドメインについては、後で読むこのチュートリアルの次のセクションとバックエンドの設定を実施する後、戻ってきてください。チュートリアルの目的のために、このチュートリアルではHTTPSで実行されているバックエンドを使用します。 Configure button for Sign in with Apple Return URLsEnsure that the 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 Sign in with Appleの有効化と設定 Configure

   

6. 主 App ID を選択し、<button> を押してください。 Save

   

   注意

   前のステップで使用した ID と同じ App ID を入力してください。

7. <button> をクリックしてキー設定を進めてください。 Continue

   

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

   

9. 注意

   

   注意

   IMPORTANT: __CAPGO_KEEP_0__を保存してください。バックエンドでは__CAPGO_KEEP_0__と呼ばれます。 KEY_IDキーをダウンロードしてください。キーを誰かに共有してください。

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

    

チームIDを取得する

Androidで使用するには、チームIDを取得する必要があります。 Login with Apple __CAPGO_KEEP_0__はバックエンドで使用されます。 Team IDバックエンドにアクセスしてください。

1. Androidで使用するには、チームIDを取得する必要があります。 このウェブサイト そして下にスクロール

2. チームIDの Team ID

   

アプリのリダイレクト設定

図では、バックエンドが実行されるステップがあります。 Redirect back to the appこのステップには、アプリの変更が必要です。

1. 変更する AndroidManifest.xml

   1. ファイルを開きます。私は「AndroidManifest.xml」を使用します。 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. plese、Android Studioで 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);
      }

      注意

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

Note

You have just added a new deep link into your app. The deep link will look something like this: capgo-demo-app://path. You can change the android:scheme and the android:host to modify how this deep link looks. Important: 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

この例では、以下の機能が提供されます。

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

注意

この例をホストするために使用しているのは PM2 この例の例は ecosystem.config.js ここ このチュートリアルで述べたすべてのことを考慮した場合、このセクションの構成は次のようになります。

__CAPGO_KEEP_0__ env __CAPGO_KEEP_0__

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

プラグインの使用

関数の使用方法は変わりません。iOSと同じです。詳しくはそのセクションを参照してください。 login ただし、 メソッドは少し変わります。クリップボードにコピー initialize 危険

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

危険

__CAPGO_KEEP_0__ redirectUrl WILL IOS に影響します!!!!

アプリを作成する

注意

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ログインから続けて

Capacitorを使用している場合 AndroidでAppleログイン 認証とアカウントフローの計画に使用する場合、Capacitorを Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login 実装詳細のために@capgo/capacitor-passkeyで @capgo/capacitor-native-biometric 実装詳細のために@capgo/capacitor-native-biometric、 2要素認証 実装詳細のために2要素認証。