Apple Login auf Android

Apple-Login auf Android ist hacky. Apple bietet offiziell keine Unterstützung für Sign in with Apple Da Apple offiziell keine Unterstützung für

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

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Verständnis des Flusses auf Android.

Lassen Sie mich 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)

Jetzt, da Sie sich der Herausforderungen und des Flusses bewusst sind, beginnen wir mit der Konfiguration.

Erstellung der Dienst-ID

1. Anmeldung im Apple Developer Portal.

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 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 Erstellen Sie App-Schritts.

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 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. Geben Sie eine Beschreibung und Identifikatoren ein und klicken Sie Continuie.

      

      Hinweis

      Dies identifiers wird zu dem clientId das Sie bei der Weitergabe verwenden werden initialize funktion AND ANDROID_SERVICE_ID für den Backend.

      Bitte speichern Sie es!!!

      Hinweis

      Dienst-ID muss nicht der App-ID entsprechen, aber ich empfehle, die Dienst-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 Dienst-ID.

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

      

   5. Klicken Sie auf die neu erstellte Dienst-ID

      

   6. Aktivieren Sie die Option Sign in with Apple Option

      

   7. Konfigurieren Sie die Sign In with Apple

      

   8. Stellen Sie sicher, dass Primary App ID auf die in Schritt 1 konfigurierte App-ID festgelegt ist

      

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

      

      Hinweis

      Dieser Backend-Server muss soll auf HTTPS laufen. Wenn Sie sich für die Return URLs, möchten Sie vielleicht nach dem Lesen des nächsten Abschnitts dieses Tutorials und nach der Konfiguration des Backends zurückkehren. Für die Zwecke dieses Tutorials werde ich https://xyz.wcaleniewolny.me/login/callback für die Rückruf-URL und xyz.wcaleniewolny.me den Domain-Namen verwenden. 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

       

Schlüssel erstellen

1. Zurück zu allen All Identifiers

   

2. Klicken Sie auf Keys

   

3. Klicken Sie auf das Plus-Symbol

   

4. Schlüssel Ihren Schlüssel benennen

   

   Hinweis

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

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. Kopieren Sie die Schlüssel-ID und laden Sie den Schlüssel herunter.

   

   Vorsicht

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

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

    

Das Team-ID-Beziehen

Um dieses Feature zu nutzen, benötigen Sie Login with Apple auf Android, die Team IDSie wird im Backend verwendet.

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

2. Finden Sie die Team ID

   

Anwendungsrouting konfigurieren

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

1. Ändern Sie den AndroidManifest.xml

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

      

   2. Finden Sie das 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 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

      Bei diesem Beispiel wird angenommen, dass keine Deep-Links konfiguriert sind. Wenn Sie bereits Deep-Links haben, passen Sie bitte den code an

Hinweis

Sie haben gerade einen neuen Deep-Link in Ihre App hinzugefügt. Der Deep-Link wird wie folgt aussehen: capgo-demo-app://path. Sie können den android:scheme und den android:host anpassen, um zu bestimmen, wie dieser Deep-Link aussieht. Wichtig: In der Backend-Konfiguration wird dieser tiefe 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 wird bereitgestellt hier

Dieses Beispiel bietet folgendes:

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

Hinweis

Ich verwende PM2 um dieses Beispiel zu hosten. Ein Beispiel kann hier gefunden werden. 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 nehmen Sie einen Blick auf diese Abschnitt für weitere Informationen. ALLERDINGS, die initialize Der Vorgang ändert sich ein bisschen.

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

Gefahr

Hinweis: Bei der Hinzufügung redirectUrl WIRD eine Auswirkung auf IOS haben !!!!!

Die App erstellen

Hinweis

Wenn Sie bereits eine 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 Weiter

   

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 Register

   

Fortsetzen von Apple-Login auf Android

Wenn Sie Apple-Login auf Android für die Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.