Supabase Apple Login auf Android

Voraussetzungen

Dieses Leitfaden hilft Ihnen dabei, 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 verarbeiten 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 in der 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), weil Apple zu ihm umleitet. Aktualisieren Sie Ihren supabase/config.toml file:

   [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, weil Apples OAuth-Umleitungs-Redirect keine Supabase-Authentifizierungsheader enthält. Der Endpunkt überprüft den OAuth-Flow selbst.

5. Die Funktion bereitstellen

   supabase functions deploy apple-signin-callback

6. Die URL Ihrer Funktion erhalten

   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 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 ihn 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 und den erforderlichen Werten konfigurieren.

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. Beachten Sie die Apple Login Android-Einrichtungsanleitung

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

   • Erstellen Sie eine Dienst-ID
   • Generieren Sie einen privaten Schlüssel (.p8-Datei)
   • Holen Sie sich Ihren Team- 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 Function-URL:

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

   Wichtig: Verwenden Sie die Supabase Edge Function-URL

   Nicht verwenden die Umleitungs-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 Function-URL verwenden.

   Genauer Treffer erforderlich

   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. Nach Abschluss der Apple-Einrichtungsanleitung 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 werden)ANDROID_SERVICE_ID
   • : Ihre Apple-Dienst-ID (z.B.__CAPGO_KEEP_0__ com.example.app.service)
   • BASE_REDIRECT_URLIhr Deep-Link-URL (z.B. capgo-demo-app://path)

   Deep Link URL

   Die BASE_REDIRECT_URL ist der im Backend konfigurierte Deep-Link-Schema. AndroidManifest.xml. Hier wird der Benutzer nach der Authentifizierung umgeleitet.

   Der Wert Ihres Deep-Links hängt von dem android:scheme="capgo-demo-app" code. Wenn Sie android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihr Deep-Link capgo-demo-app://path.

Schritt 3: Setzen Sie Supabase-Secrets

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

1. Verschlüsseln Sie Ihren privaten Schlüssel

   Zuerst müssen Sie Ihren Apple-privaten Schlüssel (.p8-Datei) in Base64 kodieren:

   base64 -i AuthKey_XXXXX.p8

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

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. Alternativ: Legen Sie Geheimnisse im Supabase-Dashboard fest

   Wenn Sie das Dashboard bevorzugen:

   1. Gehe zu deinem Supabase-Projekt-Dashboard
   2. Navigiere zu Edge-Funktionen → Einstellungen → Geheimnisse
   3. Fügen Sie jedes Geheimnisvariable 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. Der tiefen Link-Scheme, den Sie dort konfigurieren, wird 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-App-Datei. supabaseAuthUtils.ts Mit der Authentifizierungshilfe

Abschnitt mit dem Titel „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);
}

Abschnitt mit dem Titel „Aktualisieren Sie die Hilfsfunktion“

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

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 das

Siehe das 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 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. Edge-Funktion tauscht code gegen Token aus
   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

Fehlersuche

If Authentifizierung fehlschlägt:

• URI für die Weiterleitung passt nicht: Überprüfe die Rückruf-URL im Apple Developer Portal, ob sie genau mit APPLE_REDIRECT_URI : __CAPGO_KEEP_0__
• Deep Link funktioniert nicht: Überprüfe, ob AndroidManifest.xml Intent-Filter passt sich deiner BASE_REDIRECT_URL
• Fehlende Geheimnisse: Überprüfe, ob alle Geheimnisse korrekt gesetzt sind, indem du supabase secrets list
• Tokenaustausch fehlschlägt: Überprüfe die Edge-Function-Logs im Supabase-Dashboard für detaillierte Fehlermeldungen
• Die App erhält keine Callback-Funktion: Stelle sicher onNewIntent ist in MainActivity korrekt 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 dem Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome-Custom-Tab mit der Apple-OAuth-Seite
3. Hintergrund-CallbackApple leitet Sie zu Ihrer Supabase Edge-Funktion weiter mit einer Autorisierung code
4. TokenaustauschDie Edge-Funktion austauscht den code gegen Token mithilfe des Tokenendpunkts von Apple
5. Deep Link RedirectDie Edge-Funktion leitet Sie zurück zu Ihrer App mit dem Identitäts-Token
6. Supabase-AuthentifizierungDie 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 bietet.

Weitermachen von Supabase Apple Login auf Android

Wenn Sie Supabase Apple Login auf Android verwenden Apple-Login bei Supabase auf Android um die Authentifizierung und die Kontenflüsse zu planen, 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-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.