最近在学习前端，学着搭建了一个自己的网站，用的是vue3+vite。不得不说前端的代码真的挺难写的，typescript也写不明白，找别人的代码一会儿js一会儿ts，只能说是一头包。

因为需要登录功能，首先加了一个简单的邮箱密码登录功能，就想着再加个谷歌登录功能。好在很快就找到了一个vue3用的谷歌登录组件，按照文档很快就完成了接入。

不过第一步需要先去谷歌控制台开启谷歌登录，配置客户端ID。

配置谷歌登录

官方文档： https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=zh-cn

• 进入 谷歌控制台 新建一个项目

• 设置OAuth同意屏幕，配置网站域名、名称、图标、电子邮件等

• 进入凭据，设置OAuth2.0客户端ID，配置已获授权的 JavaScript 来源，以及已获授权的重定向 URI（服务端调用需要配置），配置完成后获得客户端ID和密钥

安装vue3-google-login

vue3-google-login插件 https://devbaji.github.io/vue3-google-login/

npm install vue3-google-login

初始化组件

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

使用组件

然后我就在login.vue组件中引入登录组件

<template>
    <GoogleLogin :callback="callback" />
</template>


function callback(response: any) {
    // 进行后端验证
    fetch()...
}

最终效果

扩展

按照上面的步骤，一个简单的谷歌登录就完成了，点击谷歌登录按钮–登陆–成功后返回回调信息。我在拿到返回的token后传给服务端校验，校验通过后走正常的登录/注册流程，使用返回的邮箱作为登录账号。

当然这个插件还支持很多功能，比如自动登录（检测到只有一个谷歌账号自动登录）、一键提示、自定义登录等等，可以查看文档自行选择，我觉得这个插件最好的地方在于开箱即用，文档中最基础的配置可以满足需求。

这个插件也支持i18n，测试了英语/中文的支持。