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

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

   - Der 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, wenn du die Apple-Entwickler-Portal-Konfiguration durchführst.

Schritt 2: Konfiguriere Apple Developer Portal

Konfigurieren Sie nun Apple Developer Portal mit der Backend-URL und rufen Sie alle erforderlichen Werte ab.

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 in Apple Developer Portal zu konfigurieren.

1. Befolgen Sie die Anleitung zum Apple-Login-Android-Setup

   Führen Sie das Apple-Login-Android-Einrichtungshandbuch ab:

   • Erstellen Sie einen Dienst-ID
   • Erstellen Sie eine private Schlüsseldatei (.p8-Datei)
   • Erhalten Sie Ihren Team-IDs und Schlüssel-IDs
   • Konfigurieren Sie die Rückruf-URL

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

   Wenn Sie die Rückruf-URL im Apple-Entwickler-Portal (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 stimmen genau was Sie hier konfigurieren. 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-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 Ihrem 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 Ihr Deep Link sein capgo-demo-app://path.

Schritt 3: Supabase-Schlüssel setzen

Zurzeit 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 die gesamte Ausgabe (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 mit Ihren tatsächlichen Werten 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

Die Apple-Login-Anleitung für Android dieses Dokument

• den tiefen Link-Intent-Filter hinzufügen AndroidManifest.xml
• den onNewIntent Handler 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

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

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

Implementierung

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

Verwendung der Authentifizierungs-Hilfsfunktion

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

Aktualisieren Sie die Hilfsfunktion

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 zurück in Ihre App weitergeleitet 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 Sie 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 Sie 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

Fehlerbehebung

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 absichtliche Filterung passt sich Ihren BASE_REDIRECT_URL
• Verschlüsselte Geheimnisse 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 Ihrem Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome-Custom-Tab mit der Apple-OAuth-Seite
3. Backend-Rückruf: Apple leitet zu Ihrer Supabase Edge-Funktion mit einer Autorisierung code weiter
4. Token-Austausch: Die Edge-Funktion tauscht code gegen Token mit Apple's Token-Endpunkt aus
5. Tiefenlink-Rückruf: Die Edge-Funktion leitet den Benutzer 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 verwenden Supabase Apple Login auf Android Um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login Für die native Fähigkeit in Verwenden Sie @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.