Apple-Anmeldung auf Android

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

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

• Schwierige Konfiguration
• Eine Backend-Instanz ist erforderlich

Das 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)

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

Erstellung der Dienst-ID

1. Anmelden in das Apple-Entwicklerportal.

2. Klicken Sie auf Identifiers.

   

   Sie sollten eine Seite sehen, die wie folgt aussieht:

   
   1. Stellen Sie sicher, dass dieses Feld 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, bitte erstellen Sie eines mithilfe des App erstellen Schritt.

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

   1. Klicken Sie auf Ihre App
   2. Stellen Sie sicher, dass Sign in with Apple Die Funktion ist aktiviert
   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. Beschreiben Sie eine Beschreibung und Identifikatoren und klicken Sie Continuie.

      

      Hinweis

      Dies identifiers wird zum clientId dass Sie in der initialize FUNKTION 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 die Service-ID.

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

      

   5. Klicken Sie auf die neu erstellte Dienstleistungs-ID

      

   6. Aktivieren Sie die Sign in with Apple Option

      

   7. Konfigurieren Sie die Sign In with Apple

      

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

      

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

      

      Hinweis

      Dieses Backend muss auf HTTPS laufen. Für die Return URLskönnten Sie sich nach dem Lesen des nächsten Abschnitts dieser Anleitung und nach der Konfiguration des Backends zurückkommen. Für die Zwecke dieser Anleitung werde ich https://xyz.wcaleniewolny.me/login/callback für die Rückruf-URL und xyz.wcaleniewolny.me die Domain verwenden. Klicken 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. Ihre Schlüsselbezeichnung angeben

   

   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: Speichern Sie diese ID, im Backend wird sie als KEY_IDladen Sie den Schlüssel herunter. 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 es zu verwenden Login with Apple auf Android benötigen Sie die Team ID. Es wird im Backend verwendet.

1. Gehe zu dieser Website und scroll down

2. Finden Sie die Team ID

   

Die App-umleitung konfigurieren

Wie Sie im Diagramm sehen können, führt der Backend einen Schritt namens Redirect back to the appdurch. Dies erfordert manuelle Änderungen an Ihrer App.

1. Ändern Sie den AndroidManifest.xml

   1. Öffnen Sie das Datei, ich werde 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 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 angenommen, dass Sie keine tiefen Links konfiguriert haben. Wenn Sie bereits tiefen Links konfiguriert haben, passen Sie bitte den 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 dies ändern android:scheme und das android:host um zu ändern, wie diese tiefe Verlinkung aussieht. Wichtig: In der Backend-Konfiguration wird diese tiefe Verlinkung zu BASE_REDIRECT_URL

Backend-Konfiguration

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

Dieses Beispiel bietet folgendes:

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

Anmerkung

Ich verwende PM2 um dieses Beispiel zu hosten. Ein Beispiel ecosystem.config.js finden Sie hier Da ich in diesem Tutorial alles gesagt habe, sieht die

Sektion so aus: env = Dienst-ID

• ANDROID_SERVICE_ID = App-ID
• IOS_SERVICE_ID Zwischenablage kopieren

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

__CAPGO_KEEP_0__

Die Verwendung des login Funktion ändert sich nicht, sie ist gleich wie bei IOS. Bitte haben Sie einen Blick in diese 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 einen Einfluss auf IOS haben !!!!!

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. Wählen Sie App IDs und klicken Sie auf Weiter

   

3. Auswählen und klicken Sie auf App und klicken Sie auf Weiter 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