Se connecter avec Google sur le Web

Présentation

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érale..

Configuration de l'authentification Google sur le web

L'utilisation de l'authentification Google sur le web est plutôt simple.

1. Pour l'utiliser, vous devez effectuer les étapes suivantes :

   Note

   Note

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

      

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

      

   3. Cliquez sur le 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 du client, vous en aurez besoin pour webClientId dans votre application

      

2. Configurez le client Web dans le Console Google

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

      

   2. ajoutez maintenant les Authorized JavaScript originsCela devrait inclure toutes les adresses que vous pourriez utiliser pour votre application. Dans mon cas, je vais Utilisez uniquement localhost, mais puisque j'utilise un port personnalisé, il faut ajouter les deux Cliquez sur http://localhost la section Origines JavaScript autorisées avec le bouton AJOUTER URI http://localhost:5173

      1. Veuillez saisir votre URL add URI

         

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

         

      3. Origines JavaScript autorisées avec plusieurs URL localhost ajoutées

      4. Ajoutez maintenant

         

   3. Dans mon cas, je vais l'utiliser sur Authorized redirect URIsIn my case, I am going to be using it on http://localhost:5173/auth

      1. Cliquez sur ADD URI

         

      2. Entrez votre URL et cliquez ADD URL à nouveau

         

   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 devrait ê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 de redirection Web

   Lors de l'utilisation de connexion Google sur le Web, vous DEVEZ appeler toute fonction du plugin lors de la redirection pour initialiser le plugin afin qu'il puisse gérer la redirection et fermer la fenêtre de 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
   });

   Prudence

   Sur le 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', ... }) encore.

   3. Créez un bouton de connexion qui appelle SocialLogin.login lorsque cliqué

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

Continuez de la Google Login sur Web

Google Login sur Web pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login pour la capacité native en utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation en @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour le détail d'implémentation en @capgo/capacitor-native-biometric, et L'authentification à deux facteurs pour le détail d'implémentation en L'authentification à deux facteurs.