Supabase Apple Login sur le Web

Prérequis

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

• le Paramètres de connexion Apple Web
• le Paramètres de connexion Apple Login - Supabase.

Mise en œuvre

La mise en œuvre complète est disponible dans le dossier de l'application d'exemple. Cette guide explique les principaux concepts et comment l'utiliser. supabaseAuthUtils.ts En utilisant l'assistant d'authentification

Section intitulée « En utilisant l'assistant d'authentification »

fichier gère l'ensemble du flux d'authentification : authenticateWithAppleSupabase Copier dans le presse-papiers

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

Section intitulée « Comment ça marche »

Initialisation

1. L'initialisation se fait via l'API: La plugin est initialisée avec votre ID de Service et l'URL de la page actuelle en tant que URL de redirection
2. OAuth Popup: Ouvre une fenêtre popup avec la page d'authentification d'Apple
3. User Authentication: L'utilisateur s'authentifie avec Apple dans la popup
4. Identity Token: Apple retourne un jeton d'identité (JWT) contenant les informations de l'utilisateur
5. Supabase Authentication: Le jeton d'identité est envoyé à Supabase en utilisant signInWithIdToken()

La fonctionnalité de l'assistant configure automatiquement le navigateur web et configure tout en conséquence.

Important Notes

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 des développeurs Apple avec les URLs de retour correctes
• Assurez-vous que votre domaine est ajouté aux domaines autorisés dans le Portail des développeurs Apple

URL de redirection

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

ID client Supabase

Dans Supabase, configurez votre fournisseur Apple avec :

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

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).

Mettez à jour la fonction d'aide

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

Remplacer 'your.service.id.here' avec 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 :

• Incohérence de l'ID de service : Vérifiez que votre ID de service correspond dans le portail Apple Developer et votre code
• L'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
• Popup bloqué: Vérifiez les paramètres du navigateur - certains navigateurs bloquent les pop-ups 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
• Vérifiez l'exemple d'application __CAPGO_KEEP_0__ example app code Continuez depuis Supabase Apple Login on Web

Section intitulée “Continuez depuis Supabase Apple Login on Web”

Capacitor Supabase Apple Login on Web pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login 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-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.