Supabase Apple Login - Configuration Générale

Vue d'ensemble

Cette 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. Lis le context : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `read_the_style_guide`). Page/zone : site web de marketing Capgo. Rôle : phrase de site web. Vu dans : page contributing.astro. Clé de message `read_the_style_guide` (Lisez Le Guide de Style). guide pour configurer les informations d'authentification Apple OAuth

3. Suivez les guides spécifiques à la plateforme pour configurer les informations d'authentification Apple OAuth pour votre plateforme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Note

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

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

Activation du fournisseur d'authentification Apple OAuth dans Supabase

1. Allez à votre Tableau de bord Supabase

2. __CAPGO_KEEP_0__

   

3. __CAPGO_KEEP_0__ Authentication Sélecteur de projet Supabase

   

4. Allez dans le Providers __CAPGO_KEEP_0__

   

5. __CAPGO_KEEP_0__ Apple Menu d'authentification Supabase

   

6. Activer le Apple le fournisseur

   

7. Remplissez les informations de configuration du client ID :

   Note

   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

   

   Note

   Vous DO NOT HAVE TO configurer Secret key (for OAuth). Nous mettrons en place une mise en œuvre backend personnalisée pour gérer l'authentification Apple.

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

En utilisant 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'authentification Apple avec Supabase. Cette fonction :

• Initialise l'authentification Apple avec une configuration spécifique à la plateforme
• Gère le flux d'authentification (nativement sur iOS, redirection OAuth sur Android/Web)
• Extraits le jeton d'identité d'Apple
• Se connecte à 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 »

La fonction d'aide gère automatiquement les différences spécifiques à la plateforme :

• iOS: Utilise l'inscription native Apple (pas de URL de redirection nécessaire, utilise automatiquement l'ID de l'application)
• Android: Utilise le flux de redirection OAuth avec la fonction de bordure de l'arrière-plan (exige l'ID de service)
• Web: Utilise le flux 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 Supabase Apple Login - Paramètres Généraux

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-l’avec Utilisation de @capgo/capacitor-social-login pour la capacité native dans Utilisation de @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 Deux facteurs d'authentification pour le détail d'implémentation dans Deux facteurs d'authentification.