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

Question

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

我喜欢使用 Google Identity Services 将使用 Google 登录功能添加到我的 Web 应用程序中，该应用程序提供一键注册和自动登录等功能，我如何在 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>