Apple Anmeldung bei Android

Apple Die Anmeldung auf Android ist schwierig. Apple bietet keine offizielle Unterstützung für Sign in with Apple auf Android, daher ist die Lösung etwas hackig.

Android verwendet derzeit Chrome-Tabs, um eine OAuth2-Website anzuzeigen. Dieser Ansatz birgt folgende Herausforderungen:

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Den Ablauf auf Android verstehen.

Lassen Sie mich den Ablauf auf Android anhand eines Diagramms erläutern:

flowchart TD
    A("await SocialLogin.login()") -->|Im Plugin behandelt|B(Anmelde-URL generieren)
    B --> |Link übergeben| C (Öffnen Sie den Chrome-Browser)
    C -> D (Warten Sie, bis sich der Benutzer anmeldet)
    D --> |Apple leitet zu Ihrem Backend weiter|E(Verarbeitet die von Apple zurückgegebenen Daten)
    E -> F (Zurück zur App weiterleiten)
    F -> G(Zurück zu JS)

Nachdem Sie nun die Herausforderungen und den Ablauf kennen, beginnen wir mit der Konfiguration.

Erstellen der Service-ID

1. Melden Sie sich beim Apple Entwicklerportal an.

2. Klicken Sie auf Identifiers.

   

   Sie sollten einen Bildschirm sehen, der so aussieht:

   
   1. Stellen Sie sicher, dass in diesem Feld App IDs steht.
   2. Stellen Sie sicher, dass Sie Ihre App-ID finden können.

      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 noch keine haben, erstellen Sie bitte eine mit dem Schritt „App erstellen“.

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

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

4. Gehen Sie zurück zu „Alle Bezeichner“.

   

5. Klicken Sie auf „App-IDs“ und gehen Sie zu „Dienst-IDs“.

   

6. Erstellen Sie eine neue Kennung

   1. Klicken Sie auf den Plus-Button

      

   2. Wählen Sie „Dienst-IDs“ und klicken Sie auf Continue

      

   3. Geben Sie eine Beschreibung und eine Kennung ein und klicken Sie auf Continuie.

      

      Dieser identifiers wird zum clientId, den Sie in der Funktion initialize UND ANDROID_SERVICE_ID für das Backend übergeben.

      Bitte speichern!!!

      Die Service-ID muss nicht mit der App-ID übereinstimmen, ich empfehle jedoch, die Service-ID auf YOUR_APP_ID.service festzulegen. Zur Erinnerung: Ich verwende me.wcaleniewolny.test.ionic.vue als meine App-ID, aber ich verwende ee.forgr.io.ionic.service2 als Dienst-ID.

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

      

   5. Klicken Sie auf den neu erstellten Dienst

      

   6. Aktivieren Sie die Option Sign in with Apple

      

   7. Konfigurieren Sie den Sign In with Apple

      

   8. Stellen Sie sicher, dass die „Primäre App-ID“ auf die im vorherigen Schritt konfigurierte App-ID eingestellt ist

      

   9. Fügen Sie die Domäne hinzu, auf der Sie Ihr Backend hosten möchten.

      Dieses Backend muss auf HTTPS ausgeführt werden. Was die „Rückgabe-URLs“ betrifft, möchten Sie möglicherweise darauf zurückkommen, nachdem Sie den nächsten Abschnitt dieses Tutorials gelesen und das Backend konfiguriert haben. Für die Zwecke dieses Tutorials verwende ich https://xyz.wcaleniewolny.me/login/callback als Rückgabe-URL und xyz.wcaleniewolny.me als Domäne. Drücken Sie Weiter.

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

       

   11. Klicken Sie auf Continue

       

   12. Klicken Sie auf Save

       

Schlüssel erstellen

1. Gehen Sie zurück zu „Alle Bezeichner“.

   

2. Klicken Sie auf Keys

   

3. Klicken Sie auf das Plus-Symbol

   

4. Benennen Sie Ihren Schlüssel

   

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

5. Wählen Sie Sign in with Apple und klicken Sie auf Configure

   

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

   

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

7. Klicken Sie auf Continue

   

8. Klicken Sie auf Register

   

9. Kopieren Sie die Schlüssel-ID und laden Sie den Schlüssel herunter.

   

   WICHTIG: Speichern Sie diese ID, im Backend heißt sie KEY_ID. Laden Sie den Schlüssel herunter. Stellen Sie sicher, dass Sie diesen Schlüssel niemals weitergeben.

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

    

Abrufen der Team-ID

Um Login with Apple auf Android verwenden zu können, benötigen Sie die „Team-ID“. Es wird im Backend verwendet.

1. Gehen Sie zu dieser Website und scrollen Sie nach unten

2. Suchen Sie die „Team-ID“.

   

Konfigurieren der App-Weiterleitung

Wie Sie im Diagramm gesehen haben, führt das Backend einen Schritt namens „Zurück zur App umleiten“ aus. Dies erfordert manuelle Änderungen an Ihrer App.

1. Ändern Sie AndroidManifest.xml

   1. Öffnen Sie die Datei, ich verwende AndroidStudio

      

   2. Suchen Sie nach 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 MainActivity

   1. Bitte öffnen Sie das 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);
      }

      In diesem Beispiel wird davon ausgegangen, dass Sie keine Deep Links konfiguriert haben. Passen Sie in diesem Fall bitte den Code an

Note

Sie haben gerade einen neuen Deep-Link zu Ihrer App hinzugefügt. Der Deep-Link sieht etwa so aus: capgo-demo-app://path. Sie können android:scheme und android:host ändern, um das Aussehen dieses Deep Links zu ändern. Wichtig: In der Backend-Konfiguration wird dieser Deep Link zu BASE_REDIRECT_URL

Backend-Konfiguration

Für Android ist ein Backend erforderlich, aber die Konfiguration eines Backends wirkt sich auch auf IOS aus. Ein Beispiel-Backend finden Sie hierDieses Beispiel bietet Folgendes:

• Eine einfache JSON-Datenbank – Eine Möglichkeit, JWT von den Servern von Apple anzufordern
• Eine einfache JWT-Verifizierung

Note

Ich verwende PM2, um dieses Beispiel zu hosten. Ein Beispiel ecosystem.config.js finden Sie hier

Angesichts all dessen, was ich in diesem Tutorial gesagt habe, würde der Abschnitt env folgendermaßen aussehen:

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

Verwendung des Plugins

Die Verwendung der Funktion login ändert sich nicht, sie ist dieselbe wie bei IOS. Weitere Informationen finden Sie in diesem Abschnitt. Allerdings ändert sich die Methode initialize ein wenig.

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

Danger

Beachten Sie, dass das Hinzufügen von redirectUrl Auswirkungen auf IOS haben wird !!!!!

Erstellen der App

Note

Wenn Sie bereits über eine App-ID verfügen, können Sie diesen Schritt überspringen. Führen Sie diesen Schritt nicht aus, wenn Sie Apple Login für IOS konfiguriert haben.

1. Wenn Sie noch keine App-ID haben, klicken Sie auf die Plus-Schaltfläche

   

2. Wählen Sie „App-IDs“ und klicken Sie auf „Weiter“.

   

3. Klicken Sie auf Typ App und klicken Sie auf Continue

   

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

   

5. Aktivieren Sie die Sign with Apple-Funktion

   

6. Klicken Sie auf Continue

   

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