公司目前Zuo的是一款激光雕刻产品，主要用于出口海外需要开发一个web社区网站用于桌面端模型生成后发布到社区进行分享和交流。说到出海产品，google第三方登录是必须接入的，这两天和后端一起开发完成了此功Neng，现将流程大概梳理如下。

我们Ke以kan到文档提供了多种应用类型的接入方式，对于web来说主要是红框里的两种。

适用于 JavaScript Web 应用

适用于服务器端 Web 应用

文档地址：developers.google.com/identity/pr…

另外对于前端交互来说均有两种可供选择：

popup模式：在当前页面弹窗授权，体验geng友好。

redirect模式：跳转新页面授权后重定向回来。

popup模式，采用vue3-google-login第三方依赖。需要注意的点:

Google凭据那里不需要配置重定向URI，且后端用code换取access_token所传的参数redirect_uri应该为“postmessage”，否则会报错“redirect_uri_mismatch”。

code不Neng重复使用。

接入流程：前端唤起 Google 授权 → 前端获取授权码 → 后端用授权码换 token → 验证用户信息并返回自有 token

<template> <GoogleLogin :client-id="googleClientId" popup-type="CODE" :callback="handleGoogleSuccess" :error="handleGoogleError" > <img class="google-login-icon" src="@/assets/icons/google.png" alt="google-login"> <button v-if="false" class="google-login-button" type="button"> <span class="google-mark">G</span> <span class="google-label">{{ buttonLabel }}</span> </button> </GoogleLogin></template><script setup lang="ts">import { ElMessage } from 'element-plus'import { GoogleLogin, type CallbackTypes } from 'vue3-google-login'import { useUserStore } from '@/stores/user'interface Props { buttonLabel?: string}interface Emits { : void : void}withDefaults, { buttonLabel: 'Google 账号快捷登录',})const emit = defineEmits<Emits>const userStore = useUserStoreconst googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID as string | undefinedconst handleGoogleSuccess = async => { if { ElMessage.error emit return } const success = await userStore.userLoginByGoogleCode if { emit return } emit}const handleGoogleError = => { ElMessage.error emit}</script><style scoped lang="scss">.google-login-button { width: 176px; height: 44px; border: 1px solid #d9d9d9; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; gap: ; cursor: pointer;}.google-login-button:hover {} redirect模式

redirect模式，期间由于踩了上面提的popup模式的坑，也改过一版redirect模式，没有采用第三方依赖。

<template> <button class="google-login-trigger" type="button" @click="handleGoogleLogin"> <img class="google-login-icon" src="@/assets/icons/google.png" alt="google-login" /> <span class="sr-only">{{ buttonLabel }}</span> </button></template><script setup lang=ts>import { ElMessage } from 'element-plus'interface Props { buttonLabel?: string}interface Emits { : void : void}withDefaults, { buttonLabel: 'Google 快捷登录',})const emit = defineEmits>`</script>`

,说实话,你有没有遇到过写完文章,发到网上却发现百度就是不收录?

,害,我是有过这样的经历!

,咱就是说,到底是为什么呢?

,你懂的,有时候咱也不想讲那些大道理,直接上干货多好!

,那个那个,有人说是网站权重太低,那怎么办?