Supabase Apple Login on Web

Prérequis

Cette guide vous aidera à intégrer Apple Sign-In avec l'authentification Supabase sur Web. Il est supposé que vous avez déjà réalisé :

• le Configuration de connexion Apple Web
• la Configuration de connexion Apple - Paramètres généraux de Supabase.

Mise en œuvre

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

Section intitulée “Utilisation de l'Assistant d'authentification”

fonction gère l'ensemble du flux d'authentification: authenticateWithAppleSupabase __CAPGO_KEEP_0__

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 le Web, Apple Sign-In utilise un flux de popup OAuth :

1. Initialisation: Le plugin est initialisé avec votre ID de service et l'URL de la page actuelle en tant que URL de redirection
2. Popup OAuth: Ouvre une fenêtre popup avec la page OAuth d'Apple
3. Authentification de l'utilisateur: L'utilisateur s'authentifie auprès d'Apple dans la popup
4. Jeton d'identité: Apple retourne un jeton d'identité (JWT) contenant les informations de l'utilisateur
5. Supabase Authentication: Le jeton d'identité est envoyé à Supabase à l'aide de signInWithIdToken()

La fonctionnalité de l'assistant détecte automatiquement le système d'exploitation 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 du développeur Apple avec les URLs de retour correctes
• Assurez-vous d'avoir ajouté votre domaine aux domaines autorisés dans le Portail du développeur Apple

URL de redirection

• On 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 du développeur Apple
• Assurez-vous que les deux URL, avec et sans slash final, soient configurées dans le Portail du développeur Apple

ID du client Supabase

Configurez votre fournisseur Apple dans Supabase avec :

• ID du client : Votre ID de service Apple (par exemple,Si vous utilisez également iOS, vous devrez fournir les deux ID d'application et de service dans le champ ID du client de Supabase (séparés par des virgules). com.example.app.service)

Mettez à jour la fonction d'aide

Section intitulée “Mettez à jour la fonction d'aide”

Lorsque vous utilisez la authenticateWithAppleSupabase fonction d'aide, vous devez mettre à jour la clientId pour qu'elle corresponde à votre ID 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

Remplacez 'your.service.id.here' par votre ID de service Apple réel (la même valeur que vous avez configurée dans le portail Apple Developer).

Résolution des problèmes

Si l'authentification échoue :

• Mauvaise correspondance de l'ID de service: Vérifiez que votre ID de service correspond dans le portail Apple Developer et dans votre code
• URL de retour non configurée: Assurez-vous que votre URL actuelle de page (avec et sans slash final) est configurée dans le portail Apple Developer
• Pop-up bloqué: Vérifiez les paramètres du navigateur - certains navigateurs bloquent les pop-up par défaut
• Domaine non autorisé: Vérifiez que votre domaine est ajouté aux domaines autorisés dans le portail Apple Developer
• Configuration de Supabase: Vérifiez que votre ID de service est correctement configuré dans les paramètres de fournisseur Apple de Supabase
• Révision de la configuration exemplaire d'application code en référence

Continuez à partir de Supabase Apple Login sur Web

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