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

分布式版本控制系统Git的安装和使用

分布式版本控制系统Git的安装和使用

🌈个人主页: Hygge_Code🔥热门专栏:从0开始学习Java | Linux学习| 计算机网络💫个人格言: “既然选择了远方，便不顾风雨兼程” 文章目录 * 一、关于版本控制 * 1. 什么是“版本控制”？ * 2. 版本控制系统（VCS）带来的好处🐦‍🔥 * 3. 版本控制系统分类 * 二、Git核心 * 1. 三大文件状态 * 2. 四步完成一次代码提交 * 三、Git实战：从环境配置到命令详解 * 1. 环境配置 * Git的安装操作 * 2. 本地操作命令 * 3. 远程操作命令 * 四、Git分支与标签 * 1. 分支：隔离开发 * 2. 标签：标记重要版本 * 五、版本库目录与编码规范 * 1. 版本库目录规范

By Ne0inhk
Git-TortoiseGit 小乌龟详细安装使用教程

Git-TortoiseGit 小乌龟详细安装使用教程

0、简介 Git是一款由Linus Torvalds于2005年创建的‌免费、开源、分布式版本控制系统‌，它通过为项目创建一系列‌数据快照‌而非记录文件差异来高效管理代码历史，支持本地独立操作与团队协作，已成为现代软件开发的基石。‌ TortoiseGit 是基于 Git 的 Windows Shell 界面工具，它依赖于已配置的 Git 环境才能运行。因此，在安装 TortoiseGit 之前，需要先安装 Git 工具。 一、下载安装git 1.1进入官网Git - Windows 安装 (git-scm.com) 右边有个下载链接，点击它 以 Windows 64 位系统为例，进行安装使用说明。 1.2 安装 Git 客户端

By Ne0inhk
爆肝 5 万字！Git 从零基础到大神，这篇直接封神

爆肝 5 万字！Git 从零基础到大神，这篇直接封神

目录 * 一、安装Git（ubuntu） * 二、Git的基本操作 * 创建Git本地仓库 * 配置本地仓库 * 认识⼯作区、暂存区、版本库 * 添加⽂件 * 修改⽂件 * 版本回退 * 撤销修改 * 删除⽂件 * 三、分⽀管理 * 创建分⽀ * 切换分⽀ * 合并分⽀ * 删除合并分⽀ * 合并冲突 * 分⽀管理策略 * 合并模式 * 分⽀策略 * bug分⽀ * 强制删除临时分⽀ * 四、远程仓库 * 新建远程仓库（以gitee） * Issues * Pull Request * 克隆远程仓库 * 向远程仓库推送 * 拉取远程仓库 * 配置Git * 忽略特殊⽂件 * 给命令配置别名 * 五、

By Ne0inhk

免费获得大模型的Api-Key的方法：英伟达提供GLM-4.7、Minimax M2.1模型和GitHub的AI大模型API申请

免费获得大模型的Api-Key的方法：英伟达提供GLM-4.7、Minimax M2.1模型和GitHub的AI大模型API申请 最近一直在玩OpenClaw，无奈OpenClaw是个消耗token的高手！随随便便问了几个问题就能吃掉百万的token数，妥妥的吞金兽，如果有免费的token就好了！ 今天就给大家介绍英伟达和Github的免费大模型API Key的获取方法。 传送门： * • OpenRouter提供的DeepSeek-R1-70B的大模型免费用 * • 获取各大人工智能AI工具通过API和KEY调用的方法 英伟达-Nvidia的免费API Key 说到英伟达，大家的第一反应可能是"卖显卡的大佬"。但很少有人意识到，拥有强大算力的英伟达，也在积极布局AI云服务市场。这波免费开放API的策略，本质上是一个聪明的生态布局——通过免费服务吸引开发者，为未来的商业变现铺路。   注册账号 1.打开英伟达官网 https://build.nvidia.com 点击“Login”   2.输入邮箱 输入邮箱、密码   3.验

By Ne0inhk