Appleログイン

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

難しい設定

• バックエンドが必要
• 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 Developer Portalの「識別子」セクションをクリックしてください.

2. Apple Developer Portalの「識別子」画面が表示されます Identifiers.

   

   Apple Developer Portalの識別子画面

   
   1. Apple Developer Portalにログイン App IDs
   2. App ID を見つけることができることを確認してください。

      注意

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

3. アプリの Sign in with Apple 機能が有効になっていることを確認してください。

   1. アプリを選択
   2. 機能が有効になっていることを確認してください。 Sign in with Apple __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 保存してください!!!

      注意

      注意

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

   4. を使用しています。 Register

      

   5. サービスIDの登録を確認

      

   6. 新しく作成したサービスID Sign in with Apple 機能

      

   7. AppleとAndroidの両方で機能するように Sign In with Apple

      

   8. 次のステップで設定したApp IDが Primary App ID App IDのドロップダウンメニュー

      

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

      

      このバックエンド

      HTTPSで動作している必要があります。 このバックエンド は Return URLs,このチュートリアルの次のセクションを読み終わって、バックエンドを設定した後にもう一度このページに戻ってみてください。 https://xyz.wcaleniewolny.me/login/callback このチュートリアルの目的のために、以下のURLとドメインを使用します。 xyz.wcaleniewolny.me ドメインとリターンURLを設定したら、次のボタンをクリックしてください。

   10. 設定した情報を確認し、次のボタンをクリックしてください。 Done

       

   11. サービス設定の続きに進むには、以下のボタンをクリックしてください。 Continue

       

   12. サービス設定の保存には、以下のボタンをクリックしてください。 Save

       

キーを作成する

1. __CAPGO_KEEP_0__ All Identifiers

   

2. Cloudflare Keys

   

3. GitHub

   

4. code

   

   CLI

   npm

5. bun Sign in with Apple Keys セクションのApple Developer Portalにクリックしてください Configure

   

6. 主 App ID を選択し、Enter を押す Save

   

   注意

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

7. ボタンをクリック Continue

   

8. キー生成の登録ボタン Register

   

9. キー ID とダウンロードボタンの画面

   

   注意

   重要: このIDを保存してください。バックエンドでは KEY_IDをダウンロードしてください。秘密鍵を誰かに共有してはなりません。

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

    

チームIDを取得する

Androidで使用するには Login with Apple が必要です。バックエンドで使用されます。 Team IDチームID

1. このウェブサイトに移動してください このウェブサイト 下にスクロールしてください

2. 以下の場所を見つけてください Team ID

   

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

図では、バックエンドがアプリにリダイレクトするために必要なステップを実行します。このステップは、手動でアプリの設定を変更する必要があります。 Redirect back to the appアプリの設定

1. ファイルを開いてください。ここでは AndroidManifest.xml

   1. AndroidManifest.xmlファイルをAndroid Studioで開いてください AndroidStudio

      

   2. AppleとAndroidの両方で機能するSocial Loginプラグインを使用するには、 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.javaファイルをAndroid Studioで開いてください MainActivity

   1. MainActivityに次のコードを追加してください MainActivity

      

   2. Add the following 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);
      }

      MainActivity.javaファイルの設定

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

注意

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

バックエンド設定

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

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

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

注意

私は PM2 この例をホストするために使用します。例は ecosystem.config.js ここ このチュートリアルで述べたすべてのことを考慮した場合、以下のようになります。

items env セクションの見た目は次のようになります:

• 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'
  }
})

危険

注意：Apple Loginの設定に追加する redirectUrl 追加すると iOSに影響します!!!!

アプリを作成する

注意

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

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

   

2. 選択 App IDs __CAPGO_KEEP_0__

   

3. タイプをクリック App __CAPGO_KEEP_0__ Continue

   

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

   

5. 有効 Sign with Apple 機能

   

6. クリック Continue

   

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

   

AndroidのAppleログインから続けて

あなたが使用している AndroidのAppleログイン 認証とアカウントフローの計画に使用している場合、Appleログインを 使用する@capgo/capacitor-social-login 使用する@capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey Capgoの実装詳細については、@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric Capgoの実装詳細については、@capgo/capacitor-native-biometricを参照してください。 2要素認証 2要素認証の実装詳細については、2要素認証を参照してください。