Skip to content

Github第三方认证登录实现

Jump to bottom
Coder edited this page Sep 9, 2017 · 2 revisions

关于Github第三方认证登录实现

这里想大概说一下该项目是如何实现Github第三方认证登录，以及如果你项目有需要加入第三方认证登录该如何实现（个人理解，如有误望指正）。

  • 对于第三方认证这个相信大家都不陌生，现在在很多网站上都有实现，包括微信、QQ、微博，当然咱技术圈肯定少不了Github认证了，其实Github开发者平台给我们提供了很好的文档以及接口。下边来说一下具体流程。

第三方认证的工作原理

  • 提到三方认证，这里不得不提到一个授权认证协议，那就是oAuth协议，那么什么是oAuth协议呢？

oAuth协议是允许第三方网站在用户授权的前提下访问用户存储在认证服务那里存储的各种信息，而这用授权又不需要用户提供账号和密码给第三方网站，只需要提供一个令牌，也就是我们接下来会提到的token，将其作为访问用户各种信息的验证，并且这儿令牌也只是在你获取到之后的短时间内有效；包括当前比较被广泛使用的微信认证登录也是基于此原理，只是实现方式略有不同（个人学习总结，望指正）

下面我们将来对本项目的Github认证登录做一个简单的回顾和总结

  • １．如何成为一个认证服务提供方，或者说如何为自己的项目提供此服务

　　官方文档

官方文档中介绍了github官方为开发者提供的API，里面有详细的介绍，但是就像前面提到的基于此协议，最关键的东西在于token的获取及发送验证，当你拥有了cilent_id和client_secert之后，需要携带二者向github提供的认证接口发送请求，如果认证成功，其会返回一个token，之后，你才能携带token发起获取数据接口的请求。

  • ２．如何获取client_id和client_secert呢？

　> 在你的settings[https://github.com/settings/]页面，其中有developers settings一栏，其中有一个oAuth Apps，点击进入后选择新建，github会要求你上传项目头像，项目名，项目描述，以及认证成功跳转链接，和请求获取token的链接，这些在开发者文档或者网上的详解介绍都有很多，这里不做赘述；在你创建好之后，就会在生成的项目中有client_id和client_secert，其中client_secert十分关键，不要泄露。

项目目录/config/oAuth_github.js中（该文件git上传已经过滤，需要用户重新自建，项目名方便起见，最好不要任意更改）

 module.exports = {
  "client_id": "your client_id",
  "client_secret": "your client_secert"
  };
  • 3.由于对于token的获取是由后端发起的，所以前端用ajax只需向后端发起请求获取clien_id,然后携带cilent_id发送请求认证
 github.addEventListener('click',function (){
        Ajax.init({
          url: '/github',
          method: 'get',
          datatype: 'json',
          success: function (result){
            result = JSON.parse(result);
            var url = 'https://github.com/login/oauth/authorize?client_id=' + result;

            window.location = url;
          }
        });
      },false);

github接口在接收到请求之后，之前创建项目的时候填写的token获取callback请求链接便会被调用，其发起请求，项目所在服务器接收到请求之后，会根据设置发起响应，这里由于github对请求响应有要求，所以需要使用request包，拿request发起响应，传入的参数也要做配置。

  // check code and return access_token
router.get('/checkoAuth',function (req,res,next){
    var code = req.query.code;
    var headers = req.headers;
    var options = {
      headers: {"Content-Type": 'application/json'},
      url: 'https://github.com/login/oauth/access_token',
      method: 'POST',
      json: true,
      body:{
        "client_id": oAuth_github.client_id,
        "client_secret": oAuth_github.client_secret,
        "code": code,
        "state": "ZJH9RondoBlog"
      }
    };

    .....

在获取到token后，携带其便可进行各类允许范围内的接口调用，而对于数据的处理和存储，以及对第三方认证登录的用户也会做一个类注册处理，创建响应的用户数据，保证后续数据的管理，同时也做了防二次重复类注册处理，目前缺点是没有对用户头像的图片素材做一个处理，导致加载速度不够快，很快会做优化处理。 而对于接口调用的返回结果的处理，代码中都写的比较清楚，可以很直观的看出，对于疑惑的地方可以对响应数据console后在终端查看，都是比较方方便的。

Clone this wiki locally