Vue 3 Google 登录用户身份验证在控制台中显示已弃用的警告

Question

我正在尝试在我的 Vue 3 应用程序中实现使用 Google 登录功能，我找到了一些 npm 包来实现此功能，但这些包很快就会被弃用（此警告显示在控制台中）。

我喜欢使用Google Identity Services将使用 Google 登录功能添加到我的网络应用程序中，该应用程序提供一键注册和自动登录等功能，我如何在 Vue 3 中轻松实现此功能？

Answer 1

我创建了一个小插件vue3-google-login，它使用Google Identity Services来实现“使用 Google 登录”、“一键注册”和“自动登录”等功能。

以下是使用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>