github第三方登录超详细流程及分析(小白笔记)
github第三方登录本质就是OAuth授权分析应用开发方先在第三方的开放认证平台申请app的授权,得到id和key应用前端账号密码登录区域,提供入口让用户跳到第三方的授权登录页跳转链接:https://github.com/login/oauth/authorize要传什么参数?client_id和回调地址授权页面,用户进行确认(如果没有登录,需要登录)gith...
github第三方登录
本质就是OAuth授权
分析
- 应用开发方先在第三方的开放认证平台申请app的授权,得到id和key
- 应用前端账号密码登录区域,提供入口让用户跳到第三方的授权登录页
-
- 跳转链接:https://github.com/login/oauth/authorize
- 要传什么参数?client_id和回调地址
- 授权页面,用户进行确认(如果没有登录,需要登录)
-
- github会返回授权码code,同时将请求转发到回调地址
- 应用的后端,需要有接口和回调地址的url匹配,接收到请求,取得code参数,然后拼上申请app时候的client_id和client_secret,向github服务器请求access_token:https://github.com/login/oauth/access_token?client_id=1436c0515ef5a23d836d&client_secret=7a213666ac6c4cec2ea11c2e0666290e46bf0917&code=b35231aea7336239139d
- github服务器校验参数合法,会在在响应体中放上token,发回回调地址
- 应用后端接收到token后,继续向github发起请求用户数据的接口请求,带上请求头和token:https://api.github.com/user
详细
1. 申请应用
1.注册Github账号
https://github.com/。如果已有则忽略该步骤,直接进入第二步。
2.创建第三方应用
-
进入通过右上角进入个人设置页:https://github.com/settings/profile
-
然后进入第三方应用页面:https://github.com/settings/developers
-
在应用管理页面,选择
OAuth App
,然后点击右上方的New OAuth App
按钮进入新建应用页面 -
- 出现如下界面
Application name
一般填写自己的网站名称即可
Application description
一般填写自己的应用描述即可
Homepage URL
填写自己的网站首页地址
Authorization callback URL
重点,该地址为用户授权后需要跳转到的自己网站的地址,默认携带一个code
参数
以上信息输入完成后,点击下方绿色的Register applaction
按钮创建应用。创建完成后,点击进入应用详情页,可以看到应用的密钥等信息
copy以下三个信息:Client ID
、Client Secret
和Authorization callback URL
2. 代码编写
2.1 引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
2.2 application.yml配置文件
spring:
security:
oauth2:
client:
registration:
github:
clientId: ****************
clientSecret: ****************
server:
port: ****
Client ID
、Client Secret
对应你刚才获取的id和secret,port
端口号
本来打算通过thymeleaf进行页面最终跳转展示的,但最后在postman中测试始终拿不到token,于是便启了一个vue前端项目,加个按钮进行请求跳转,也很简单
2.3 Vue配置
<button @click="login()">github第三方登录</button>
login() {
alert('click')
const authorize_uri = 'https://github.com/login/oauth/authorize'
const client_id = '********'
const redirect_url = 'http://localhost:8080/login/oauth2/code/github'
window.location.href = `${authorize_uri}?client_id=${client_id}&redirect_url=${redirect_url}`
}
这里的redirect_url
就是之前你自己给的Authorization callback URL
2.4 操作流程
启动前后端项目即可,注意在这之前一定清你的idea、谷歌的缓存,一次不行就多清几遍
- 点击登录(在这之前打开控制台,因为要获取code)
- 输入账号密码登录完成后将会进入授权页面
- 点击同意授权即可完成github的oauth登录。
在控制台找到如下一个请求
复制code去postman进行测试向github服务器请求access_token:https://github.com/login/oauth/access_toke
之后发送获取个人信息请求,注意Authorization的选择
3. 授权结果
{
"code": 2000,
"msg": null,
"data": {
"uuid": "xxx",
"username": "zhangyd-c",
"nickname": "yadong.zhang",
"avatar": "https://avatars3.githubusercontent.com/u/12689082?v=4",
"blog": "https://www.zhyd.me",
"company": "",
"location": "Beijing",
"email": "yadong.zhang0415@gmail.com",
"remark": "心之所向,无所不能",
"gender": "UNKNOWN",
"source": "GITHUB",
"token": {
"accessToken": "6bb4228efdxxxxxx578148e3",
"expireIn": 0,
"refreshToken": null,
"uid": null,
"openId": null,
"accessCode": null,
"unionId": null,
"scope": null,
"tokenType": "bearer",
"idToken": null,
"macAlgorithm": null,
"macKey": null,
"code": null
}
}
}
进一步实现接下一版:https://blog.csdn.net/qq_43516238/article/details/105941193
谢谢,欢迎留言交流
更多推荐
所有评论(0)