Github第三方登录

OAuth

OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。

需求与流程

1、用户打开博客后，我想要通过GitHub获取该用户的基本信息
2、在转跳到GitHub的授权页面后，用户同意我获取他的基本信息
3、博客获得GitHub提供的Code，使用该Code与client_id、client_secret通过我们的服务器向GitHub申请一个access_token
4、GitHub对博客提供的授权码进行验证，验证无误后，发放一个access_token给博客端
5、博客后端使用access_token，向GitHub获取用户信息
6、GitHub 确认令牌无误，返回给我基本的用户信息
7、获取返回的信息在自己的后端数据库中进行登录绑定操作，完成github登录

如何使用GitHub提供的 OAuth 服务

打开github.com
右上角Settings
Developer settings
OAuth Apps
New oauth app
填入基本的app信息
完成并获取到client_id，client_secret

具体流程

1、前端代码中添加按钮跳转到gethub授权页面
https://github.com/login/oauth/authorize?client_id=myclient_id&scope=user:email
地址，myclient_id替换成自己注册的id

2、授权成功后github会回调自己注册时填写的 Authorization callback URL 并且在后面拼接一个code

3、前端通过this.$route.query.code获取code发送给后端服务器

4、后端服务器取到code后结合

 var github_access_token_url = "https://github.com/login/oauth/access_token"
    superagent.post(github_access_token_url)
        .type("form")
        .set('Content-Type', 'application/json')
        .send({
            client_id: "09ac6402b20d569a2e7e",
            client_secret: "468e97d83fc5daa7eef05db82ee1493ea5743a23",
            code: req.body.code
        })
        .end(function (err, res) {
//请求结果，通过res.body获取返回的access_token
}

5、通过access_token获取用户信息，其中一个坑是该访问必须模拟浏览器，所以需要添加User-Agent到head中去

var infoUrl = "https://api.github.com/user?access_token=" + access_token
superagent.get(infoUrl)
.accept('application/json')
.set('User-Agent', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36')
.end(function (err, res) {
//获取github的用户信息
//根据自己的逻辑拿到用户信息后进行自动登录


}