Login Google sur le web

Copiez un prompt de configuration avec les étapes d'installation et le 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.

L'utilisation de 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 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' APIs and Services option (n°2 sur l'écran d'aperçu)
3. Cliquez sur create credentials
4. Sélectionner OAuth client ID
5. Sélectionnez le Application type as Web application
6. Nommez votre client et cliquez Create
7. Copiez l'ID client, vous en aurez besoin pour webClientId dans votre application
Configurer le client Web dans le Console Google
1. Veuillez ouvrir la page de credenciaux et cliquez sur votre client web
2. Ajoutez maintenant la Authorized JavaScript originsCela devrait 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é, je dois 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

Maintenant, vous devriez être prêt à appeler login comme dans JavaScript de cette façon

Tout d'abord, importez SocialLogin

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

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

When using Google login on web, you DEVEZ appeler toute fonction du plugin lorsqu'il se produit le redirigeant pour initialiser le plugin afin qu'il puisse gérer le redirigeant et fermer la fenêtre de popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclenchent 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
});

lorsque vous cliquez dessus SocialLogin.login lorsqu'il est cliqué

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

Si vous utilisez La connexion Google sur le Web pour planifier l'authentification et les flux de compte, connectez-l’à En utilisant @capgo/capacitor-connexion sociale pour la capacité native dans En utilisant @capgo/capacitor-connexion sociale @capgo/capacitor-connexion sociale pour le détail d'implémentation dans @capgo/capacitor-connexion sociale @capgo/capacitor-mot de passe pour le détail d'implémentation dans @capgo/capacitor-mot de passe @capgo/capacitor-biométrie native 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.

Login Google sur le web

Introduction

Utilisation de l'authentification Google sur le web

Continuez de la connexion Google sur le Web