实现GitHub和Google第三方登录

第三方登录流程图如下:

一、在第三方平台创建OAuth

GitHub:
1.登录GitHub ➡ 右上角个人设置 ➡ 开发者设置
2.OAuth Apps ➡ 右上角创建新OAuth应用 ➡ 重点填写Authorization callback URL;

Authorization callback URL为流程图中第七步第三方code和state返回的路径,后续前端用于获取系统服务端token

GitHub的Authorization callback URL返回路径没有具体要求,填什么地址,code和state就返到对应的页面

Enable Device Flow(是否启动设备流):

如无法使用web形式授权输入邮箱密码登录,启动设备流可通过其他设备扫码等形式完成授权登录

3.保存Client ID和Client secrets
Google:
1.登录https://console.cloud.google.com ➡ New project ➡ 测试项目信息可随意填写
3. App Information可随意填写 ➡ Audience选择External(外部) ➡ Contact Information填写联系邮箱 ➡ Finish ➡ createe
4.Audience ➡ 注意是否是测试阶段,下方Test users可以新增测试Google登录的测试账号;如果状态为已发布不是测试阶段,则不需要新增Test users
6.Web application ➡ Authorized JavaScript origins项目主页url

Authorized redirect URIs为流程图中第七步第三方code和state返回的路径,后续前端用于调后端接口获取系统服务端token

**注意:**Authorized redirect URIs只能填本地ip或者顶级域名

前端联调时可以填:http://127.0.0.1:xxxx(前端项目端口号)

可以传参,例如:http://127.0.0.1:xxxx?type=google

7.保存Client ID和Client secret

二、第三方授权url拼接逻辑

GitHub:
复制代码
https://github.com/login/oauth/authorize?client_id=xxxx&state=xxxx&scope=user:email

client_id为OAuth中Client ID;

状态参数state为系统服务器生成,用于防止CSRF攻击

Google:

https://accounts.google.com/o/oauth2/v2/auth?client_id=xxxx\&redirect_uri=xxxx\&response_type=code\&scope=openid+profile+email\&state=xxxx

client_id为OAuth中Client ID;

redirect_uri为Google OAuth中填写的Authorized redirect URIs(一定要相同,否则禁止授权)

状态参数state为系统服务器生成,用于防止CSRF攻击

三、根据第三方用户信息code和state获取系统服务器用户token

1.验证code和state;

2.根据code访问第三方平台获取第三方平台token

3.根据第三方平台token获取第三方用户信息

4.根据第三方用户唯一标识查询当前用户是否存在

5.创建/更新用户信息

6.返回系统用户token

相关推荐
拜托啦!狮子12 分钟前
本地连接服务器并运行jupyter
服务器·jupyter·github
Hommy889 小时前
【开源剪映小助手】API 接口文档
开源·github·aigc·视频剪辑自动化·剪映api
laowangpython10 小时前
Rust 入门:GitHub 热门内存安全编程语言
开发语言·其他·rust·github
我科绝伦(Huanhuan Zhou)14 小时前
探索技术世界:我的GitHub数据库工具宝库
数据库·github
带娃的IT创业者16 小时前
GitHub Stacked PRs:重塑现代软件开发的工作流革命
github·软件开发·工作流·代码审查·pull request·stacked prs
今夕资源网17 小时前
Windows Terminal更舒适的命令行环境 仅11MB 支持并行运行WSLLinux子系统 github开源项目
windows·github·命令行·cmd·terminal
蝎子莱莱爱打怪17 小时前
小孩儿才做选择!Hermes 和OpenClaw 我都要!
人工智能·后端·github
CoderJia程序员甲18 小时前
GitHub 热榜项目 - 日榜(2026-04-29)
ai·大模型·github·ai教程
逛逛GitHub18 小时前
推荐 3 个 GitHub 画图 Skill,一句话生成流程图、架构图。
github
你知道“铁甲小宝”吗丶20 小时前
git推送到多平台(gitee/github)
git·gitee·github