Apple-Login auf Android

Apple-Login auf Android ist umständlich. Apple bietet keine offizielle Unterstützung für Sign in with Apple auf Android, daher ist die Lösung leicht umständlich.

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

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Verständnis des Flusses auf Android.

Ich möchte ein Diagramm verwenden, um den Fluss 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 Sie nun die Herausforderungen und den Ablauf kennen, können wir mit der Konfiguration beginnen.

Erstellung der Dienst-ID

1. Anmeldung im Apple-Entwicklerportal.

2. Klicken Sie auf Identifiers.

   

   Sie sollten eine Seite sehen, die wie folgt aussieht:

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

      Hinweis

      Wenn Sie für iOS keinen Apple Login konfiguriert haben, müssen Sie einen erstellen. Für mich habe ich bereits einen erstellt. Der App ID, den ich verwenden werde, ist me.wcaleniewolny.test.ionic.vue Wenn Sie keinen haben, erstellen Sie bitte einen mithilfe des create app Schritts.

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

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

4. Zurück zu allen All Identifiers

   

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

   

6. Erstellen Sie einen neuen Identifikator

   1. Klicken Sie auf die Plus-Taste

      

   2. Auswählen Servcice IDs und klicken Sie Continue

      

   3. Eingeben Sie eine Beschreibung und einen Identifikator und klicken Sie Continuie.

      

      Hinweis

      Dies identifiers wird zum clientId den Sie bei der initialize Funktion UND ANDROID_SERVICE_ID für den Backend-Server übergeben.

      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 die Service-ID.

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

      

   5. Klicken Sie auf den neu erstellten Service

      

   6. Aktivieren Sie die Sign in with Apple Option

      

   7. Konfigurieren Sie Sign In with Apple

      

   8. Stellen Sie sicher, dass der Primary App ID auf die im vorherigen Schritt konfigurierte App-ID festgelegt ist

      

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

      

      Hinweis

      Dieser Backend-Server muss auf HTTPS laufen. Für die Return URLskönnen Sie sich nach dem Lesen des nächsten Abschnitts dieses Tutorials und nach der Konfiguration des Backends zurückkommen. Für die Zwecke dieses Tutorials werde ich https://xyz.wcaleniewolny.me/login/callback für die Rückgabeadresse und xyz.wcaleniewolny.me Drücken Sie auf Weiter.

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

       

   11. Klicken Sie auf Continue

       

   12. Klicken Sie auf Save

       

Erstellung 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. Wählen Sie die primäre App-ID aus 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. Kopieren Sie die Schlüssel-ID und laden Sie den Schlüssel herunter.

   

   Vorsicht

   WICHTIG: Speichere diese ID, im Backend wird sie als KEY_ID Laden Sie die Schlüssel. Stellen Sie sicher, dass Sie diesen Schlüssel niemals teilen.

10. Finden Sie das heruntergeladene Schlüssel und speichern Sie es im Backend-Ordner.

    

Ermitteln Sie die Team-ID

Um Login with Apple für Android zu verwenden, müssen Sie die Team ID Es wird im Backend verwendet.

1. Gehe zu Diese Website und scrollen Sie nach unten

2. Finden Sie die Team ID

   

Konfigurieren Sie die App-Weiterleitung

Wie Sie im Diagramm sehen können, führt der 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 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 den 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);
      }

      Vorsicht

      Bei diesem Beispiel wird davon ausgegangen, dass keine tiefen Links konfiguriert sind. Wenn Sie bereits welche haben, passen Sie bitte den code an.

Hinweis

Sie haben gerade eine neue tiefe Verknüpfung in Ihre App hinzugefügt. Die tiefe Verknüpfung wird wie folgt aussehen: capgo-demo-app://path Sie können den android:scheme und den android:host ändern, um die Aussehen dieser Verknüpfung zu ändern. Wichtig: In der Backend-Konfiguration wird diese Verknüpfung zu BASE_REDIRECT_URL

Backend-Konfiguration

Ein Backend ist für Android erforderlich, aber die Konfiguration eines Backends wird auch auf IOS Auswirkungen haben. Ein Beispiel-Backend ist hier verfügbar Ein Beispiel-Backend ist hier verfügbar.

Dieses Beispiel bietet folgendes:

• Ein einfacher JSON-Datenbank
• Eine Möglichkeit, den JWT von Apple's Servern abzurufen
• Eine einfache JWT-Verifizierung

Hinweis

Ich verwende PM2 um dieses Beispiel zu hosten. Ein Beispiel ecosystem.config.js kann hier gefunden werden Gegeben alles, was ich in diesem Tutorial gesagt habe, hier ist, wie die

Abschnitt aussehen würde: env __CAPGO_KEEP_0__

• 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 login Funktion ändert sich nicht, sie ist gleich wie bei IOS. Bitte nehmen Sie einen Blick in diesen Abschnitt, um mehr zu erfahren. ALLERDINGS, die initialize Methode ändert sich ein bisschen.

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

Gefahr

Hinweis: Durch Hinzufügen von redirectUrl __CAPGO_KEEP_0__ wird IOS betroffen!!!!

Die App erstellen

Hinweis

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

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

   

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

   

3. Klicken Sie auf Typ App und klicken Sie Continue

   

4. Beschreibung und App-ID eingeben

   

5. Aktivieren Sign with Apple Fähigkeit

   

6. Klicken Continue

   

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

   

Fortsetzen Sie von Apple-Login auf Android

Wenn Sie die Verwendung von Apple-Login auf Android zum Planen der Authentifizierung und der Kontoflows verbinden, verbinden Sie es mit Verwendung von @capgo/capacitor-social-login für die native Fähigkeit in Verwendung von @capgo/capacitor-social-login, Verwendung von @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Verwendung von @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-Passkey @capgo/capacitor-native-biometrische für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.