Question

所以我使用了

中的指南和代码

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

当我点击按钮时，它工作正常，它会将我重定向到谷歌登录页面，并且在身份验证期间不会出现问题。

完成后，它会将我重定向回按钮所在的页面（vue组件）。从理论上讲，它应该调用onSignIn方法并使用console.log打印出信息，但事实并非如此。

不知何故，Vue无法执行data-onsuccess="onSignIn"。我尝试将data-onsuccess更改为动态道具（:data-onsuccess）或事件处理（@data-onsuccess），这两种方式都不起作用。

之前有人反驳过这个问题吗？或者有特殊的方法在Vue上实现它？

Answer 1

data-onsuccess="onSignIn"正在寻找全球onSignIn功能。您需要将onSignIn放在Vue组件之外。

另一种方法是使用gapi.signin2.render呈现登录按钮，然后您可以在Vue组件中使用onSignIn：

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

更多参考：https://developers.google.com/identity/sign-in/web/build-button

Answer 2

万一有人需要一个插件而无需太多设置就可以立即开始工作，请尝试使用此vue-google-signin-button-directive。

如何在VueJS中实现Google Login API？

2 个答案: