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

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 3 插件来使用 Google Identity Services 来实现使用 Google 登录、一键注册和自动登录等功能，您可以使用插件 vue3-google-login 这是我最近为我的一个项目创建的。

这里是使用 vue3-google-login

创建简单 Google 登录按钮的示例代码

首先 使用您的 Google API 客户端 ID 初始化 main.js 中的插件

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'

const app = createApp(App)

app.use(vue3GoogleLogin, {
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
})

app.mount('#app')

然后像这样使用GoogleLogin组件

<script setup>
const callback = (response) => {
  console.log("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback"/>
</template>

Answer 3

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