如何在VueJS中实现Google Login API？

Question

因此，我使用了https://developers.google.com/identity/sign-in/web/中的指南和代码

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

完成后，它将我重定向到该按钮所在的页面（vue组件）。从理论上讲，它应该调用onSignInmethod并使用来打印信息console.log，但这没有发生。

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

有人曾经解决过这个问题吗？还是有在Vue上实现它的特殊方法？

Answer 1

data-onsuccess="onSignIn"正在寻找全局onSignIn功能。您需要放置onSignIn在Vue组件之外。

另一种方法是使用gapi.signin2.render呈现登录按钮，然后可以onSignIn在Vue组件内部使用：

<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。