Apple-Login auf Android

Die Apple-Authentifizierung auf Android ist hackig. Apple bietet keine offizielle Unterstützung für Sign in with Apple auf Android, also ist die Lösung etwas umgangssprachlich.

Android verwendet derzeit einen Chrome-Tab, um eine OAuth2-Website anzuzeigen. Diese Methode hat die Herausforderungen:

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Verstehe den Ablauf auf Android.

Lass mich ein Diagramm verwenden, um den Ablauf auf Android zu erklären:

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)

Da du nun die Herausforderungen und den Ablauf kennst, beginnen wir mit der Konfiguration.

Erstellung der Dienst-ID

1. Anmelden bei dem Apple-Entwicklerportal.

2. Klicken Sie auf Identifiers.

   

   Sie sollten eine Bildschirmansicht sehen, die wie folgt aussieht:

   
   1. Stellen Sie sicher, dass dieses Feld lautet App IDs
   2. Stellen Sie sicher, dass Sie Ihr App-ID finden können.

      Hinweis

      Wenn Sie Apple Login für IOS nicht konfiguriert haben, müssen Sie eines erstellen. Für mich habe ich bereits eines erstellt. Die App-ID, die ich verwenden werde, ist me.wcaleniewolny.test.ionic.vue. Wenn Sie keines haben, bitte erstellen Sie eines mithilfe des Schritt zum Erstellen einer App.

3. Stellen Sie sicher, dass die Sign in with Apple Fähigkeit für Ihre App aktiviert ist

   1. Klicken Sie auf Ihre App
   2. Stellen Sie sicher, dass die Sign in with Apple Funktion aktiviert ist
   3. Wenn sie nicht aktiviert ist, aktivieren Sie sie.

4. Zurück zu allen All Identifiers

   

5. Klicken Sie auf App Ids und gehen Sie zur Services IDs

   

6. Erstellen Sie ein neues Identifikatoren

   1. Klicken Sie auf den Plus-Button

      

   2. Auswählen Servcice IDs und klicken Continue

      

   3. Beschreibung und Identifikatoren eingeben und klicken Continuie.

      

      Hinweis

      Dies identifiers will become the clientId that you will pass in the initialize Funktion ÜBERTRAGEN ANDROID_SERVICE_ID für die Backend-Implementierung.

      Bitte speichern Sie es!!!

      Hinweis

      Die Service-ID muss nicht der App-ID entsprechen, aber ich empfehle Ihnen, die Service-ID auf YOUR_APP_ID.service Als Erinnerung verwende ich me.wcaleniewolny.test.ionic.vue für meine App-ID, aber ich verwende ee.forgr.io.ionic.service2 als Service-ID.

   4. Bitte überprüfen Sie die Details und klicken Sie auf Register

      

   5. Klicken Sie auf die neu erstellte Service

      

   6. Aktivieren Sie die Sign in with Apple Option

      

   7. Konfigurieren Sie die Sign In with Apple

      

   8. Stellen Sie sicher, dass sich die Primary App ID auf die im vorherigen Schritt konfigurierte App-ID einstellt

      

   9. Fügen Sie die Domain hinzu, auf der Sie Ihren Backend-Server hosten werden.

      

      Hinweis

      Dieser Backend-Server muss für HTTPS zu laufen. Was die Return URLsFall möchten wir, dass Sie sich nach dem Lesen der nächsten Abschnitte dieses Tutorials und der Konfiguration des Backends zurück zu diesem Thema begeben. Für die Zwecke dieses Tutorials werde ich https://xyz.wcaleniewolny.me/login/callback für die Rückruf-URL und xyz.wcaleniewolny.me Die Domain. Weiter drücken.

   10. Bestätigen Sie die Daten und klicken Sie auf Done

       

   11. Klicken Sie auf Continue

       

   12. Klicken Sie auf Save

       

Das Erstellen der Schlüssel

1. Zurück zu allen All Identifiers

   

2. Klicken Sie auf Keys

   

3. Klicken Sie auf das Plus-Symbol

   

4. Benennen Sie Ihren Schlüssel

   

   Hinweis

   Dieser Name ist nicht wichtig, Sie können alles eintragen.

5. Auswählen Sign in with Apple und klicken Configure

   

