webentwicklung-frage-antwort-db.com.de

Wie implementiere ich die Google Login API in VueJS?

Also habe ich den Leitfaden und die Codes von verwendet

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

Wenn ich auf die Schaltfläche geklickt habe, funktioniert es einwandfrei. Ich werde zur Google-Anmeldeseite weitergeleitet, und während der Authentifizierung tritt kein Problem auf.

Sobald ich fertig war, leitete es mich zurück zu der Seite (VUE-Komponente), auf der sich die Schaltfläche befindet. Theoretisch sollte es die Methode onSignIn aufrufen und Informationen mit console.log ausgeben, aber das ist nicht geschehen.

Irgendwie konnte Vue konnte data-onsuccess="onSignIn" nicht ausfindig machen. Ich habe versucht, data-onsuccess in dynamische Requisiten (:data-onsuccess) oder Ereignisbehandlung zu ändern (@data-onsuccess), beide funktionieren auch nicht.

Hat jemand diesem Problem zuvor widersprochen? Oder gibt es einen speziellen Weg, um es auf Vue zu implementieren?

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

data-onsuccess="onSignIn" sucht nach einer globalen onSignIn Funktion. Sie müssen onSignIn außerhalb der Komponente Vue) einfügen.

Ein anderer Weg ist die Verwendung von gapi.signin2.render zum Rendern der Anmeldeschaltfläche können Sie onSignIn innerhalb der Vue Komponente verwenden:

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

Weitere Informationen: https://developers.google.com/identity/sign-in/web/build-button

10
ittus

Falls jemand ein Plugin benötigt, um ohne zu viel Setup sofort mit der Arbeit zu beginnen, probieren Sie diese vue-google-signin-button -direktive .

4
mejiamanuel57