Supabase Apple Login auf Android

Voraussetzungen

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

• die 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: Deployen Sie die Backend-Edge-Funktion

Zunächst 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 Terminal-Fenster

   supabase functions new apple-signin-callback

3. Copy the edge function 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 - Importmap für Abhängigkeiten (enthält jose Bibliothek für JWT-Verschlüsselung)

4. Konfigurieren Sie die JWT-Verifizierung

   Die Apple-OAuth-Rückrufendpunkt muss öffentlich sein (keine Authentifizierung erforderlich), da Apple zu ihm umleiten wird. Aktualisieren Sie Ihr supabase/config.toml Auf die Zwischenablage kopieren

   [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"

   Weitere Informationen finden Sie auf

   Macht diesen Endpunkt öffentlich. Dies ist erforderlich, weil Apples OAuth-Redirect keine Supabase-Authentifizierungsheader enthält. Der Endpunkt überprüft den OAuth-Flow selbst. verify_jwt = false Deploy die Funktion

5. Terminalfenster

   supabase functions deploy apple-signin-callback

6. Nach der Bereitstellung erhalten Sie eine URL wie:

   In die Zwischenablage kopieren

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

   Öffnen

   1. Klicken Sie auf https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Funktion-URL, um sie in die Zwischenablage zu kopieren. apple-signin-callback Wenn Sie sie nicht finden können, können Sie Folgendes tun: Öffnen

   Speichern Sie diese URL

   Sie benötigen diese URL im nächsten Schritt, um die Apple Developer Portal zu konfigurieren.

Schritt 2: Apple Developer Portal konfigurieren

Wir müssen nun das Apple Developer Portal mit der Backend-URL konfigurieren und alle erforderlichen Werte abrufen.

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

1. Beachten Sie die Apple Login Android-Einrichtungsanleitung

   Abschließen Apple Login Android Einrichtungsanleitung zu:

   • Erstellen Sie einen Dienst-IDs
   • Erstellen Sie eine private Schlüssel (Datei .p8)
   • Holen Sie sich Ihren Team-IDs und Key-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

   Nicht verwenden Verwenden Sie NICHT die Umleitungs-URL von der Apple Login Android Einrichtungsanleitung. Diese Anleitung verwendet eine benutzerdefinierte Backend-Server-URL. Für die Supabase-Integration müssen Sie stattdessen Ihre Supabase Edge-Funktion-URL verwenden. Genauer Match erforderlich Genauer Match erforderlich

   Alle erforderlichen Werte sammeln

   Nach Abschluss der Apple-Einrichtungsanleitung sollten Sie folgende Werte haben: APPLE_TEAM_ID Exact Match Required

3. Exact Match Required

   The Return URL must match exactly what you configure here. Apple is very strict about redirect URI matching.

   • Collect all required values: Ihre Apple-Entwickler-Team-ID
   • APPLE_KEY_ID: Die Schlüssel-ID aus dem Apple-Entwickler-Portal
   • APPLE_PRIVATE_KEY: Ihr .p8-Privatschlüssel-Datei (muss base64-codiert sein)
   • 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)

   Deep Link URL

   The BASE_REDIRECT_URL ist die tiefe Verlinkungsscheme in Ihrem AndroidManifest.xml. Hier wird der Backend nach der Authentifizierung umgeleitet.

   Der Wert Ihrer tiefe Verlinkung hängt von dem android:scheme="capgo-demo-app" code. Wenn Sie android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihre tiefe Verlinkung capgo-demo-app://path.

Schritt 3: Setzen Sie Supabase-Secrets

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

1. Codieren Sie Ihr privates Schlüssel

   Zunächst codieren Sie Ihr Apple-Schlüssel (.p8-Datei) in Base64:

   base64 -i AuthKey_XXXXX.p8

   Kopieren Sie die gesamte Ausgabe (es ist eine einzelne lange Zeichenfolge).

2. Geheime Werte 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

   Ersatzwerte einsetzen

   Ersatzwerte durch Ihre tatsächlichen Werte aus Schritt 2 ersetzen.

3. Alternative: Geheime Werte in Supabase-Dashboard setzen

   Wenn Sie das Dashboard bevorzugen:

   1. Gehen Sie zu Ihrem Supabase-Projekt-Dashboard
   2. Navigieren Sie zu Edge Funktionen → Einstellungen → Geheimnisse
   3. Fügen Sie jeder geheimen Variablen mit ihrem Wert hinzu

Android-App-Konfiguration

Der Richtlinie für die Einrichtung von Apple Login für Android bereits die Konfiguration Ihrer Android-App abdeckt:

• Hinzufügen des tiefen-Link-Intent-Filter zu AndroidManifest.xml
• Hinzufügen des onNewIntent Handlers zu MainActivity.java

Stellen Sie sicher, dass Sie diese Schritte vorher abgeschlossen haben. Die tiefgreifende Link-Scheme, die Sie dort konfigurieren, ist Ihr BASE_REDIRECT_URL in Schritt 3.

Schritt 4: Verwenden Sie den Authentifizierungs-Helfer

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

Implementierung

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

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

Aktualisieren Sie die Hilfsfunktion

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie müssen die folgenden Werte an Ihre Konfiguration anpassen:

1. Aktualisieren redirectUrl - Setzen Sie diesen 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 diesen auf Ihren Apple Service 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-Wert (demselben Wert, den Sie in Schritt 3 verwendet haben). ANDROID_SERVICE_ID Siehe die

vollständige Implementierung zur Referenz. Schritt 5: Testen der Integration

Abschnitt mit dem Titel „Schritt 5: Testen der Integration“

1. __CAPGO_KEEP_0__

   npx cap sync android
   npx cap run android

2. Den Authentifizierungsfluss testen

   • Tippen Sie auf das Schaltfeld „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 Fluss

   Der vollständige Fluss sollte sein:

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

Fehlerbehebung

Wenn die Anmeldung fehlschlägt:

• Ursache: URI für die Weiterleitung passt nicht: Überprüfe die Rückruf-URL im Apple Developer Portal, ob sie genau mit APPLE_REDIRECT_URI Geheimnis
• Tiefenlink funktioniert nicht: Überprüfen Sie, ob AndroidManifest.xml intent filter Ihren BASE_REDIRECT_URL
• Fehlende Geheimnisse: Überprüfen Sie, ob alle Geheimnisse korrekt eingestellt sind, indem Sie supabase secrets list
• Tokenaustausch fehlschlägt: Überprüfen Sie die Edge-Function-Protokolle im Supabase-Dashboard für detaillierte Fehlermeldungen
• Die App erhält keine Callbacks: Stellen Sie sicher, dass onNewIntent korrekt in der MainActivity implementiert ist
• Die Beispiel-App code zur Referenz

Wie es funktioniert

Bei Android nutzt 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. Rückruf am Backend: Apple leitet zu Ihrer Supabase Edge-Funktion mit einer Autorisierung code um
4. Token-Austausch: Die Edge-Funktion austauscht code gegen Token mithilfe der Apple-Token-Endpunkt
5. Tiefe-Link-Redirect: 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.