Connexion Apple Supabase sur le Web

Prerequisites

Ce guide vous aidera à intégrer Apple Sign-In avec Supabase Authentication sur le Web. Il est supposé que vous avez déjà terminé :

• le Configuration de l'authentification Apple Web
• le Connexion Apple Supabase - Configuration Générale.

Mise en œuvre

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts Cette guide explique les concepts clés et comment l'utiliser.

Utilisation de l'Aide à l'authentification

La authenticateWithAppleSupabase fonction gère l'ensemble de la chaîne d'authentification :

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

Comment ça marche

Sur Web, Apple Sign-In utilise un flux OAuth popup :

1. InitialisationLa plugin est initialisée avec votre ID de service et l'URL actuelle de la page en tant qu'URL de redirection.
2. OAuth Popup: Opens a popup window with Apple’s OAuth page
3. Authentification de l'utilisateur: L'utilisateur s'authentifie avec Apple dans la popup
4. Jeton d'identité: Apple retourne un jeton d'identité (JWT) contenant les informations de l'utilisateur
5. Authentification Supabase: Le jeton d'identité est envoyé à Supabase en utilisant signInWithIdToken()

La fonction d'aide détecte automatiquement le plateau web et configure tout en conséquence.

Notes importantes

Configuration de l'ID de service

• Web nécessite votre ID de service Apple (même que pour Android)
• L'ID de service doit être configuré dans le portail Apple Developer avec les URL de retour correctes
• Assurez-vous que votre domaine est ajouté aux domaines autorisés dans le portail Apple Developer

URL de redirection

• Sur web, l'URL de redirection est automatiquement définie sur window.location.href (URL de la page actuelle)
• Cela doit correspondre à l'une des URL de retour configurées dans le portail Apple Developer
• Assurez-vous que les deux URL, avec et sans slash final, sont configurées dans le portail Apple Developer

ID du client Supabase

Dans Supabase, configurez votre fournisseur Apple avec :

• ID du client : Votre identifiant de service Apple (par exemple, com.example.app.service)

Si vous utilisez également iOS, vous devez fournir les deux ID App et Service dans le champ ID Client de Supabase (séparés par une virgule).

Mettre à jour la fonction d'aide

Lorsque vous utilisez la authenticateWithAppleSupabase fonction d'aide, vous devez mettre à jour clientId pour correspondre à votre identifiant de service Apple :

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Important

Remplacer 'your.service.id.here' Avec votre identifiant Apple réel (la même valeur que vous avez configurée dans le portail Apple Developer).

Troubleshooting

ID de service incohérent

• ID de service incohérentVérifiez que votre ID de service correspond dans le Portail Apple Developer et dans votre code
• L'URL de retour non configuréeAssurez-vous que l'URL actuelle de votre page (avec et sans slash final) est configurée dans le portail Apple Developer.
• Blocage de popupVérifiez les paramètres du navigateur - certains navigateurs bloquent les popups par défaut
• Domaine non autoriséVérifiez que votre domaine est ajouté aux domaines autorisés dans le portail Apple Developer
• Configuration de SupabaseVérifiez que votre ID de service est correctement configuré dans les paramètres du fournisseur Apple Supabase.
• Vérifiez le l'exemple d'application code pour référence

Continuez de Supabase Apple Login sur Web

Si vous utilisez Connexion Apple Supabase sur Web pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-auth-biometrique pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs