Supabase Apple Login - Paramètres généraux

Vue d'ensemble

Ce guide vous aidera à intégrer Apple Sign-In avec l'authentification Supabase. Apple Sign-In fournit une méthode d'authentification sécurisée et axée sur la vie privée qui fonctionne sur les plateformes iOS, Android et Web.

Prérequis

Avant de commencer, assurez-vous d'avoir :

1. Créé un projet Supabase

2. Lu le Guide de configuration Apple Login guide pour configurer les clés d'authentification Apple OAuth

3. Suivi des guides spécifiques à la plateforme pour configurer les clés d'authentification Apple OAuth pour votre plateforme cible :

   • Configuration Android
   • iOS Setup
   • Configuration de l'iPhone

   Note

   Avant de commencer le tutoriel Supabase, vous devez générer les identifiants de client pour les plateformes que vous prévoyez utiliser.

   Pour iOS, l'identifiant de client est le même que votre ID d'application. Pour Android et Web, l'identifiant de client est le même que votre ID de service. Vous les utiliserez à l'étape 7 de ce guide.

Activation du fournisseur OAuth Apple dans Supabase

1. Allez à votre Tableau de bord Supabase

2. Cliquez sur votre projet

   

3. Allez-y vers le Authentication menu

   

4. Cliquez sur le Providers onglet

   

5. Trouvez le Apple fournisseur

   

6. Activer le Apple fournisseur

   

7. Remplissez la configuration du ID client :

   Remarque

   Si vous utilisez Apple login pour iOS, l'ID client est le même que votre ID d'application. Si vous utilisez Apple login pour Android ou Web, l'ID client est le même que votre ID de service. Si vous utilisez les deux, vous devez fournir à la fois l'ID d'application et l'ID de service.

   

8. Cliquez sur le Save bouton

   

   Remarque

   Vous NE DEVEZ PAS LE FAIRE setup Secret key (for OAuth)Nous allons mettre en place une mise en œuvre de backend personnalisée pour gérer l'inscription Apple.

Voilà, vous avez maintenant activé l'inscription Apple avec l'authentification Supabase 🎉

Utilisation de l'assistant d'authentification

La mise en œuvre complète inclut une fonction d'aide authenticateWithAppleSupabase() qui gère l'intégralité du flux d'inscription Apple avec Supabase. Cette fonction :

• Initialise l'inscription Apple avec une configuration spécifique à la plateforme
• Gère le flux d'authentification (nativement sur iOS, redirection OAuth sur Android/Web)
• Extrait le jeton d'identité d'Apple
• S'inscrit à Supabase avec le jeton d'identité

Implémentation complète

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts Utilisation de base

Section intitulée « Utilisation de base »

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 »

iOS

• : Utilise l'inscription native Apple (pas de URL de redirection nécessaire, utilise automatiquement l'ID de l'application)__CAPGO_KEEP_0__
• Android: Utilise la méthode de redirection OAuth avec une fonction d'edge backend (exige l'ID de service)
• Web: Utilise la méthode de popup OAuth (exige l'ID de service et l'URL de la page actuelle en tant que redirection)

La fonction retourne un jeton d'identité de Apple, qui est ensuite utilisé pour s'authentifier avec Supabase à l'aide de supabase.auth.signInWithIdToken().

Continuez de là de Supabase Apple Login - Paramètres généraux

Supabase Apple Login - Paramètres généraux pour planifier l'authentification et les flux de compte, connectez-le avec Utilisez @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour la capacité native dans Utilisez @capgo/capacitor-social-login, for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-connexion-social pour les détails d'implémentation dans @capgo/capacitor-connexion-social, @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-authentification-biometrique-native pour les détails d'implémentation dans @capgo/capacitor-authentification-biometrique-native, et L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs.