Supabase Apple Login auf Android

Voraussetzungen

Diese Anleitung hilft Ihnen, 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: Bereitstellung des Backend-Edge-Funktions

Zuerst müssen wir das Supabase Edge-Funktion bereitstellen, das 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 es 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 - Importmap für Abhängigkeiten (einschließlich Bibliothek für JWT-Signierung) jose Konfigurieren Sie die JWT-Verifizierung

4. Die Apple OAuth-Callback-Endpunkt muss öffentlich sein (keine Authentifizierung erforderlich), weil Apple zu ihm umleitet. Aktualisieren Sie Ihren

   Zu Clipboard kopieren supabase/config.toml Wichtig

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

   Macht diese Endpunkt öffentlich. Dies ist erforderlich, weil Apples OAuth-Redirect keine Supabase-Authentifizierungsheader enthält. Der Endpunkt validiert den OAuth-Flow selbst.

   Deployen Sie die Funktion verify_jwt = false Stellen Sie sicher, dass der Apple OAuth-Callback-Endpunkt öffentlich ist (keine Authentifizierung erforderlich), weil Apple zu ihm umleitet. Aktualisieren Sie Ihren

5. Deploy the function

   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. Öffne 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

   Sie benötigen diese URL in der nächsten Schritt, wenn Sie das Apple Developer Portal konfigurieren.

Schritt 2: Konfigurieren Sie das Apple Developer Portal

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 Anleitung zum Einrichten von Apple Login für Android

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

   • Erstellen Sie einen Dienst-IDs
   • Eine private Schlüsseldatei (.p8 Datei) generieren
   • Ihre Team-ID und Key-ID erhalten
   • Die Rückruf-URL konfigurieren

2. Die Rückruf-URL im Apple-Entwickler-Portal einstellen

   Wenn Sie die Rückruf-URL im Apple-Entwickler-Portal (Schritt 6.9 der Apple-Anleitung) konfigurieren, verwenden Sie bitte 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 Umleitungs-URL aus der Apple Login Android-EinrichtungsanleitungDiese Anleitung verwendet eine benutzerdefinierte Backend-Server-URL. Für die Supabase-Integration müssen Sie eine Supabase Edge-Funktion-URL verwenden benutzen Sie stattdessen Ihre Supabase Edge Function URL.

   Exact Match Required

   Die Rückruf-URL muss genau entsprechen 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 haben:

   • APPLE_TEAM_ID: Ihre Apple-Entwickler-Team-ID
   • APPLE_KEY_ID: Die Schlüssel-ID vom Apple-Entwickler-Portal
   • APPLE_PRIVATE_KEY: Ihre .p8-Privatschlüsseldatei (muss base64-codiert werden)
   • ANDROID_SERVICE_ID: Ihr 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

   Dies ist BASE_REDIRECT_URL die tiefen Verweis-Scheme, die in Ihrem AndroidManifest.xml. Hier wird der Backend nach der Authentifizierung umgeleitet.

   Der Wert Ihres tiefen Verweises hängt von der android:scheme="capgo-demo-app" code. Wenn Sie bereits eine android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihre tiefe Verlinkung sein capgo-demo-app://path.

Schritt 3: Setzen Sie Supabase-Secrets

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

1. Verschlüsseln Sie Ihr privates Schlüssel

   Zuerst verschlüsseln Sie Ihr Apple-privates Schlüssel (.p8-Datei) in base64:

   base64 -i AuthKey_XXXXX.p8

   Kopieren Sie den gesamten Ausgang (es ist ein einzelner langer String).

2. Setzen Sie Geheimnisse mithilfe von 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

   Ersatzplätze ersetzen

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

3. Alternative: Gehe gehe zu 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 jede geheime Variable mit ihrem Wert hinzu

Android-App-Konfiguration

Der Apple Login Android-Einrichtungsanleitung Die

• bereits die Konfiguration Ihrer Android-App abdeckt: AndroidManifest.xml
• Hinzufügen des tiefen-Link-Intent-Filter zu onNewIntent Hinzufügen des MainActivity.java

Handlers zu BASE_REDIRECT_URL Stellen Sie sicher, dass Sie diese Schritte bereits abgeschlossen haben, bevor Sie fortfahren. Die tiefen-Link-Scheme, die Sie dort konfigurieren, wird Ihre

in Schritt 3.

Sie können nun den Authentifizierungshelfer in Ihrer App code verwenden.

Implementierung

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

Verwendung des Authentifizierungshelfers

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 Hilfsfunktion verwenden, müssen Sie müssen aktualisieren

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 Ihre 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' Sie durch Ihren tatsächlichen Apple Service ID (den gleichen Wert, den Sie in Schritt 3 verwendet haben). ANDROID_SERVICE_ID Siehe die

komplette Implementierung für Referenz. Schritt 5: Testen der Integration

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

1. Terminalfenster

   npx cap sync android
   npx cap run android

2. __CAPGO_KEEP_0__

   • Tippen Sie auf den Button „Mit Apple anmelden“
   • Sie sollten die Apple OAuth-Seite 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 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 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. 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

Fehlersuche

Wenn die Anmeldung fehlschlägt:

• URI des Redirects passt nicht überein: Überprüfe, dass die Rückkehr-URL im Apple-Entwicklerportal genau mit APPLE_REDIRECT_URI geheim
• Tiefenlink funktioniert nicht: Überprüfe, dass AndroidManifest.xml intent-Filter mit deinem BASE_REDIRECT_URL
• Fehlende Geheimnisse: Überprüfen Sie, ob alle Geheimnisse korrekt eingestellt sind supabase secrets list
• Token exchange fails: Überprüfen Sie die Edge-Funktion-Protokolle im Supabase-Dashboard für detaillierte Fehlermeldungen
• App erhält keine Callback: Stellen Sie sicher, dass onNewIntent korrekt in MainActivity implementiert ist
• Review the Beispiel-App code zur Referenz

Wie es funktioniert

On Android, Apple Sign-In verwendet einen OAuth-Redirect-Flow:

1. Initialisierung: Die Erweiterung wird mit Ihrem Service-ID und Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome Custom Tab mit Apples OAuth-Seite
3. Backend-Rückruf: Apple leitet zu Ihrer Supabase Edge-Funktion mit einer Autorisierung code weiter
4. Token-Austausch: Die Edge-Funktion austauscht den code gegen Token mit Apples Token-Endpunkt
5. Tiefenlink-Redirect: Die Edge-Funktion leitet zurück zu Ihrer App mit dem Identitäts-Token
6. Supabase-Authentifizierung: Die App erhält den Token und meldet sich bei Supabase an

Diese Fluss ist notwendig, weil Apple keine native Android Unterstützung für Sign in with Apple bereitstellt.

Weitermachen Sie von Supabase Apple Login auf Android.

Wenn Sie Supabase Apple Login auf Android für die Planung der Authentifizierung und 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-biometrische für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.