Apple Login unter Android

Apple Login auf Android ist hacky. Apple bietet keinen offiziellen Support dafür Sign in with Apple auf Android, daher ist die Lösung etwas hacky.

Android nutzt aktuell Chrome Tabs, um eine OAuth2-Website anzuzeigen. Dieser Ansatz bringt folgende Herausforderungen mit sich:

• Schwierige Konfiguration
• Ein Backend ist erforderlich

Den Flow auf Android verstehen.

Ich nutze ein Diagramm, um den Flow 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 du die Herausforderungen und den Flow kennst, lass uns mit der Konfiguration beginnen.

Service-ID erstellen

1. Logge dich ein bei Apple Developer Portal.

2. Klicken Sie auf Identifiers.

   

   Du solltest einen Bildschirm sehen, der so aussieht:

   
   1. Stelle sicher, dass in diesem Feld steht App IDs
   2. Vergewissere dich, dass du deine App ID findest.

      Hinweis

      Falls du Apple Login für iOS noch nicht konfiguriert hast, musst du dies nachholen. Ich habe bereits eine erstellt. Die App ID, die ich verwende, ist me.wcaleniewolny.test.ionic.vue. Falls du noch keine hast, erstelle bitte eine über den Schritt „App erstellen“.

3. Stelle sicher, dass die Sign in with Apple Capability für deine App aktiviert ist

   1. Klicke auf deine App
   2. Stelle sicher, dass Sign in with Apple Capability ist aktiviert
   3. Falls sie nicht aktiviert ist, aktiviere sie.

4. Zurück zu allen All Identifiers

   

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

   

6. Einen neuen Identifier erstellen

   1. Klicke auf den Plus-Button

      

   2. Wähle Servcice IDs und klicke auf Continue

      

   3. Beschreibung und Identifier eingeben und klicken Continuie.

      

      Hinweis

      Dies identifiers wird zu der clientId that you will pass in the initialize Funktion übergibst UND ANDROID_SERVICE_ID für das Backend.

      Bitte speichere sie!!!

      Hinweis

      Die Service ID muss nicht mit der App ID übereinstimmen, aber ich empfehle, die Service ID auf YOUR_APP_ID.service zu setzen. Zur Erinnerung: Ich verwende me.wcaleniewolny.test.ionic.vue als meine App ID, nutze aber ee.forgr.io.ionic.service2 als Service ID.

   4. Bitte überprüfe die Details und klicke Register

      

   5. Klicke auf den neu erstellten Service

      

   6. Aktiviere Sign in with Apple Option

      

   7. Konfiguriere Sign In with Apple

      

   8. Stelle sicher, dass Primary App ID auf die im vorherigen Schritt konfigurierte App ID gesetzt ist

      

   9. Füge die Domain hinzu, auf der du dein Backend hostest.

      

      Hinweis

      Dieses Backend muss über HTTPS laufen. Was das Return URLsbetrifft, kannst du hierher zurückkommen, nachdem du den nächsten Abschnitt dieses Tutorials gelesen und das Backend konfiguriert hast. Für dieses Tutorial verwende ich https://xyz.wcaleniewolny.me/login/callback als Return-URL und xyz.wcaleniewolny.me als Domain. Klicke auf Weiter.

   10. Bestätige die Angaben und klicke auf Done

       

   11. Klicken Sie auf Continue

       

   12. Klicken Sie auf Save

       

Erstellen des Keys

1. Zurück zu allen All Identifiers

   

2. Klicken Sie auf Keys

   

3. Auf das Plus-Icon klicken

   

4. Key benennen

   

   Hinweis

   Dieser Name ist nicht wichtig, du kannst ihn frei wählen.

5. Wähle Sign in with Apple und klicke auf Configure

   

6. Wähle die primäre App ID aus und drücke Save

   

   Hinweis

   Dies muss dieselbe App ID sein wie in den vorherigen Schritten.

7. Klicken Sie auf Continue

   

8. Klicken Sie auf Register

   

9. Key ID kopieren und Key herunterladen.

   

   Achtung

   WICHTIG: Speichere diese ID; im Backend wird sie KEY_ID. genannt. Lade den Key herunter. Teile diesen Key niemals mit anderen.

10. Suche den heruntergeladenen Key und speichere ihn im Backend-Ordner.

    

Team ID abrufen

Um zu nutzen Login with Apple musst du unter Android die Team IDabrufen. Diese wird im Backend verwendet.

1. Gehe zu diese Website und scrolle nach unten

2. Suche nach Team ID

   

App-Redirect konfigurieren

Wie im Diagramm zu sehen, führt das Backend einen Schritt namens Redirect back to the appaus. Dies erfordert manuelle Änderungen an deiner App.

1. Ändere die AndroidManifest.xml

   1. Öffne die Datei, ich verwende hier AndroidStudio

      

   2. Suche nach 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 die MainActivity

   1. Bitte öffne die MainActivity

      

   2. Füge das folgende 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

      Dieses Beispiel geht davon aus, dass keine Deep Links konfiguriert sind. Falls doch, passe code entsprechend an

Hinweis

Du hast gerade einen neuen Deep Link in deine App hinzugefügt. Der Deep Link sieht etwa so aus: capgo-demo-app://path. Du kannst den android:scheme und android:host um das Aussehen dieses Deep Links anzupassen. Wichtig: In der Backend-Konfiguration wird dieser Deep 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:

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

Hinweis

Ich nutze PM2 um dieses Beispiel zu hosten. Ein Beispiel ecosystem.config.js findest du hier

Nach allem, was ich in diesem Tutorial erklärt habe, sieht der env Abschnitt so aus:

• ANDROID_SERVICE_ID = Service-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 Die Funktion ändert sich nicht, sie ist dieselbe wie unter iOS. Weitere Infos findest du in diesem Abschnitt. ALLERDINGS, die initialize ändert sich die Methode etwas.

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

Achtung

Beachte, dass das Hinzufügen von redirectUrl WIRD iOS beeinflussen !!!!!

App erstellen

Hinweis

Wenn du bereits eine App ID hast, kannst du diesen Schritt überspringen. Wenn du Apple Login für iOS konfiguriert hast, überspringe diesen Schritt nicht.

1. Falls du noch keine App ID hast, klicke auf den Plus-Button

   

2. Wähle App IDs und klicke auf Weiter

   

3. Klicke auf den Typ App und klicke auf Continue

   

4. Beschreibung und App-ID eingeben

   

5. Aktivieren Sign with Apple Capability

   

6. Klicken Continue

   

7. Details bestätigen und klicken Register

   

Nach Apple-Login auf Android fortfahren

Wenn du es nutzt Apple Login unter Android Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @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 zur Zwei-Faktor-Authentifizierung.