Supabase Apple Login auf Android

Voraussetzungen

Diese Anleitung hilft Ihnen, 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

Kontext: Seite: Seite für das Bug-Bounty-Programm. Rolle: UI-Label. Gesehen in: Seite bug-bounty.astro. Nachrichtenschlüssel `bug_bounty_important_label` (Wichtige Nachricht für das Bug-Bounty-Programm).

Schritt 1: Bereitstellung der Backend Edge Funktion

Zuerst müssen wir die Supabase Edge-Funktion bereitstellen, die den Apple OAuth-Antwortaufruf bearbeiten wird.

1. Navigiere zu deinem Supabase-Projektverzeichnis

   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.

   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 die Signierung von JWT)

4. JWT-Verifizierung konfigurieren)

   Die Apple-OAuth-Rückrufendpunkt 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

   Setting verify_jwt = false Macht diesen Endpunkt öffentlich. Dies ist erforderlich, da die OAuth-Redirect-URL von Apple keine Supabase-Authentifizierungsheader enthält. Der Endpunkt überprüft den OAuth-Flow selbst.

5. Deploy die Funktion

   supabase functions deploy apple-signin-callback

6. Erhalten Sie Ihre Funktion-URL

   Nach der Bereitstellung erhalten Sie eine URL wie:

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

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

   1. Öffnen https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klicken Sie auf die apple-signin-callback Funktion-URL, um sie zu kopieren.

   Speichern Sie diese URL

   Sie benötigen diese URL im nächsten Schritt, wenn Sie die Apple-Entwickler-Portal-Konfiguration konfigurieren.

Schritt 2: Konfigurieren Sie das Apple-Entwickler-Portal

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

Funktion-URL

Stellen Sie sicher, dass Sie Ihre Supabase Edge-Funktion-URL aus Schritt 1 vor dem Fortsetzen haben. Sie benötigen sie, um die Rückruf-URL im Apple-Entwicklerportal zu konfigurieren.

1. Beachten Sie die Apple-Login-Android-Einrichtungsanleitung

   Führen Sie die Apple Login Android Einrichtungsanleitung aus:

   • Erstellen Sie einen Dienst-ID
   • Generate a private key (.p8 file)
   • Holen Sie sich Ihren Team-ID und Schlüssel-ID
   • Konfigurieren Sie die Rückruf-URL

2. Setzen Sie die Rückruf-URL im Apple-Entwicklerportal

   Bei der Konfiguration der Rückruf-URL im Apple Developer Portal (Schritt 6.9 der Apple-Anleitung) 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

   Tun NICHT 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 must benutzen Sie stattdessen Ihre Supabase Edge Function-URL.

   Genauer Übereinstimmungsmodus erforderlich

   Die Rückruf-URL muss genau entsprechen exakt dem, was Sie hier einrichten. Apple ist sehr streng bei der Übereinstimmung von Redirect-URI.

