如何在 VueJS 中实现 Google Login API? [英] how to implement Google Login API in VueJS?

问题描述

所以我使用了来自 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.

完成后，它将我重定向回按钮所在的页面(vue 组件).理论上它应该调用 onSignIn 方法并使用 console.log 打印出信息，但它没有发生.

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.

不知何故，Vue 无法执行 data-onsuccess="onSignIn".我试图将 data-onsuccess 更改为动态道具 (:data-onsuccess) 或事件处理 (@data-onsuccess)，这两者也不起作用.

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.

之前有没有人解决过这个问题?或者有什么特殊的方式可以在 Vue 上实现?

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

推荐答案

data-onsuccess="onSignIn" 正在寻找一个全局的 onSignIn 函数.您需要将 onSignIn 放在 Vue 组件之外.

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

另一种方法是使用gapi.signin2.render来渲染登录按钮，然后你可以在Vue组件中使用onSignIn:

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>

更多参考:https://developers.google.com/身份/登录/网络/构建按钮

这篇关于如何在 VueJS 中实现 Google Login API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！