github第三方登录超详细流程及分析(小白笔记)

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
谢谢，欢迎留言交流