web-dev-qa-db-fra.com

comment implémenter l'API de connexion Google dans VueJS?

J'utilisais donc le guide et les codes de

https://developers.google.com/identity/sign-in/web/

Lorsque j'ai cliqué sur le bouton, cela fonctionne très bien, il me redirigera vers la page de connexion Google, et aucun problème ne se produit lors de l'authentification.

Une fois terminé, il m'a redirigé vers la page (composant vue) où se trouve le bouton. En théorie, il devrait appeler la méthode onSignIn et afficher les informations avec console.log, mais cela ne s'est pas produit.

D'une certaine manière Vue n'a pas pu excuter data-onsuccess="onSignIn". J'ai essayé de changer data-onsuccess aux accessoires dynamiques (:data-onsuccess) ou la gestion des événements (@data-onsuccess), les deux ne fonctionnent pas non plus.

Est-ce que quelqu'un a déjà contré ce problème? Ou existe-t-il un moyen spécial de l'implémenter sur Vue?

vue.jsgoogle-apigoogle-signingoogle-login
8
Travis Su

data-onsuccess="onSignIn" recherche une fonction globale onSignIn. Vous devez mettre onSignIn en dehors du composant Vue.

Une autre façon consiste à utiliser gapi.signin2.render pour afficher le bouton de connexion, vous pouvez alors utiliser onSignIn inside Vue component:

<template>
  <div id="google-signin-button"></div>
</template>

<script>
export default {
  mounted() {
    gapi.signin2.render('google-signin-button', {
      onsuccess: this.onSignIn
    })
  },
  methods: {
    onSignIn (user) {
      const profile = user.getBasicProfile()
    }
  }
}
</script>

Pour plus de référence: https://developers.google.com/identity/sign-in/web/build-button

10
ittus

Si quelqu'un a besoin d'un plugin pour commencer à travailler immédiatement sans trop de configuration, essayez ceci vue-google-signin-button-directive .

4
mejiamanuel57