Supabase Apple Login auf Android

Voraussetzungen

Diese Anleitung hilft Ihnen, 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

Zunächst müssen wir die Supabase Edge-Funktion bereitstellen, die den Apple OAuth-Rückruf verarbeiten 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

   - Die Apple-OAuth-Rückrufendpunkt muss öffentlich sein (keine Authentifizierung erforderlich), weil Apple ihn zurücklenkt. 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 - Funktion bereitstellen

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 wir nun Apple Developer Portal mit der Backend-URL und erhalten alle erforderlichen Werte.

Funktion-URL

Stellen Sie sicher, dass Sie Ihre 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. Folgen Sie der Anleitung zum Einrichten von Apple Login für Android

   Abschließen Sie das Apple Login Android-Einrichtungsleitfaden zurück zu:

   • Erstellen Sie einen Dienst-ID
   • Generieren Sie einen privaten Schlüssel (.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-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 stimmen genau mit dem, was Sie hier einrichten. Apple ist sehr streng bei der Übereinstimmung von Redirect-URI.

3. Sammeln Sie alle erforderlichen Werte

   Nachdem Sie die Apple-Einrichtungsanleitung abgeschlossen haben, 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

   __CAPGO_KEEP_0__. Wenn Sie diese 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-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

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

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

Stellen Sie sicher, dass Sie diese Schritte bereits abgeschlossen haben, bevor Sie fortfahren. Die Tiefe-Link-Scheme, die 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-Hilfe in Ihrer App code verwenden.

Implementierung

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

Mit 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 Werkzeugfunktion, du musst die folgenden Werte an deine Konfiguration anpassen:

1. Aktualisieren redirectUrl - Setze dies auf deine Supabase Edge-Funktion-URL:

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

2. Aktualisieren clientId - Setze dies auf deine 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 in Schritt 3 verwendet haben) ANDROID_SERVICE_ID in Schritt 3)

Siehe die komplette Implementierung zur 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 den Button „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 klickt 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 Authentifizierung 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 Intent-Filter passt sich Ihren BASE_REDIRECT_URL
• Fehlende Geheimnisse: Ü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 der MainActivity
• Die Beispielanwendung 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 Apple's 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 den code gegen Tokens mit Apple's Token-Endpunkt aus
5. Tiefer-Link-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, weil 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.