Login Google sur le web

Introduction

Dans ce guide, vous apprendrez à configurer l'authentification Google avec Capgo Authentification sociale pour les applications web. Je suppose que vous avez déjà lu le guide de configuration général.

Utilisation de l'authentification Google sur le web

Utiliser l'authentification Google sur le web est plutôt simple. Pour l'utiliser, vous devez faire les choses suivantes:

1. Créez un client web dans le Console Google

   Note

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

   1. Cliquez sur la barre de recherche

      

   2. Recherchez credentials et cliquez sur l APIs and Services option (n°2 sur l'écran d'écran)

      

   3. Cliquez sur create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez le Application type comme Web application

      

   6. Nommez votre client et cliquez Create

      

   7. Copiez l'ID client, vous en aurez besoin webClientId dans votre application

      

2. Configurez le client Web dans le Console Google

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

      

   2. Ajoutez maintenant, s'il vous plaît, toutes les adresses que vous pourriez utiliser pour votre application. Dans mon cas, je vais Authorized JavaScript originsSEULEMENT utiliser localhost, mais puisque j'utilise un port personnalisé, il faut ajouter les deux et http://localhost Cliquez sur la section Origines JavaScript autorisées avec le bouton AJOUTER URI http://localhost:5173

      1. Veuillez saisir votre URL add URI

         

      2. Origines JavaScript autorisées avec le bouton AJOUTER URI

         

      3. Veuillez répéter jusqu'à ce que vous ayez ajouté toutes les URL

      4. Lorsque vous avez terminé, votre écran devrait ressembler à ceci

         

   3. Ajoutez maintenant quelques Authorized redirect URIsCela dépend de la page que vous souhaitez utiliser le plugin CapacitorSocialLogin. http://localhost:5173/auth

      1. Dans mon cas, je vais l'utiliser sur ADD URI

         

      2. Section des URIs de redirection autorisées avec le bouton AJOUTER URI ADD URL Entrez votre URL et cliquez

         

   4. Dialogue d'ajout d'URI avec l'URL de redirection saisie save

      

3. Now, vous devriez être prêt à appeler login de la manière suivante :

   1. Tout d'abord, importez SocialLogin

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

   2. Ensuite, appelez initialize. Il faut l'appeler SEULEMENT une fois.

      // 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

   Lorsque vous utilisez Google login sur le web, vous DEVEZ appeler toute fonction du plugin lorsque la redirection se produit pour initialiser le plugin afin qu'il puisse gérer la redirection et fermer la fenêtre de popup. Vous pouvez appeler soit isLoggedIn() SOIT 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 Web, SocialLogin.refresh({ provider: 'google' }) n'est pas implémenté, même lors de l'utilisation de google.mode: 'online'. Si vous avez besoin d'un jeton Google frais sur Web, appelez SocialLogin.login({ provider: 'google', ... }) une fois de plus.

   3. Créez un bouton de connexion qui appelle SocialLogin.login lorsqu'il est cliqué

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

Continuez d'ici pour Google Login sur Web

Si vous utilisez Google Login sur le Web pour planifier l'authentification et les flux de compte, connectez-le à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @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 Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs.