vue3接入谷歌登录

传统的谷歌接入方式太墨迹了，代码量多少不说而且巨麻烦，于是我找到了这么一个插件：

vue3-google-login 。

第一步：先在谷歌平台创建一个web项目，这个可以参考一下创建流程，获得谷歌客户端Id.

第二步：安装插件执行

npm i vue3-google-login

第三步：在项目中配置全局组件（main.js）

import { createApp } from 'vue'
import './assets/style/style.css'
import App from './App.vue'

//谷歌相关插件
import vue3GoogleLogin from 'vue3-google-login'  //这里替换成你自己的谷歌客户端id

//获取谷歌客户端id
let clientId = import.meta.env.VITE_CLIENT_ID;

let app = createApp(App)

//使用谷歌登录插件
app.use(vue3GoogleLogin, {
  clientId,
})
//注册全局组件
app.component('SvgIcon', SvgIcon)

app.mount('#app')

第四步：使用组件

<script setup>
const callback = (response) => {
  // This callback will be triggered automatically 
  // if one single Google account is already logged in
  console.log("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback" prompt auto-login/>
</template>

亲测有效，并且好用，

这是插件文档链接：vue3-google-login

翻译成中文，很好理解，希望对你有帮助！