如何在 VueJS 中实现 Google 登录 API？

Posted 2023-02-23

【中文标题】如何在 VueJS 中实现 Google 登录 API？

【英文标题】：how to implement Google Login API in VueJS?

【发布时间】：2018-11-19 00:40:47

【问题描述】：

所以我使用的是来自https://developers.google.com/identity/sign-in/web/的指南和代码

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

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

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

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

【问题讨论】：

请包含更多代码。你如何定义onSignIn函数？是全局函数还是Vue组件内部？

@ittus 它在一个 vue 组件中

【参考方案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

【讨论】：

除非我刷新页面，否则它不会调用onSignIn，这是什么问题？

或者如果我想把它放在vue组件之外，我应该放在哪里？

你可以放到main.js

【参考方案2】：

如果有人需要一个插件在没有太多设置的情况下立即开始工作，试试这个vue-google-signin-button-directive。

【讨论】：

我通常反对使用库来做这样的事情，但这个是迄今为止最简单的。

不明白为什么它被实现为指令而不是组件。

因为指令会在按钮的设计和道具方面为您提供更大的灵活性。 @Pithikos