GitHub，Gitee，qq 第三方登录配置完整教程

Ne0inhk

— 9 min read
GitHub，Gitee，qq 第三方登录配置完整教程

GitHub 第三方登录配置完整教程

本教程将详细介绍如何在博客系统中集成 GitHub 第三方登录功能，包括 GitHub OAuth App 创建、前后端配置、代码实现等，适合零基础小白学习。

📚 目录

  1. 什么是 GitHub 第三方登录
  2. 创建 GitHub OAuth App
  3. 后端配置
  4. 前端配置
  5. 代码实现详解
  6. 测试登录
  7. 常见问题

什么是 GitHub 第三方登录

GitHub 第三方登录（OAuth 2.0）允许用户使用 GitHub 账号登录你的网站，无需注册新账号。用户点击"GitHub 登录"后，会跳转到 GitHub 授权页面，授权后 GitHub 会回调到你的网站，完成登录。

优势：

  • ✅ 用户无需注册，一键登录
  • ✅ 安全可靠，由 GitHub 管理用户认证
  • ✅ 自动获取用户头像、昵称等信息

创建 GitHub OAuth App

步骤 1：登录 GitHub

访问 GitHub.com，使用你的账号登录（如果没有账号，先注册一个）。

步骤 2：进入开发者设置

  1. 点击右上角头像
  2. 点击 Settings（设置）
  3. 左侧菜单滚动到最下面，找到 Developer settings（开发者设置）
  4. 点击进入

步骤 3：创建 OAuth App

  1. 在左侧菜单点击 OAuth Apps（OAuth 应用）
  2. 点击右上角 New OAuth App（新建 OAuth 应用）

步骤 4：填写应用信息

填写以下信息：

字段说明示例
Application name应用名称，会显示给用户我的博客
Homepage URL你的网站首页地址http://ariconline.top
Authorization callback URL回调地址，非常重要http://ariconline.top/oauth/login/github

⚠️ 重要提示：

  • Authorization callback URL 必须填写：http://你的域名/oauth/login/github
  • 这个地址必须和前后端配置的地址完全一致（包括协议 http/https）
  • 本地测试需要使用内网穿透工具（如 ngrok），详见本地测试指南

步骤 5：注册应用

点击 Register application（注册应用）

步骤 6：获取 Client ID 和 Secret

注册成功后，你会看到：

  • Client ID：类似 1decdeff65c4ca8daa07（公开的，可以暴露）
  • Client secrets：点击 Generate a new client secret 生成（只显示一次，务必保存）

⚠️ 重要： Client Secret 生成后只显示一次，请立即复制保存。如果丢失，需要重新生成。

后端配置

步骤 1：配置环境变量

在 blog-springboot 目录下找到 .env 文件（如果没有，复制 .env.example 创建），添加：

# GitHub OAuth 配置OAUTH_GITHUB_CLIENT_ID=你的Client_ID OAUTH_GITHUB_CLIENT_SECRET=你的Client_Secret

示例：

OAUTH_GITHUB_CLIENT_ID=1decdeff65c4ca8daa07 OAUTH_GITHUB_CLIENT_SECRET=abc123def456ghi789jkl012mno345pqr678stu901

步骤 2：配置回调地址（可选）

编辑 src/main/resources/application-dev.yml：