3. Alle erforderlichen Werte sammeln

   Nach Abschluss der Apple-Einrichtungsanleitung sollten Sie folgende Werte haben:

   • APPLE_TEAM_ID: Ihre Apple-Entwickler-Team-ID
   • APPLE_KEY_ID: Die Schlüssel-ID aus dem Apple-Entwicklerportal
   • APPLE_PRIVATE_KEYIhr .p8-Privatschlüssel-Datei (muss base64-codiert sein)
   • Dienstleistungs-ID für Android: Ihre Apple-Dienst-ID (z.B., com.example.app.service)
   • BASE_REDIRECT_URL: Ihre tiefen Verknüpfungs-URL (z.B., capgo-demo-app://path)

   Deep Link URL

   Die BASE_REDIRECT_URL ist die tiefen Verknüpfungsscheme, die in Ihrem AndroidManifest.xmlkonfiguriert ist. Hier wird der Backend nach der Authentifizierung umgeleitet.

   Der Wert Ihrer tiefen Verknüpfung hängt von Ihrem android:scheme="capgo-demo-app" code. Wenn Sie die Einstellung bereits vorgenommen haben android:scheme="capgo-demo-app" in Ihrem AndroidManifest.xml, dann wird Ihr tiefes Link sein. capgo-demo-app://path.

Schritt 3: Supabase-Schlüssel setzen

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

1. Verschlüsseln Sie Ihren privaten Schlüssel

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

   base64 -i AuthKey_XXXXX.p8

   Kopieren Sie die gesamte Ausgabe (es ist ein einzelner langer String).

2. Geheimnisse 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

   Ersatz von Platzhaltern

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

3. Alternative: Legen Sie Geheimnisse in der Supabase-Dashboard

   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 Geheimnisvariable seinen Wert hinzu

Android-App-Konfiguration

Die Apple Login Android Einrichtungsanleitung bereits die Konfiguration Ihrer Android-App abdeckt:

• Hinzufügen der Intent-Filter für tiefere Links AndroidManifest.xml
• die onNewIntent zum MainActivity.java

Stellen Sie sicher, dass Sie diese Schritte abgeschlossen haben, bevor Sie fortfahren. Die tiefgreifende Link-Scheme, die Sie dort konfigurieren, wird Ihre BASE_REDIRECT_URL in Schritt 3.

Schritt 4: Verwenden Sie den Authentifizierungs-Helfer

Nun kannst du den Authentifizierungs-Helfer in deiner App verwenden code.

Implementierung

Die vollständige Implementierung ist im Beispiel-App- supabaseAuthUtils.ts file.

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

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden muss aktualisieren Sie die folgenden Werte, um sie Ihren Konfigurationen anzupassen:

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-Dienst-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 (demselben Wert, den Sie für ANDROID_SERVICE_ID Schritt 3).

Siehe das Vollständige Implementierung als Referenz.

Schritt 5: Testen Sie die Integration

1. Bauen und ausführen Sie Ihre Android-App

   npx cap sync android
   npx cap run android

2. Prüfe die Authentifizierungsablauf

   • Tippe auf den „Mit Apple anmelden“-Button
   • Sie sollten die Apple OAuth-Seite im Browser sehen.
   • Nach der Authentifizierung sollten Sie zurück zur App weitergeleitet werden
   • Überprüfen Sie die Konsole auf Fehler

3. Überprüfen Sie den Ablauf

   Der vollständige Ablauf sollte wie folgt 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 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

Fehlertreiber

Bei Fehlschlag der Authentifizierung:

• URI-Mismatch bei der Weiterleitung: Überprüfen Sie, ob die Rückruf-URL im Apple-Entwicklerportal genau mit APPLE_REDIRECT_URI Geheimnis
• Tiefe Verlinkung funktioniert nicht: Überprüfen Sie, ob AndroidManifest.xml Filter für die Absicht passt sich Ihren BASE_REDIRECT_URL
• Geheimnisse fehlen: Verify all secrets are set correctly using supabase secrets list
• Tokenaustausch fehlschlägt: Überprüfen Sie die Protokoll-Einträge in der Supabase-Dashboard für detaillierte Fehlermeldungen
• App erhält keine Callback: Ensure onNewIntent ist in der MainActivity korrekt implementiert
• Überprüfen Sie 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 Ihrer Service-ID und dem Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome Custom Tab mit der Apple-OAuth-Seite
3. Backend-Rückruf: Apple leitet zu Ihrer Supabase Edge-Funktion mit einer Autorisierung code weiter
4. Token-Wechsel: Die Edge-Funktion wechselt den code für Token mit Apple’s Token-Endpunkt
5. Tiefenlink-Rückruf: Die Edge-Funktion leitet zurück zu Ihrer App mit dem Identitäts-Token
6. Supabase-Anmeldung: Die App erhält den Token und meldet sich bei Supabase an

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

Fortsetzen Sie mit Supabase Apple Login on Android

Wenn Sie Live Update verwenden Supabase Apple Login auf Android" um Authentifizierung und Account-Flüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login, Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, und Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric. Zwei-Faktor-Authentifizierung Zur Implementierungsdetail in Zwei-Faktor-Authentifizierung.