Vue 3 接入谷歌登录 （小白版）

本文档介绍如何在 Vue 3 项目中接入 Google OAuth 登录功能。

---

📋 前置准备

1. 获取 Google 客户端 ID （若已有可直接跳过下面步骤直接到项目集成）

步骤一：访问 Google Cloud Console

访问 Google Cloud Console

步骤二：创建项目

1. 点击 "创建项目" 或选择现有项目
2. 输入项目名称（例如：testDemo）
3. 点击 "创建"

步骤四：创建 OAuth 客户端 ID

1. 点击 "创建凭据" → "OAuth 客户端 ID".
2. 选择应用类型：Web 应用
3. 填写配置信息：
   • 名称：xxx
   • 已获授权的 JavaScript 来源：
     • http://localhost:5173 （开发环境）
     • https://your-production-domain.com （生产环境）
   • 已获授权的重定向 URI：
     • http://localhost:5173 （开发环境）
     • https://your-production-domain.com/ （生产环境）
4. 点击 "创建"
5. 保存生成的客户端 ID

🚀 项目集成

2. 安装依赖

pnpm add vue3-google-login

📚 官方文档：vue3-google-login

---

3. 配置插件

在 src/main.ts 中注册插件：

import { createApp } from 'vue';
// 关键代码 引入插件
import vue3GoogleLogin from 'vue3-google-login';
import App from './App.vue';

const app = createApp(App);

// 关键代码 注册 Google Login 插件
app.use(vue3GoogleLogin, {
  clientId: xxxx, // 这里为客户端id
});

app.mount('#app');

---

💻 使用方式

方式一：获取auth_code

<script setup>
import { googleAuthCodeLogin vv} from "vue3-google-login"
const login = () => {
  googleAuthCodeLogin().then((response) => {
    console.log("Handle the response", response)
  })
}
</script>

<template>
  <button @click="login">Login Using Google</button>
</template>

---

方式二：获取access_token

<script setup>
import { googleTokenLogin } from "vue3-google-login"
const login = () => {
  googleTokenLogin().then((response) => {
    console.log("Handle the response", response)
  })
}
</script>

<template>
  <button @click="login">Login Using Google</button>
</template>

---