oauth:github:client-id: ${OAUTH_GITHUB_CLIENT_ID:}client-secret: ${OAUTH_GITHUB_CLIENT_SECRET:}redirect-url: ${OAUTH_GITHUB_REDIRECT:http://ariconline.top/oauth/login/github}access-token-url: https://github.com/login/oauth/access_token user-info-url: https://api.github.com/user

说明：

  • redirect-url 是回调地址，默认使用环境变量 OAUTH_GITHUB_REDIRECT
  • 如果环境变量未设置，使用默认值 http://ariconline.top/oauth/login/github
  • 本地测试时，可以在 .env 中设置 OAUTH_GITHUB_REDIRECT=https://你的ngrok地址/oauth/login/github

步骤 3：重启后端服务

修改配置后，重启 Spring Boot 后端服务使配置生效。

前端配置

步骤 1：修改配置文件

编辑 blog-vue/shoka-blog/src/assets/js/config.ts：

exportdefault{// GitHub 的 Client ID（从 GitHub OAuth App 页面获取）GITHUB_APP_ID:"你的Client_ID",// GitHub 回调地址（必须与 GitHub OAuth App 中填写的完全一致）GITHUB_REDIRECT_URL:"http://ariconline.top/oauth/login/github",// ... 其他配置};

示例：

exportdefault{GITHUB_APP_ID:"123456789",GITHUB_REDIRECT_URL:"http://ariconline.top/oauth/login/github",};

步骤 2：本地测试配置（可选）

如果要在本地测试，编辑 .env.dev：

# 使用内网穿透地址（如 ngrok）VITE_OAUTH_REDIRECT_BASE=https://abc123.ngrok-free.app

然后 config.ts 会自动使用这个地址。

代码实现详解

1. 前端登录按钮

在登录弹窗中，添加 GitHub 登录按钮：

文件：src/components/Dialog/Login.vue

<svg-icon icon-class="github" size="2rem" v-if="showLogin('github')" @click="githubLogin" ></svg-icon>

点击事件：

constgithubLogin=()=>{// 保存当前路径，登录后跳转回来 user.savePath(route.path);// 关闭登录弹窗 app.setLoginFlag(false);// 跳转到 GitHub 授权页面 window.open("https://github.com/login/oauth/authorize?client_id="+ config.GITHUB_APP_ID+"&redirect_uri="+ config.GITHUB_REDIRECT_URL+"&scope=user","_self");};

流程说明：

  1. 用户点击 GitHub 图标
  2. 保存当前页面路径（登录后跳转回来）
  3. 关闭登录弹窗
  4. 跳转到 GitHub 授权页面，URL 包含：
    • client_id：你的 GitHub Client ID
    • redirect_uri：回调地址
    • scope=user：请求用户信息权限

2. GitHub 授权回调

用户授权后，GitHub 会跳转回你的网站，URL 类似：

http://ariconline.top/oauth/login/github?code=abc123def456...

路由配置：src/router/routes/index.ts

{ path:"/oauth/login/github",component:()=>import("@/components/Oauth/index.vue"),}

3. 回调处理组件

文件：src/components/Oauth/index.vue

onMounted(()=>{const path = route.path;if(path ==="/oauth/login/github"){handleOauthCallback(githubLogin);}// ...});consthandleOauthCallback=async(loginFn:Function)=>{try{// 1. 从 URL 中获取 codeconst{ data }=awaitloginFn({ code: route.query.code asstring});if(data.flag){// 2. 保存 TokensetToken(data.data);// 3. 获取用户信息await user.GetUserInfo();// 4. 检查邮箱（GitHub 可能不返回邮箱）if(user.email ===""){ window.$message?.warning("请绑定邮箱以便及时收到回复");}else{ window.$message?.success("登录成功");}}else{ window.$message?.error("登录失败");}}catch{ window.$message?.error("登录失败，请重试");}// 5. 跳转回原页面或首页const loginUrl = user.path; router.push(loginUrl && loginUrl !==""? loginUrl :"/");};

流程说明：

  1. 组件挂载时，从 URL 获取 code 参数
  2. 调用 githubLogin API，将 code 发送给后端
  3. 后端返回 Token，前端保存
  4. 获取用户信息
  5. 检查邮箱（GitHub 可能不返回邮箱，需要用户补充）
  6. 跳转回原页面

4. 前端 API 调用

文件：src/api/login/index.ts

/** * GitHub登录 * @param code 第三方code（从 GitHub 回调 URL 中获取） * @returns Token */exportfunctiongithubLogin(data: GitInfo): AxiosPromise<Result<string>>{returnrequest({ url:"/oauth/github", method:"post", data,});}

类型定义：src/api/login/types.ts

exportinterfaceGitInfo{ code:string;// GitHub 返回的授权码}

5. 后端 Controller

文件：src/main/java/com/ican/controller/LoginController.java

@PostMapping("/oauth/github")publicResult<String>githubLogin(@RequestBodyCodeReq data){returnResult.success(loginService.githubLogin(data));}

请求 DTO：src/main/java/com/ican/model/vo/request/CodeReq.java

publicclassCodeReq{privateString code;// GitHub 返回的授权码}

6. 后端 Service

文件：src/main/java/com/ican/service/LoginService.java

@Transactional(rollbackFor =Exception.class)publicStringgithubLogin(CodeReq data){// 调用策略模式处理 GitHub 登录return socialLoginStrategyContext.executeLoginStrategy(data,LoginTypeEnum.GITHUB);}

7. 策略模式实现

系统使用策略模式处理不同平台的登录，GitHub 登录策略：

文件：src/main/java/com/ican/strategy/impl/GithubLoginStrategyImpl.java

@Service("githubLoginStrategyImpl")publicclassGithubLoginStrategyImplextendsAbstractLoginStrategyImpl{@AutowiredprivateGithubProperties githubProperties;// 配置属性@AutowiredprivateRestTemplate restTemplate;// HTTP 请求工具/** * 第一步：用 code 换取 access_token */@OverridepublicSocialTokenDTOgetSocialToken(CodeReq codeReq){TokenDTO githubToken =getGithubToken(codeReq.getCode());returnSocialTokenDTO.builder().accessToken(githubToken.getAccess_token()).loginType(LoginTypeEnum.GITHUB.getLoginType()).build();}/** * 第二步：用 access_token 获取用户信息 */@OverridepublicSocialUserInfoDTOgetSocialUserInfo(SocialTokenDTO socialToken){// 设置请求头：Authorization: Bearer {access_token}HttpHeaders headers =newHttpHeaders(); headers.set("Authorization","Bearer "+ socialToken.getAccessToken());HttpEntity<Map<String,String>> requestEntity =newHttpEntity<>(null, headers);// 调用 GitHub API 获取用户信息GitUserInfoDTO gitUserInfoDTO = restTemplate.exchange( githubProperties.getUserInfoUrl(),// https://api.github.com/userHttpMethod.GET, requestEntity,GitUserInfoDTO.class).getBody();// 返回用户信息returnSocialUserInfoDTO.builder().avatar(gitUserInfoDTO.getAvatar_url())// 头像.id(gitUserInfoDTO.getId())// GitHub 用户 ID.nickname(gitUserInfoDTO.getLogin())// GitHub 用户名.build();}/** * 用 code 换取 access_token 的详细实现 */privateTokenDTOgetGithubToken(String code){// 构建请求参数MultiValueMap<String,String> githubData =newLinkedMultiValueMap<>(); githubData.add("client_id", githubProperties.getClientId()); githubData.add("client_secret", githubProperties.getClientSecret()); githubData.add("redirect_uri", githubProperties.getRedirectUrl()); githubData.add("code", code);// 设置请求头：Accept: application/jsonHttpHeaders headers =newHttpHeaders(); headers.setAccept(List.of(MediaType.APPLICATION_JSON));HttpEntity<MultiValueMap<String,String>> requestEntity =newHttpEntity<>(githubData, headers);try{// 发送 POST 请求到 GitHubreturn restTemplate.exchange( githubProperties.getAccessTokenUrl(),// https://github.com/login/oauth/access_tokenHttpMethod.POST, requestEntity,TokenDTO.class).getBody();}catch(Exception e){thrownewServiceException("Github登录错误");}}}

8. 抽象登录模板

文件：src/main/java/com/ican/strategy/impl/AbstractLoginStrategyImpl.java

@OverridepublicStringlogin(CodeReq data){User user;// 1. 获取 GitHub TokenSocialTokenDTO socialToken =getSocialToken(data);// 2. 获取 GitHub 用户信息SocialUserInfoDTO socialUserInfoDTO =getSocialUserInfo(socialToken);// 3. 查找用户是否已注册User existUser = userMapper.selectOne(newLambdaQueryWrapper<User>().eq(User::getUsername, socialUserInfoDTO.getId()).eq(User::getLoginType, socialToken.getLoginType()));// 4. 如果用户不存在，创建新用户if(Objects.isNull(existUser)){ user =saveLoginUser(socialToken, socialUserInfoDTO);}else{ user = existUser;}// 5. 检查账号是否被封禁StpUtil.checkDisable(user.getId());// 6. 使用 Sa-Token 登录，返回 TokenStpUtil.login(user.getId());returnStpUtil.getTokenValue();}

完整流程：

  1. 用 code 换取 access_token
  2. 用 access_token 获取用户信息（头像、ID、用户名）
  3. 查找数据库中是否存在该用户（通过 GitHub ID 和登录类型）
  4. 如果不存在，创建新用户并分配普通用户角色
  5. 检查账号是否被封禁
  6. 使用 Sa-Token 登录，返回 Token 给前端

测试登录

1. 确保配置正确

检查三处地址是否完全一致：

  • ✅ GitHub OAuth App 的回调地址
  • ✅ 前端 config.ts 的 GITHUB_REDIRECT_URL
  • ✅ 后端 .env 或 application-dev.yml 的 redirect-url

2. 启动服务

# 启动后端cd blog-springboot mvn spring-boot:run # 启动前端cd blog-vue/shoka-blog npm run dev

3. 测试登录

  1. 访问网站首页
  2. 点击右上角"登录"
  3. 点击 GitHub 图标
  4. 跳转到 GitHub 授权页面
  5. 点击 Authorize（授权）
  6. 自动跳转回网站，完成登录

4. 验证登录

  • ✅ 右上角显示 GitHub 头像
  • ✅ 可以访问"我的代办"等登录用户功能
  • ✅ 个人中心显示 GitHub 信息

常见问题

1. 回调地址不匹配

错误信息：redirect_uri_mismatch

原因： 三处回调地址不一致

解决： 确保以下三处完全一致（包括协议 http/https）：

  • GitHub OAuth App 设置
  • 前端 config.ts
  • 后端配置

2. Client Secret 错误

错误信息：bad_verification_code

原因： Client Secret 配置错误或已过期

解决：

  • 检查 .env 文件中的 OAUTH_GITHUB_CLIENT_SECRET 是否正确
  • 如果丢失，在 GitHub OAuth App 页面重新生成

3. 本地测试无法回调

原因： GitHub 无法访问 localhost

解决： 使用内网穿透工具（ngrok、natapp），详见本地测试指南

4. 用户没有邮箱

现象： 登录成功但提示"请绑定邮箱"

原因： GitHub 用户可能没有公开邮箱或未授权邮箱权限

解决：

  • 用户可以在个人中心补充邮箱
  • 或在 GitHub 设置中将邮箱设为公开

5. 登录后跳转错误

原因：user.path 保存的路径不正确

解决： 检查 githubLogin 函数中的 user.savePath(route.path) 是否正确执行

总结

GitHub 第三方登录的实现流程：

用户点击 GitHub 登录 ↓ 跳转到 GitHub 授权页面 ↓ 用户授权，GitHub 回调到 /oauth/login/github?code=xxx ↓ 前端发送 code 到后端 POST /oauth/github ↓ 后端用 code 换 access_token ↓ 后端用 access_token 获取用户信息 ↓ 查找或创建用户，Sa-Token 登录 ↓ 返回 Token 给前端 ↓ 前端保存 Token，获取用户信息，跳转回原页面

关键点：

  1. ✅ 三处回调地址必须完全一致
  2. ✅ Client ID 和 Secret 配置正确
  3. ✅ 本地测试需要使用内网穿透
  4. ✅ 代码已经实现，只需配置即可使用

祝你配置顺利！ 🎉

Read more

macOS 平台 AI CLI 工具安装与配置避坑指南（OpenClaw、Gemini CLI、Claude Code）

macOS 平台 AI CLI 工具安装与配置避坑指南（OpenClaw、Gemini CLI、Claude Code）

前提条件：macOS（M系列芯片） 测试时间：2026年2月 本文涵盖 OpenClaw、Gemini CLI、Claude Code 三款主流 AI CLI 工具的安装、配置与调试。 第一章：OpenClaw 安装与配置 OpenClaw 依赖树庞大（709个包，2026.2x版本），安装过程涉及网络下载、本地服务启动、LaunchAgent 注册等多个环节，任何一环的网络异常都会导致安装失败或运行时报错。 1.1 npm install 网络卡死 问题描述：执行 npm install -g openclaw 后，终端长时间无输出，看起来像卡死。 问题思路：npm 安装依赖包时需要从 npm 官方仓库下载大量文件，下载速度极慢甚至超时，容易误判为程序卡死。

By Ne0inhk
Flutter 三方库 username_gen 的鸿蒙化适配指南 - 实现具备语义化特征的随机用户名自动化生成、支持端侧快速原型开发与测试数据模拟实战

Flutter 三方库 username_gen 的鸿蒙化适配指南 - 实现具备语义化特征的随机用户名自动化生成、支持端侧快速原型开发与测试数据模拟实战

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 username_gen 的鸿蒙化适配指南 - 实现具备语义化特征的随机用户名自动化生成、支持端侧快速原型开发与测试数据模拟实战 前言 在进行 Flutter for OpenHarmony 的社交原型开发、内部压力测试或注册流程的兜底模拟时，如何快速产生大量、易读且不重复的用户名？手动硬编码 "test_user_1" 显然过于僵硬且不具备真实感。username_gen 是一款专注于基于形容词与名词组合建立“有趣”用户名的轻量级库。本文将探讨如何在鸿蒙端构建极致、敏捷的模拟数据填充体系。 一、原直观解析 / 概念介绍 1.1 基础原理 该库内置了一套精选的英文形容词库与名词库。通过洗牌算法（Shuffle）与自定义后缀注入逻辑，能在毫秒级产出符合 "AdjectiveNPC"

By Ne0inhk

Flutter 三方库 holiday_jp 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、全维度的日本法定节假日（公休日）查询与日历调度引擎

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 holiday_jp 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、全维度的日本法定节假日（公休日）查询与日历调度引擎 在鸿蒙（OpenHarmony）系统的全球化（Globalization）出海应用、针对日本市场的日程管理、财务结算系统（需考虑日本银行休假）或带有国际化特色的鸿蒙版日历组件中，如何瞬间获取任意年份日本的法定节假日、判定当前是否为公休日？holiday_jp 为开发者提供了一套工业级的、基于官方精细化数据集的日本节假日处理方案。本文将深入实战其在鸿蒙出海应用逻辑层中的应用。 前言 什么是 Holiday JP？它是一个专注于提供日本法定假期（祝日）数据的专业库。它涵盖了从传统的“元日”到现代的“体育之日”等所有官方假期，并能自动处理由于由于由于由于“振替休日（补休）”产生的动态调休逻辑。在 Flutter

By Ne0inhk
Flutter 组件 list_utilities 的适配 鸿蒙Harmony 实战 - 驾驭大规模列表处理、实现鸿蒙端集合运算的高性能优化与深度实战方案

Flutter 组件 list_utilities 的适配 鸿蒙Harmony 实战 - 驾驭大规模列表处理、实现鸿蒙端集合运算的高性能优化与深度实战方案

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 list_utilities 的适配 鸿蒙Harmony 实战 - 驾驭大规模列表处理、实现鸿蒙端集合运算的高性能优化与深度实战方案 前言 在移动端开发的日常实战中，我们处理的最多的数据结构莫过于“列表（List）”。无论是社交 App 的消息流、电商 App 的商品矩阵，还是系统级的通知中心，列表的处理效率直接决定了页面的加载速度和内存占用的健康度。 虽然 Dart 标准库提供了基础的 Iterable 操作，但在面对诸如“不规则分组（Grouping）”、“极速去重（Deduplication）”或者是“基于多个权重的复杂排序”时，原生方法的代码量会变得异常臃肿且难以优化。 list_utilities 是一套为 Dart 量身定制的集合操作增强工具。在适配鸿蒙系统（OpenHarmony）的过程中，

By Ne0inhk