6. Auswählen Sie die primäre App-ID und drücken Sie Save

   

   Hinweis

   Dies muss die gleiche App-ID wie die ID in den vorherigen Schritten sein.

7. Klicken Sie auf Continue

   

8. Klicken Sie auf Register

   

9. Copy the key ID and download the key.

   

   Vorsicht

   WICHTIG: Speichern Sie diese ID, im Backend wird sie als KEY_ID. Download the key. Make sure to never share this key.

10. Finden Sie den heruntergeladenen Schlüssel und speichern Sie ihn im Backend-Ordner.

    

Ermitteln Sie die Team-ID

Um es zu verwenden Login with Apple auf Android, benötigen Sie das Team IDEs wird im Backend verwendet.

1. Gehe zu dieser Website und scrolliere nach unten

2. Finde die Team ID

   

Konfiguration der App-Redirect

Wie Sie im Diagramm gesehen haben, führt das Backend einen Schritt aus, der Redirect back to the appdies erfordert manuelle Änderungen an Ihrer App.

1. Ändern Sie das AndroidManifest.xml

   1. Öffnen Sie das Datei, ich werde __CAPGO_KEEP_0__ verwenden AndroidStudio

      

   2. Finden Sie die MainActivity und fügen Sie den folgenden Intent-Filter hinzu

      

      <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. Ändern Sie das MainActivity

   1. Bitte öffnen Sie die MainActivity

      

   2. Fügen Sie den folgenden code hinzu:

      

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

      Vorsicht

      Diese Beispielsanierung geht davon aus, dass Sie keine tiefen Links konfiguriert haben. Wenn Sie das tun, bitte code

Hinweis

Sie haben gerade einen neuen tiefen Link in Ihre App hinzugefügt. Der tiefen Link wird wie folgt aussehen: capgo-demo-app://path Sie können die android:scheme und die android:host um dieses tiefen Link anzupassen. Wichtig: In der Backend-Konfiguration wird dieser tiefen Link zu BASE_REDIRECT_URL

Hintergrundkonfiguration

Ein Backend ist für Android erforderlich, aber die Konfiguration eines Backends wirkt sich auch auf IOS aus. Ein Beispiel-Backend wird bereitgestellt hier

Dieses Beispiel bietet folgendes:

• Ein einfaches JSON-Datenbank
• Eine Möglichkeit, den JWT von Apples Servern anzufordern
• Eine einfache JWT-Verifizierung

Hinweis

Ich verwende PM2 um dieses Beispiel zu hosten. Ein Beispiel ecosystem.config.js kann hier gefunden werden hier

Gegeben alles, was ich in diesem Tutorial gesagt habe, hier ist, wie die env Abschnitt aussehen würde:

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

Mit dem Plugin

Die Verwendung der login Funktion ändert sich nicht, es ist dasselbe wie bei IOS. Bitte haben Sie einen Blick in diese Abschnitt für weitere Informationen. ALLERDINGS, die initialize sollte sich ein bisschen ändern.

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

Gefahr

Hinweis, dass die Hinzufügung redirectUrl WIRD wirkt sich auf IOS aus!!!!!

Die App erstellen

Hinweis

Wenn Sie bereits einen App-Id haben, können Sie diesen Schritt überspringen. Folgen Sie diesem Schritt nicht, wenn Sie Apple Login für IOS konfiguriert haben.

1. Wenn Sie noch keinen App-Id haben, klicken Sie auf die Plus-Taste

   

2. Auswählen App IDs und klicken Sie auf weiter

   

3. Klicken Sie auf Typ App klicken Sie Continue

   

4. Geben Sie die Beschreibung und die App-Id ein

   

5. Aktivieren Sign with Apple Fähigkeit

   

6. Klicken Continue

   

7. Bestätigen Sie die Details und klicken Sie Register

   

Weitermachen von Apple-Login auf Android

Wenn Sie die Apple-Login-Funktion auf Android verwenden Apple-Authentifizierung auf Android um Authentifizierung und Account-Flüsse zu planen, verbinden Sie es mit Verbinden Sie es mit @capgo/capacitor-social-login für die native Fähigkeit in Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-Social-Login für die Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-Passkey für die Implementierungsdetail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometrisch für die Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetail in Zwei-Faktor-Authentifizierung.