Supabase Apple Login auf Android

Voraussetzungen

Diese Anleitung hilft Ihnen dabei, Apple Sign-In mit Supabase-Authentifizierung auf Android zu integrieren. Es wird davon ausgegangen, dass Sie bereits folgende Schritte abgeschlossen haben:

• der Supabase Apple Login - Allgemeine Einrichtung.

Wichtig

Apple Sign-In auf Android erfordert einen Backend-Server, da Apple keine native Android-Unterstützung bietet. Wir werden eine Supabase Edge-Funktion als Backend verwenden.

Schritt 1: Bereitstellung des Backend-Edge-Funktions

Zuerst müssen wir die Supabase Edge-Funktion bereitstellen, die den Apple OAuth-Rückruf bearbeiten wird.

1. Navigieren Sie zu Ihrem Supabase-Projektverzeichnis

   cd your-project/supabase

2. Erstellen Sie die Edge-Funktion (wenn sie nicht existiert)

   supabase functions new apple-signin-callback

3. Kopieren Sie die Edge-Funktion code

   Die vollständige Implementierung der Edge-Funktion ist im Beispiel-App.

   Kopieren Sie die folgenden Dateien in Ihr Projekt:

   • supabase/functions/apple-signin-callback/index.ts - Haupt-Edge-Funktion code
   • supabase/functions/apple-signin-callback/deno.json - Importkarte für Abhängigkeiten (enthält jose - Bibliothek für JWT-Signierung)

4. - JWT-Verifizierung konfigurieren

   - Der Apple OAuth-Callback-Endpunkt muss öffentlich sein (keine Authentifizierung erforderlich), weil Apple ihn umleitet. Aktualisieren Sie Ihr supabase/config.toml - Datei:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   - Wichtig

   - Einstellung verify_jwt = false - Bereitstellen der Funktion

5. - Terminalfenster

   supabase functions deploy apple-signin-callback

6. Ermitteln Sie Ihre Funktion-URL

   Nach der Bereitstellung erhalten Sie eine URL wie:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Wenn Sie sie nicht finden können, können Sie Folgendes tun:

   1. Öffnen https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klicken Sie auf die apple-signin-callback Funktion-URL, um sie zu kopieren.

   Speichern Sie diese URL

   Sie benötigen diese URL im nächsten Schritt, wenn Sie das Apple-Entwicklerportal konfigurieren.

Schritt 2: Konfiguriere das Apple-Entwicklerportal

Konfigurieren wir nun das Apple-Entwicklerportal mit der Backend-URL und sammeln alle erforderlichen Werte.

Funktion-URL

Stellen Sie sicher, dass Sie die Supabase Edge-Funktion-URL aus Schritt 1 vor dem Fortfahren haben. Sie benötigen sie, um die Rückruf-URL im Apple-Entwicklerportal zu konfigurieren.

1. Folgen Sie der Anleitung zum Einrichten von Apple Login für Android

   Abschließen Sie das Apple Login Android-Einrichtungsleitfaden zum:

   • Erstellen Sie einen Dienst-ID
   • Generieren Sie einen privaten Schlüssel (.p8-Datei)
   • Erhalten Sie Ihre Team-ID und Schlüssel-ID
   • Konfigurieren Sie die Rückruf-URL

2. Setzen Sie die Rückruf-URL im Apple-Entwicklerportal

   Wenn Sie die Rückruf-URL im Apple-Entwicklerportal (Schritt 6.9 der Apple-Anleitung) konfigurieren, verwenden Sie Ihre Supabase Edge-Funktion-URL:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Wichtig: Verwenden Sie die Supabase Edge-Funktion-URL

   Verwenden Sie NICHT die Rückruf-URL aus der Apple-Login-Android-Einrichtungsanleitung. Diese Anleitung verwendet eine benutzerdefinierte Backend-Server-URL. Für die Supabase-Integration müssen Sie müssen stattdessen Ihre Supabase Edge-Funktion-URL verwenden.

   Genauer Match erforderlich

   Die Rückruf-URL muss genau entsprechen genau dem, was Sie hier einrichten. Apple ist sehr streng bei der Übereinstimmung von Redirect-URI.

