Supabase Apple Login sur Web

Préalables

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

• le Paramétrage Apple Login Web
• le Paramétrage Supabase Apple Login - Paramètres Généraux.

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'Aide à l'Authentification

Paramétrage

Le authenticateWithAppleSupabase La 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 Internet, Apple Sign-In utilise un flux de connexion OAuth popup :

1. InitialisationLe plugin est initialisé avec votre ID de service et l'URL de la page actuelle en tant que URL de redirection.
2. Pop-up OAuth: Ouvre une fenêtre de popup avec la page d'authentification OAuth d'Apple.
3. Authentification de l'utilisateur: L'utilisateur s'authentifie avec Apple dans la fenêtre contextuelle
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

• Le 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 URL de retour correctes
• Assurez-vous que votre domaine est ajouté aux domaines autorisés dans le Portail Apple Developer

URL de redirection

• Sur le web, l'URL de redirection est automatiquement définie sur window.location.href (URL actuelle de la page)
• 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 ID de service Apple (par exemple,  com.example.app.service)

If vous utilisez également iOS, vous devrez fournir les deux identifiants d'application et d'identifiant de service dans le champ Identifiant 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 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

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

• Mauvais identifiant de service : Vérifiez que votre identifiant 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
• Popup bloqué : Vé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 Supabase: Vérifiez que votre ID de service est correctement configuré dans les paramètres de fournisseur Apple de Supabase
• Exemple d'application __CAPGO_KEEP_0__ example app code Continuez de la configuration de Supabase Apple Login sur Web

Section intitulée “Continuez de la configuration de Supabase Apple Login sur Web”

pour planifier l'authentification et les flux de compte, connectez-l’à En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour la capacité native dans En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login, Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-connexion sociale pour les détails d'implémentation dans @capgo/capacitor-connexion sociale, @capgo/capacitor-mot de passe sécurisé pour les détails d'implémentation dans @capgo/capacitor-mot de passe sécurisé, @capgo/capacitor-authentification biométrique native pour les détails d'implémentation dans @capgo/capacitor-authentification biométrique native, et L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs.