how to implement Google Login API in VueJS?

问题:

So I was using the guide and codes from https://developers.google.com/identity/sign-in/web/

When I clicked the button, it works fine, it will redirect me to google login page, and no problem occurs during authentication.

Once finished, it redirected me back to the page (vue component) where the button is located. In theory it should call onSignIn method and print out info with console.log, but it didn't happen.

Somehow Vue was not able to excute data-onsuccess="onSignIn". I tried to change data-onsuccess to dynamic props (:data-onsuccess) or event handling (@data-onsuccess), both of these does not work either.

Does anyone countered this issue before? Or there's special way to implement it on Vue?

回答1:

data-onsuccess="onSignIn" is looking for a global onSignIn function. You need to put onSignIn outside of Vue component.

Another way is using gapi.signin2.render to render sign-in button, then you can use 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>

For more reference: https://developers.google.com/identity/sign-in/web/build-button

回答2:

In case somebody needs a plugin to start working right away without too much setup, try this vue-google-signin-button-directive.