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

Zeigen Sie mir ein Diagramm, 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.

Dienst-ID erstellen

1. Anmelden in das 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. Das App-ID, das ich verwenden werde, ist me.wcaleniewolny.test.ionic.vue. Wenn Sie keines haben, erstellen Sie bitte eines mithilfe des Schritts zur App-Erstellung.

3. Stellen Sie sicher, dass die Sign in with Apple Funktion 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 zur Übersicht 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-Schaltfläche

      

   2. Auswählen Servcice IDs und klicken Continue

      

   3. Beschreiben Sie eine Beschreibung und Identifikatoren und klicken Continuie.

      

      Hinweis

      Dies identifiers wird zum clientId den 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, ich verwende 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 Register

      

   5. Klicken Sie auf die neu erstellte Dienst-ID

      

   6. Option Sign in with Apple Option

      

   7. für die Dienst-ID Sign In with Apple

      

   8. Konfigurations-Button für Sign in with Apple für die Dienst-ID, dass sichergestellt ist, dass Primary App ID wird auf die im vorherigen Schritt konfigurierte App-ID festgelegt

      

   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 Rückruf-URL und die Domain können Sie Return URLsfür die Rückruf-URL und https://xyz.wcaleniewolny.me/login/callback die Domain verwenden. Klicken Sie auf Weiter. xyz.wcaleniewolny.me Hinweis: Für die Zwecke dieses Tutorials werde ich

   10. Bestätigen Sie die Daten und klicken Sie 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 den primären App-ID und drücken Sie Save

   

   Hinweis

   Dies muss die gleiche 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.

   

   Vorsicht

   WICHTIG: Speichern Sie diese ID, im Backend wird sie als KEY_ID. Laden Sie die 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 Login with Apple auf Android zu verwenden, müssen Sie die Team ID. Es wird im Backend verwendet.

1. Gehe zu dieser Website und scrolliere nach unten

2. Finde die Team ID

   

Konfiguration der App-Weiterleitung

Wie du im Diagramm sehen kannst, führt der Backend einen Schritt aus, der Redirect back to the apperfordert manuelle Änderungen an deiner App.

1. Ändere den AndroidManifest.xml

   1. Öffne das Datei, ich werde AndroidStudio

      

   2. Finde die 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. Ändern Sie den MainActivity

   1. Bitte öffnen Sie das MainActivity.java-File in Android Studio MainActivity

      

   2. code zum Hinzufügen von MainActivity für die Verarbeitung von Deep-Links

      

      @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);
      }

      Bei diesem Beispiel wird angenommen, dass keine Deep-Links konfiguriert sind. Wenn Sie welche haben, passen Sie bitte die __CAPGO_KEEP_0__ an

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

]}

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 zu bestimmen, wie diese tiefe Verknüpfung aussieht. Wichtig: In der Backend-Konfiguration wird diese tiefe 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 wird hier

Dieses Beispiel bietet folgende Funktionen:

• Ein einfaches JSON-Datenbank-Beispiel
• Auf Wunsch der JWT von Apples Servern
• Einfache JWT-Verifizierung

Hinweis

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

Sektion aussehen würde: env = Dienst-ID

• ANDROID_SERVICE_ID = App-ID
• IOS_SERVICE_ID __CAPGO_KEEP_0__

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 verwenden

Die Verwendung von login funktionierts nicht anders, als bei IOS. Bitte haben Sie einen Blick in diesen Abschnitt, um mehr zu erfahren. ALLERDINGS, der 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 von redirectUrl WIRD iOS beeinflussen !!!!!

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 keinen App-Id haben, klicken Sie auf den Plus-Button

   

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

   

3. Klicken Sie auf den Typ App und klicken Continue

   

4. Beschreibung und App-ID eingeben

   

5. Aktivieren Sign with Apple Fähigkeit

   

6. Klicken Continue

   

7. Details bestätigen und klicken Register

   

Bleib bei 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-biometrisch und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.