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

问题描述

所以我正在使用 https://developers.google上的指南和代码.com/identity/sign-in/web/

当我单击按钮时，它可以正常工作，它将重定向我到google登录页面，并且在身份验证过程中没有问题.

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