Supabase-Apple-Login auf Android

Voraussetzungen

Diese Anleitung hilft Ihnen dabei, Apple Sign-In mit Supabase Authentication 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-Projekt-Verzeichnis

   cd your-project/supabase

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

   supabase functions new apple-signin-callback

3. Kopiere die Edge-Funktion code

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

   Kopiere die folgenden Dateien in dein 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-Signierung)

4. Konfiguriere die JWT-Verifizierung

   Die Apple OAuth-Callback-Endpunkt muss öffentlich sein (keine Authentifizierung erforderlich), da Apple zu ihm umleitet. Aktualisieren Sie Ihren 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 macht diesen Endpunkt öffentlich. Dies ist erforderlich, da die OAuth-Umleitung von Apple die Supabase-Authentifizierungsheader nicht enthält. Der Endpunkt überprüft den OAuth-Flow selbst.

5. Funktion bereitstellen

   supabase functions deploy apple-signin-callback

6. Funktion-URL abrufen

   Nach der Bereitstellung erhalten Sie eine URL wie:

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

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

   1. Öffnen https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klicken Sie auf den 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: Konfigurieren Sie das Apple-Entwicklerportal

Jetzt müssen wir das Apple-Entwicklerportal mit der Backend-URL konfigurieren und alle erforderlichen Werte erhalten.

Funktions-URL

Stellen Sie sicher, dass Sie Ihre Supabase Edge-Funktions-URL aus Schritt 1 vor dem Fortfahren haben. Sie benötigen sie, um die Rückruf-URL in Apple Developer Portal zu konfigurieren.

1. Beachten Sie die Apple Login Android-Einrichtungsanleitung

   Abschließen Sie das Apple Login Android-Einrichtungsanleitung zu:

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

2. Setzen Sie die Rückruf-URL in Apple Developer Portal

   Wenn Sie die Rückruf-URL in Apple Developer 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 die von der Apple Login Android-Einrichtungsanleitung bereitgestellte Umleitungs-URL. Diese Anleitung verwendet eine benutzerdefinierte Backend-Server-URL. Für die Supabase-Integration müssen Sie stattdessen Ihre Supabase Edge-Funktion-URL verwenden. Genauer Treffer erforderlich

   Die Rückruf-URL muss übereinstimmen

   Die Rückruf-URL muss übereinstimmen genau so, wie Sie es hier einrichten. Apple ist sehr streng bei der Übereinstimmung von Redirect-URI. Sammeln Sie alle erforderlichen Werte

3. Nachdem Sie die Anleitung für die Apple-Einrichtung abgeschlossen haben, sollten Sie folgende haben:

   APPLE_TEAM_ID

   • : Ihre Apple-Entwickler-Team-IDAPPLE_KEY_ID
   • : Die Key-ID aus dem Apple-Entwickler-PortalAPPLE_PRIVATE_KEY
   • : Ihr .p8-Privatschlüssel-Datei (muss base64-codiert sein)ANDROID_SERVICE_ID
   • : Ihre Apple-Dienst-ID (z.B.exactly com.example.app.service)
   • BASE_REDIRECT_URL: Ihre tiefgreifende Link-URL (z.B., capgo-demo-app://path)

   Die

   ist die tiefgreifende Link-Scheme, die in Ihrem BASE_REDIRECT_URL Dies ist der Ort, an dem der Backend nach der Authentifizierung umleiten wird. AndroidManifest.xmlDer Wert Ihrer tiefgreifenden Link ist von der

   __CAPGO_KEEP_0__. Wenn Sie android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" , dann wird Ihre tiefgreifende Link sein AndroidManifest.xmlSchritt 3: Setzen Sie Supabase-Secrets capgo-demo-app://path.

protectedTokens

Zum Abschluss müssen wir die Umgebungsvariablen (Secrets) für die Supabase Edge-Funktion konfigurieren.

1. Dein privates Schlüssel

   Erstelle zunächst eine Basis-64-Codierung deines Apple-Privatschlüssels (.p8-Datei):

   base64 -i AuthKey_XXXXX.p8

   Kopiere die gesamte Ausgabe (es ist eine einzelne lange Zeichenkette).

2. Setze Secrets mit Supabase CLI

   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

   Ersatz von Platzhaltern

   Ersetzen Sie alle Platzhalterwerte mit Ihren tatsächlichen Werten aus Schritt 2.

3. Alternative: Legen Sie Geheimnisse im Supabase-Dashboard fest

   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 jedem Geheimnisvariablen mit seinem Wert hinzu

Android-App-Konfiguration

Die Apple Login Android Setup guide 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 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

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

Now you can use the authentication helper in your app code.

Abschnitt mit dem Titel „Implementierung“

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

Mit der Authentifizierungshilfe

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 folgende Werte an Ihre Konfiguration anpassen: example app’s

1. Aktualisieren redirectUrl - Setze dies auf deine Supabase Edge Function 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 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 deiner tatsächlichen Apple Service ID (demselben Wert, den du in Schritt 3 verwendet hast). ANDROID_SERVICE_ID Siehe

the vollständige Implementierung zur 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 die Apple OAuth-Seite in einem Browser sehen
   • Nach der Authentifizierung sollten Sie wieder auf Ihre App zurückgeleitet werden
   • Überprüfen Sie die Konsole auf Fehler

3. Überprüfen Sie den Ablauf

   Der gesamte Ablauf sollte sein:

   1. Benutzer klickt auf „Mit Apple anmelden“
   2. Die App öffnet einen 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. Die Edge-Funktion tauscht code gegen Token aus
   6. Die Edge-Funktion leitet weiter 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 die Rückruf-URL im Apple-Entwicklerportal, ob sie genau mit APPLE_REDIRECT_URI Geheimnis
• Tiefes Link nicht funktioniert: Überprüfen Sie, ob AndroidManifest.xml Ziel-Filter entspricht Ihrem BASE_REDIRECT_URL
• Fehlende Geheimnisse: Überprüfen Sie, ob alle Geheimnisse korrekt gesetzt sind, indem Sie supabase secrets list
• Token-Austausch fehlschlägt: Überprüfen Sie die Edge-Function-Protokolle im Supabase-Dashboard für detaillierte Fehlermeldungen
• Die App erhält keine Callback: Stelle sicher onNewIntent ist in MainActivity korrekt implementiert
• Überprüfe das Beispiel-App code als Referenz

Wie es funktioniert

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

1. Initialisierung: Die Erweiterung wird mit deinem Service-ID und dem Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome-Custom-Tab mit der Apple-OAuth-Seite
3. Hintergrund-Aufruf: Apple leitet den Benutzer auf Ihre Supabase Edge-Funktion um, wobei eine Autorisierung code erfolgt
4. Tokenaustausch: Die Edge-Funktion tauscht den code gegen Token aus, indem sie sich am Token-Endpunkt von Apple bedient
5. Deep-Link-Weiterleitung: Die Edge-Funktion leitet den Benutzer zurück auf Ihre App mit dem Identitäts-Token
6. Supabase-Authentifizierung: Die App erhält das Token und meldet sich bei Supabase an

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