Connexion Supabase Apple sur le Web

Prérequis

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

• le Configuration de connexion Apple Web
• la Configuration de 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'assistant d'authentification

La authenticateWithAppleSupabase fonction gère l'ensemble du flux 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 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 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 à l'aide de __CAPGO_KEEP_0__ signInWithIdToken()

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

Remarques 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 développeur Apple avec les URL de retour correctes
• Assurez-vous d'avoir ajouté votre domaine aux domaines autorisés dans le Portail développeur Apple

URL de redirection

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

ID du client Supabase

Dans Supabase, configurez votre fournisseur Apple 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 une virgule). com.example.app.service)

Mettre à jour la fonctionnalité d'aide

Section intitulée “Mettre à jour la fonctionnalité d'aide”

Lorsque vous utilisez la fonction d'aide, vous devez authenticateWithAppleSupabase mettre à jour la mettre à jour pour qu'il corresponde à votre ID de service Apple : clientId Copier dans le presse-papiers

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

Remplacez

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

Section intitulée “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 exemple d'application code à titre de référence