如何在 VueJS 中实现 Google Login API?

Question

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

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

完成后，它将我重定向回按钮所在的页面(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。

Answer 3

如果有人正在寻找一个 Vue 3 插件来使用 Google 身份服务来实现使用 Google 登录、一键注册和自动登录等功能，您可以使用我最近为我的一个项目创建的插件 vue3-google-login。

这是一个使用 vue3-google-login 创建简单 Google 登录按钮的示例代码

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

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

然后像这样使用谷歌登录管理器组件

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