Supabase Apple Login auf Android

Voraussetzungen

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

• der Supabase Apple Login - Allgemeine Einstellung.

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 Edge-Funktionserstellung 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. - Konfigurieren Sie die JWT-Verifizierung

   - Die Apple OAuth-Rückrufendpunkt muss öffentlich sein (keine Authentifizierung erforderlich), da Apple ihn umleiten wird. 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. Ermittle deine Funktion-URL

   Nach der Bereitstellung erhältst du eine URL wie:

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

   Wenn du sie nicht findest, kannst du Folgendes tun:

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

   Speichere diese URL

   Du benötigst diese URL im nächsten Schritt, um die Apple-Entwickler-Portal-Konfiguration zu 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 Funktion-URL von Supabase Edge aus Schritt 1 haben, bevor Sie fortfahren. Sie benötigen sie, um die Rückruf-URL im Apple-Entwicklerportal zu konfigurieren.

1. Folge der Anleitung zum Apple-Login-Setup für Android

   Abschließen Sie das Apple-Login-Setup für Android um:

   • Erstellen Sie einen Dienst-ID
   • Generieren Sie einen privaten Schlüssel (.p8-Datei)
   • Erhalten Sie Ihre Team-ID und Ihre 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. Alle erforderlichen Werte sammeln

   Nach Abschluss der Apple-Einrichtungsanleitung sollten Sie folgende Werte haben:

   • APPLE_TEAM_ID: Ihre Apple-Entwickler-Team-ID
   • APPLE_KEY_ID: Die Schlüssel-ID aus dem Apple-Entwicklerportal
   • APPLE_PRIVATE_KEY: Ihr .p8-Privatschlüsseldatei (muss base64-codiert werden)
   • ANDROID_SERVICE_ID: Ihr Apple-Dienst-ID (z.B. com.example.app.service)
   • BASE_REDIRECT_URL: Ihr tiefes Link-URL (z.B. capgo-demo-app://path)

   Das

   ist der tiefen Link-Schema, das in Ihrem BASE_REDIRECT_URL Dies ist der Ort, an dem der Backend nach der Authentifizierung umleiten wird. AndroidManifest.xmlDer Wert Ihres tiefen Links hängt von Ihrem

   Wenn Sie __CAPGO_KEEP_0__ gesetzt haben android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihr Deep-Link sein capgo-demo-app://path.

Schritt 3: Supabase-Secrets einrichten

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

1. Verschlüsseln Sie Ihr privates Schlüssel

   Zuerst müssen Sie Ihr Apple-Schlüssel (.p8-Datei) in Base64 kodieren:

   base64 -i AuthKey_XXXXX.p8

   Kopieren Sie die gesamte Ausgabe (es ist ein einzelner langer String).

2. Geheimnisse mithilfe von Supabase CLI einrichten

   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 deinem Supabase-Projekt-Dashboard
   2. Navigiere zu Edge-Funktionen → Einstellungen → Geheimnisse
   3. Fügen Sie jedem Geheimnisvariable seinen Wert hinzu

Android-App-Konfiguration

Das Apple-Login-Android-Einrichtungshandbuch bereits abgedeckt, wie Sie Ihre Android-App konfigurieren:

• die tiefen-Link-Intent-Filter hinzufügen zu AndroidManifest.xml
• die onNewIntent Handler hinzufügen zu MainActivity.java

Stellen Sie sicher, dass Sie diese Schritte bereits abgeschlossen haben, bevor Sie fortfahren. Der tiefen-Link-Schema, das 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"

Sie können nun die Authentifizierungs-Hilfe in Ihrer App code verwenden.

Implementierung

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

Verwendung der Authentifizierungs-Hilfe

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

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Wenn Sie eine Hilfsfunktion benötigen, müssen Sie Sie müssen Die folgenden Werte müssen Sie an Ihre Konfiguration anpassen:

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 der 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 in einem 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 klickt 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 funktioniert nicht: Ü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 ist korrekt in der MainActivity implementiert
• Überprüfe das Beispiel-App code zur Referenz

Wie es funktioniert

Bei Android 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. Backend-Rückruf: 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-Rückruf: Die Edge-Funktion leitet zurück zu Ihrer App mit dem Identitäts-Token
6. Supabase-Authentifizierung: Die App erhält das 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

Fortsetzen Sie von 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, @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 Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.