Connexion Google sur le web

Copiez un prompt de configuration avec les étapes d'installation et la guide Markdown complet pour ce plugin.

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. Prêt à copier.

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

Créer un client web dans le Console Google

Si vous avez déjà configuré l'authentification Google pour Android, vous pouvez passer cette étape et aller directement à l'étape 2, 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 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 sur Create
7. Copiez l'ID client, vous en aurez besoin webClientId dans votre application
Configurez le client Web dans la Console Google
1. Veuillez ouvrir la page des liste des
2. Cela doit inclure 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 Veuillez cliquer sur http://localhost:5173
  1. credentials 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 à celui-ci
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 URI de redirection autorisées avec bouton AJOUTER URI ADD URL Saisissez votre URL et cliquez
4. Cliquez save

Maintenant, vous devriez être prêt à appeler login comme suit depuis JavaScript :

Importez d'abord SocialLogin

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

Appel ensuite 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',
   }
 })
})

Lors de l'utilisation de la connexion Google sur le web, vous Il est obligatoire d'appeler toute fonction du plugin lorsqu'il se produit un redirigeement pour initialiser le plugin afin qu'il puisse gérer le redirigeement et fermer la fenêtre de popup. Vous pouvez appeler soit OU isLoggedIn() - les deux déclencheront la gestion du redirigeement : initialize() Copier dans le presse-papier

// 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
});

protectedTokens SocialLogin.login Lorsque cliqué

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