3. Sammeln Sie alle erforderlichen Werte

   Nachdem Sie das Apple-Einrichtungshandbuch abgeschlossen haben, sollten Sie folgende Werte haben:

   • APPLE_TEAM_ID: Ihre Apple-Entwickler-Team-ID
   • APPLE_KEY_ID: Die Schlüssel-ID vom Apple-Entwickler-Portal
   • APPLE_PRIVATE_KEY: Ihre .p8-Privatschlüsseldatei (muss bas64-codiert werden)
   • ANDROID_SERVICE_ID: Ihre Apple-Dienst-ID (z.B., com.example.app.service)
   • BASE_REDIRECT_URL: Ihre tiefen Verweis-URL (z.B., capgo-demo-app://path)

   Tiefen Verweis-URL

   ist der tiefen Verweis-Schema, das in Ihrer BASE_REDIRECT_URL Dies ist der Ort, an dem der Backend nach der Authentifizierung umleiten wird. AndroidManifest.xmlDer Wert Ihres tiefen Verweis ist von der

   Wenn Sie android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihre tiefere Verlinkung sein capgo-demo-app://path.

Schritt 3: Supabase-Schlüssel setzen

Jetzt müssen wir die Umgebungsvariablen (Geheimnisse) für die Supabase Edge-Funktion konfigurieren.

1. Verschlüsseln Sie Ihren privaten Schlüssel

   Zuerst verschlüsseln Sie Ihren Apple-privaten Schlüssel (.p8-Datei) in Base64:

   base64 -i AuthKey_XXXXX.p8

   Kopieren Sie den gesamten Ausgang (es ist ein einzelner langer String).

2. Geheimnisse mithilfe von Supabase CLI setzen

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Ersatzplätze ersetzen

   Ersetzen Sie alle Platzhalterwerte durch Ihre tatsächlichen Werte aus Schritt 2.

3. Alternative: Gehe gehe zu den Geheimnissen in der Supabase-Dashboard

   Wenn Sie das Dashboard bevorzugen:

   1. Gehe zu Ihrem Supabase-Projekt-Dashboard
   2. Navigiere zu Edge-Funktionen → Einstellungen → Geheimnisse
   3. Fügen Sie jedem Geheimnisvariable seinen Wert hinzu

Android-App-Konfiguration

Die Apple-Login-Anleitung für Android bereits die Konfiguration Ihrer Android-App abdeckt:

• dem AndroidManifest.xml
• dem onNewIntent Handler hinzufügen MainActivity.java

Stellen Sie sicher, dass Sie diese Schritte bereits abgeschlossen haben, bevor Sie fortfahren. Die tiefen-Link-Scheme, die Sie dort konfigurieren, wird in Schritt 3 verwendet. BASE_REDIRECT_URL Schritt 4: Verwenden Sie den Authentifizierungs-Helfer

Sektion mit dem Titel "Schritt 4: Verwenden Sie den Authentifizierungs-Helfer"

Now können Sie den Authentifizierungs-Helfer in Ihrer App code verwenden.

Implementierung

Die vollständige Implementierung ist im Beispiel-App- supabaseAuthUtils.ts Datei verfügbar.

Verwendung des Authentifizierungs-Helfers

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Update der Hilfsfunktion

Wenn Sie den authenticateWithAppleSupabase Wenn Sie eine Hilfsfunktion benötigen, müssen Sie Sie müssen Die folgenden Werte müssen Ihren Konfiguration entsprechen:

1. aktualisieren redirectUrl - Setzen Sie dies auf Ihre Supabase Edge-Funktion-URL:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. aktualisieren clientId - Setzen Sie dies auf Ihren Apple-Dienst-Id:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   Wichtig

   Ersetzen 'your.service.id.here' mit Ihrem tatsächlichen Apple-Dienst-ID (demselben Wert, den Sie für ANDROID_SERVICE_ID in Schritt 3 verwendet haben).

Siehe das Vollständige Implementierung als Referenz.

Schritt 5: Testen Sie die Integration

1. Erstellen und ausführen Sie Ihre Android-App

   npx cap sync android
   npx cap run android

2. Testen Sie den Authentifizierungsfluss

   • Tippen Sie auf die Schaltfläche „Mit Apple anmelden“
   • Sie sollten das Apple OAuth-Fenster im Browser sehen
   • Nach der Authentifizierung sollten Sie wieder in Ihre App zurückgeleitet werden
   • Überprüfen Sie die Konsole auf Fehler

3. Überprüfen Sie den Ablauf

   Der vollständige Ablauf sollte wie folgt sein:

   1. Der Benutzer tippt auf “Mit Apple anmelden”
   2. Die App öffnet einen Browser mit Apple OAuth
   3. Der Benutzer authentifiziert sich bei Apple
   4. Apple leitet zu: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Die Edge-Funktion tauscht code gegen Token aus
   6. Die Edge-Funktion leitet zu: your-app://path?id_token=...&access_token=...
   7. Die Android-App erhält den tiefen Link und verarbeitet den Identitäts-Token
   8. Die App meldet sich bei Supabase mit dem Identitäts-Token an

Schwierigkeiten beheben

Wenn die Anmeldung fehlschlägt:

• URI-Mismatch: Überprüfen Sie, ob die Rückruf-URL im Apple-Entwicklerportal genau mit APPLE_REDIRECT_URI Geheimnis
• Deep-Link nicht funktioniert: Überprüfen Sie, ob AndroidManifest.xml Filter für die Absicht stimmen mit Ihrem BASE_REDIRECT_URL
• Geheime Schlüssel fehlen: Überprüfen Sie, ob alle Geheimnisse korrekt eingestellt sind, indem Sie supabase secrets list
• Tokenaustausch fehlschlägt: Überprüfe die Edge-Funktion-Protokolle im Supabase-Dashboard für detaillierte Fehlermeldungen
• Die App erhält keine Callbacks: Stelle sicher, dass onNewIntent korrekt implementiert ist in MainActivity
• Die Beispielanwendung code zur Referenz

Wie es funktioniert

Bei Android-Anwendungen verwendet Apple Sign-In einen OAuth-Redirect-Flow:

1. Initialisierung : Die Erweiterung wird mit Ihrem Service-ID und dem Backend-Redirect-URL initialisiert
2. OAuth-Flow : Öffnet einen Browser/Chrome-Custom-Tab mit Apple's OAuth-Seite
3. Hintergrund-Callback : Apple leitet zu Ihrer Supabase Edge-Funktion mit einer Autorisierung code um
4. Token-Austausch : Die Edge-Funktion tauscht den code gegen Token mit Apple's Token-Endpunkt aus
5. Tiefer-Link-Redirect : Die Edge-Funktion leitet den Benutzer zurück in Ihre App mit dem Identitäts-Token
6. Supabase-Authentifizierung : Die App erhält den Token und meldet sich bei Supabase an

Diese Fluss ist notwendig, da Apple keine native Android-Unterstützung für Sign in with Apple bietet.

Weitermachen mit Supabase Apple Login auf Android

Wenn Sie Supabase Apple Login auf Android zur 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 für die Implementierungsdetail in @capgo/capacitor-social-login für die Implementierungsdetail in @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-native-biometric für die Implementierungsdetail in @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.