Configuration de l'authentification Google Supabase - Paramètres généraux

Introduction

Cet guide vous guidera à travers l'intégration de l'authentification Google avec Supabase Authentication en utilisant le plugin Social Login Capacitor. Cette configuration vous permet d'utiliser l'authentification native Google sur les plateformes mobiles tout en exploitant l'authentification Supabase pour l'authentification backend.

Prérequis

Avant de commencer, assurez-vous d'avoir :

1. Créé un projet Supabase

2. Lis le context HTML text fragment from a longer Capgo UI string (parent key `read_the_style_guide`). Page/area: Capgo marketing website. Role: Website copy sentence. Seen in: page contributing.astro. Message key `read_the_style_guide` (Read The Style Guide).

3. Configuration générale de Google Login : guide de mise en œuvre des clés OAuth Google : guide de mise en œuvre des clés OAuth Google pour votre plateforme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Remarque

   Avant de commencer le tutoriel Supabase, vous devez générer les identifiants clients pour les plateformes que vous prévoyez utiliser. Vous les utiliserez à l'étape 7 de ce guide.

Activation du fournisseur d'authentification Google OAuth dans Supabase

1. Allez à votre Tableau de bord Supabase

2. Cliquez sur votre projet

   

3. Allez à la Authentication menu

   

4. Cliquez sur le Providers onglet

   

5. Trouvez le Google fournisseur

   

6. Activer le fournisseur

   

7. Ajoutez les identifiants de client pour les plateformes que vous prévoyez d'utiliser

   

   Remarque

   Cela incluait l'identifiant du client web, l'identifiant du client iOS et l'identifiant du client Android. Vous pouvez passer outre la fourniture de certains d'entre eux, en fonction des plateformes que vous prévoyez d'utiliser.

8. Cliquez sur le Save bouton

   

Remarque

Vous context Vous devez définir votre définition (You Definition). Page/area: Site web de marketing Capgo. Role: Long paragraphe de marketing ou juridique. Voir dans: page disclaimer.astro, page return.astro. Clé de message `you_definition` (Définition de vous). Client Secret (for OAuth) ou Callback URL (for OAuth)ou bien, certaines sources pourraient également suggérer de configurer Skip nonce checks pour Google sur iOS, mais avec ce guide, cela n'est pas nécessaire.

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

Comment fonctionne l'assistant d'inscription avec Google et l'authentification Supabase

Implémentation complète

L'implémentation complète est disponible dans le

fichier de l'application d'exemple. Ce fichier est disponible dans le supabaseAuthUtils.ts fichier de l'application d'exemple.

1. Génération de Nonce

La mise en œuvre génère un couple de nonce sécurisé en suivant les exigences de nonce de Supabase Exigences de nonce de Supabase:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flux :

• rawNonce: Chaine alphanumérique sécurisée (64 caractères hexadécimaux)
• nonceDigest: Hachage SHA-256 de rawNonce (codé en hexadécimal)
• nonceDigest est transmis à Google Sign-In → Google inclut le digest de nonce dans le jeton d'ID
• rawNonce est transmis à Supabase → Supabase hache la nonce brute et la compare avec la nonce du jeton

2. Google Sign-In

La fonction initialise le plugin et se connecte avec Google :

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. Validation du JWT

Avant d'envoyer le jeton à Supabase, la mise en œuvre valide le jeton JWT :

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Pourquoi valider avant Supabase ?

La validation du jeton JWT avant d'envoyer le jeton à Supabase sert plusieurs objectifs importants :

1. Prévenir les requêtes non validesSi le jeton a un auditoire incorrect ou une non-conformité nonce, Supabase rejettéra le jeton de toute façon. La validation avant évite les appels API inutiles et fournit des messages d'erreur plus clairs.

2. Problèmes de cache de jetonsOn certain plateformes (notamment iOS), Google Sign-In SDK peut stocker des jetons pour améliorer les performances. Lorsqu'un jeton stocké est retourné, le jeton stocké peut avoir été généré avec un nonce différent (ou aucun nonce du tout), ce qui fait que Supabase rejette le jeton avec une erreur de « mismatch de nonce ». En validant avant d'envoyer à Supabase, nous pouvons détecter ce problème tôt et réessayer automatiquement avec un jeton frais.

3. La sécurité (iOS) : La validation s'assure que le jeton a été émis pour vos identifiants de client Google spécifiques, prévenant ainsi les problèmes de sécurité potentiels liés à l'utilisation de jetons destinés à d'autres applications.

4. Une meilleure gestion des erreurs: La détection des problèmes avant Supabase permet une logique de réessai automatique, essentielle pour gérer les problèmes de cache iOS de manière transparente.

Si la validation échoue, la fonction se déconnecte automatiquement de Google (efface les jetons stockés - critique sur iOS)

1. Réessaye l'authentification une fois (force la génération d'un jeton frais avec le nonce correct)
2. Si la réessai échoue également, retourne une erreur
3. 4. Supabase Sign-In

Enfin, le jeton validé est envoyé à Supabase :

(iOS)

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Référence complète Code

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

• getUrlSafeNonce() - Génère une valeur aléatoire sécurisée pour URL
• sha256Hash() - Hashes une chaîne avec SHA-256
• getNonce() - Génère un pair de nonce
• decodeJWT() - Décode le jeton JWT
• validateJWTToken() - Valide l'audience et la nonce du jeton JWT
• authenticateWithGoogleSupabase() - Fonction d'authentification principale avec redémarrage automatique

Fichiers d'exemple supplémentaires

• SupabasePage.tsx - Exemple de composant avec gestion de redirection (Web)
• SupabaseCreateAccountPage.tsx - Exemple de page de création de compte

Étapes suivantes

Veuillez vous rendre dans le guide de configuration spécifique à la plateforme pour votre plateforme cible :

• Configuration Android
• Configuration iOS
• Configuration Web

Continuez de Supabase Google Login - Paramètres généraux

Si vous utilisez Supabase Google Login - Paramètres généraux pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisez @capgo/capacitor-login-social pour la capacité native dans Utilisez @capgo/capacitor-login-social Utilisez @capgo/capacitor-login-social pour le détail d'implémentation dans @capgo/capacitor-login-social Utilisez @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey Utilisez @capgo/capacitor-biométrique-native pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.