Supabase Apple Login auf Android

Voraussetzungen

This guide will help you integrate Apple Sign-In with Supabase Authentication on Android. It is assumed that you have already completed:

• der Supabase Apple Login - Allgemeine Einstellungen.

Wichtig

Für Apple Sign-In auf Android ist ein Backend-Server erforderlich, 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

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 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-Übertragung von Apple keine Supabase-Authentifizierungsheader enthält. Der Endpunkt überprüft die OAuth-Fluss selbst.

5. Führen Sie die Funktion aus

   supabase functions deploy apple-signin-callback

6. Holen Sie sich die URL Ihrer Funktion

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

1. Folgen Sie der 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) einrichten, 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 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-Funktion-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 haben:

   APPLE_TEAM_ID

   • : Ihre Apple-Entwickler-Team-IDAPPLE_KEY_ID
   • : Die Schlüssel-ID vom Apple-Entwickler-PortalAPPLE_PRIVATE_KEY
   • : Ihr .p8-Privatschlüssel-Datei (muss base64-codiert werden)ANDROID_SERVICE_ID
   • : Ihre Apple-Dienst-ID (z.B.Collect all required values com.example.app.service)
   • BASE_REDIRECT_URLIhr Deep-Link-URL (z.B. capgo-demo-app://path)

   Deep Link URL

   Die BASE_REDIRECT_URL ist die im Backend konfigurierte Deep-Link-Scheme in Ihrem AndroidManifest.xml. Hier wird der Backend nach der Authentifizierung umgeleitet.

   Der Wert Ihres Deep-Links ist von der 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

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

1. Verschlüssle Deinen privaten Schlüssel

   Erstens verschlüssle Deinen Apple-privaten Schlüssel (.p8-Datei) in base64:

   base64 -i AuthKey_XXXXX.p8

   Kopiere die gesamte Ausgabe (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 in der Supabase-Dashboard-Oberfläche fest.

   Wenn Sie die Oberfläche bevorzugen:

   1. Gehen Sie zu Ihrem Supabase-Projekt-Dashboard.
   2. Navigieren Sie zu Edge-Funktionen → Einstellungen → Geheimnisse
   3. Fügen Sie jeder Geheimnisvariable mit ihrem 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 Schritt 3.

Schritt 4: Verwenden Sie den Authentifizierungs-Helfer

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

Implementierung

The vollständige Implementierung ist in der Beispiel-App’s supabaseAuthUtils.ts Datei verfügbar.

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

Die Hilfsfunktion aktualisieren

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

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. Ihre Android-App erstellen und ausführen

   npx cap sync android
   npx cap run android

2. Die Authentifizierungsablauf testen

   • Auf den „Mit Apple anmelden“-Button tippen
   • Sie sollten die Apple OAuth-Seite in einem Browser sehen
   • Nach der Authentifizierung sollten Sie wieder in Ihre App zurückgeleitet werden
   • Überprüfen Sie die Konsole auf Fehlermeldungen

3. Überprüfen Sie den Fluss

   Der gesamte Fluss 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 zu: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge-Funktion tauscht code gegen Token aus
   6. 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. Die App meldet sich bei Supabase mit dem Identitäts-Token an

Fehlerbehebung

Wenn die Authentifizierung fehlschlägt:

• URI-Mismatch: Überprüfe, dass die Rückruf-URL im Apple-Entwicklerportal genau mit APPLE_REDIRECT_URI Geheimer Schlüssel
• Deep-Link funktioniert nicht: Überprüfe, dass AndroidManifest.xml Intent-Filter passt sich deinem BASE_REDIRECT_URL
• Geheime Schlüssel fehlt: Überprüfe, dass alle Geheimwerte korrekt gesetzt sind, indem du supabase secrets list
• Token-Wechsel fehlschlägt: Überprüfe die Edge-Function-Logs 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 zur Referenz

Wie es funktioniert

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

1. Initialisierung: Die Erweiterung wird mit Ihrer 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 Ihren Supabase Edge-Funktion mit einer Autorisierung code um
4. Tokenaustausch: Die Edge-Funktion tauscht den code gegen Token aus, indem sie das Token-Endpunkt von Apple verwendet
5. Deep 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 den Token und meldet sich bei Supabase an

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

Fortsetzen 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, Mit @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Mit @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, Mit @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.