Google Login sur le web

Introduction

Dans ce guide, vous apprendrez à configurer Google Login avec Capgo Social Login pour les applications web. Je pars du principe que vous avez déjà lu le guide de configuration générale.

Utiliser Google login sur le web

L'utilisation de Google login sur le web est assez simple. Pour l'utiliser, vous devez effectuer les étapes suivantes :

1. Créer un client web dans la Google Console

   Remarque

   Si vous avez déjà configuré Google Login pour Android, vous pouvez ignorer cette étape car vous avez déjà créé un client web. Vous pouvez passer directement à l'étape 2.

   1. Cliquez sur la barre de recherche

      

   2. Recherchez credentials et cliquez sur APIs and Services option (numéro 2 sur la capture d'écran)

      

   3. Cliquez sur create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez l’ Application type comme Web application

      

   6. Nommez votre client et cliquez sur Create

      

   7. Copiez l'ID client, vous l'utiliserez comme webClientId dans votre application

      

2. Configurez le client web dans la console Google

   1. Veuillez ouvrir la page des identifiants et cliquez sur votre client web

      

   2. Maintenant, veuillez ajouter le Authorized JavaScript origins. Cela doit inclure toutes les adresses que vous pourriez utiliser pour votre app. Dans mon cas, je vais UNIQUEMENT utiliser localhost, mais comme j'utilise un port personnalisé, je dois ajouter les deux http://localhost et http://localhost:5173

      1. Veuillez cliquer sur add URI

         

      2. Veuillez saisir votre URL

         

      3. Please repeat until you added all the URLs

      4. Une fois terminé, votre écran devrait ressembler à ceci

         

   3. Maintenant, veuillez ajouter quelques Authorized redirect URIs. Cela dépendra de la page sur laquelle vous utilisez le plugin CapacitorSocialLogin. Dans mon cas, je vais l'utiliser sur http://localhost:5173/auth

      1. Veuillez cliquer sur ADD URI

         

      2. Saisissez votre URL et cliquez sur ADD URL à nouveau

         

   4. Cliquez save

      

3. Maintenant, vous devriez être prêt à appeler login depuis JavaScript comme ceci :

   1. Tout d'abord, importez SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Then, call initialize. This should be called ONLY once.

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Gestion de la redirection web

   When using Google login on web, you DEVEZ appeler n'importe quelle fonction du plugin lors de la redirection pour l'initialiser, afin qu'il puisse gérer la redirection et fermer la fenêtre popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection :

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   Attention

   Sur le Web, SocialLogin.refresh({ provider: 'google' }) n'est pas implémenté, même en utilisant google.mode: 'online'. Si vous avez besoin d'un nouveau token Google sur le Web, appelez SocialLogin.login({ provider: 'google', ... }) à nouveau.

   3. Créez un bouton de connexion qui appelle SocialLogin.login lors du clic

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Handle the response
      console.log(JSON.stringify(res));

Continuer avec Google Login sur le Web

Si vous utilisez Google Login sur le web pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.