Apple-Login auf Android

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

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

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Das Verständnis des Flusses auf Android.

Lassen Sie 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 Sie sich nun der Herausforderungen und des Flusses bewusst sind, können wir mit der Konfiguration beginnen.

Erstellung der Dienst-ID

1. Melden Sie sich 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 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.vueWenn Sie keines haben, erstellen Sie bitte eines mithilfe des Schritt: App erstellen.

3. Stellen Sie sicher, dass die Sign in with Apple Klicken Sie auf Ihre App

   1. Wählen Sie Ihre App aus der Liste
   2. Fähigkeit für Ihre App aktiviert ist Sign in with Apple Klicken Sie auf Ihre App
   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 eine neue Identifikator

   1. Klicken Sie auf die Plus-Taste

      

   2. Auswählen Servcice IDs und klicken Continue

      

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

      

      Hinweis

      Dies identifiers wird zum clientId den Sie in der initialize Funktion ÜBERTRAGEN UND ANDROID_SERVICE_ID für den Backend.

      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 das Sign In with Apple

      

   8. Stellen Sie sicher, dass die 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. Wie auch immer, für Return URLs, Sie möchten vielleicht nach diesem Abschnitt des Tutorials zurückkehren und nachdem Sie die Backend-Konfiguration durchgeführt haben. https://xyz.wcaleniewolny.me/login/callback für die Rückruf-URL und xyz.wcaleniewolny.me den Domain-Namen. 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. Gehen Sie 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 Haupt-App-ID und drücken Sie Save

   

   Hinweis

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

7. Auf Continue

   

8. Auf Register

   

9. Die Schlüssel-ID kopieren und den Schlüssel herunterladen.

   

   Achtung

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

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

    

Erhaltung der Team-ID

Um Login with Apple auf Android zu verwenden, müssen Sie die Team IDerhalten. Sie wird im Backend verwendet.

1. Gehe zu dieser Website und scrollen Sie nach unten

2. Finden Sie die Team ID

   

Konfigurieren Sie die App-Redirect

Wie Sie im Diagramm gesehen haben, 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. Finde das MainActivity und füge 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. Ändere das MainActivity

   1. Wenn du möchtest, öffne das MainActivity

      

   2. Füge 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);
      }

      Achtung

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

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 anpassen, um zu bestimmen, wie dieser tiefen Link aussieht. Wichtig: In der Backend-Konfiguration wird dieser tiefen Link zu BASE_REDIRECT_URL

Backend-Konfiguration

Ein Backend ist für Android erforderlich, aber die Konfiguration eines Backends wird auch den IOS-Einfluss beeinflussen. Ein Beispiel-Backend wird bereitgestellt hier

Dieses Beispiel bietet folgendes:

• Ein einfaches JSON-Datenbank
• Eine Möglichkeit, den JWT von Apples Servern zu erhalten
• 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 man das env Abschnitt würde so 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 login Funktion ändert sich nicht, es ist dasselbe wie bei IOS. Bitte haben Sie einen Blick in diesen Abschnitt für weitere Informationen. 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, dass die Hinzufügung redirectUrl WIRD Ein IOS-Betrieb beeinflussen!!!!

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 noch keine App-ID besitzen, klicken Sie auf die Plus-Taste

   

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

   

3. Klicken Sie auf den Typ App und 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

   

Fortsetzung von Apple-Login auf Android

Wenn Sie die Verwendung von Apple-Login auf Android zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Verwendung von @capgo/capacitor-social-login Für die native Fähigkeit in Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-social-login Für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-Passwort Zur Implementierungsdetail in @capgo/capacitor-Passwort @capgo/capacitor-Native-Biometrie Zur Implementierungsdetail in @capgo/capacitor-Native-Biometrie, und Zweifaktor-Authentifizierung Zur Implementierungsdetail in Zweifaktor-Authentifizierung.