Google Login sur Web

Introduction

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

Utiliser l'authentification Google sur le web

Utiliser la connexion Google sur le web est plutôt simple. Pour l'utiliser, vous devez suivre les étapes suivantes :

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

   Remarque

   Si vous avez déjà configuré la connexion Google pour Android, vous pouvez passer 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 l'option (n° 2 sur l'écran d'écran) APIs and Services Résultats de recherche montrant l'option de clés avec APIs et Services mis en surbrillance

      

   3. Cliquez sur le bouton 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 utiliserez un dans votre application webClientId Détails de l'ID client montrant l'ID client Web à copier

      

2. Configurez le client web dans la console Google

   1. Veuillez ouvrir la page des clés d'accès et cliquez sur votre client web

      

   2. Ajoutez maintenant la Authorized JavaScript originsCela doit inclure toutes les adresses que vous pourriez utiliser pour votre application. Dans mon cas, je vais SEULEMENT utiliser localhost, mais puisque j'utilise un port personnalisé, il faut ajouter les deux http://localhost et http://localhost:5173

      1. Veuillez cliquer sur add URI

         

      2. Veuillez saisir votre URL

         

      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 sur. Dans mon cas, je vais l'utiliser sur http://localhost:5173/auth

      1. Cliquez sur ADD URI

         

      2. Saisissez votre URL et cliquez ADD URL Encore

         

   4. Cliquez save

      

3. Maintenant, vous devriez être prêt à appeler login à partir de JavaScript comme suit :

   1. Tout d'abord, importez SocialLogin

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

   2. Ensuite, appelez initialize. Cela doit être appelé 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 du redirigeant web

   Lorsque vous utilisez la connexion Google sur le web, vous DEVEZ appeler n'importe quelle fonction du plugin lorsqu'il se produit le redirigeement pour initialiser le plugin afin qu'il puisse gérer le redirigeement et fermer la fenêtre de popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion du redirigeement :

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

   En ligne de commande, 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 en ligne de commande, appelez SocialLogin.login({ provider: 'google', ... }) Créez un bouton de connexion qui appelle

   3. lorsqu'il est cliqué SocialLogin.login redirect handling

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

Continuer depuis Google Login sur le Web

Si vous utilisez Google Login sur le Web pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @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 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.