一张图搞定OAuth2.0

一、引言

本篇文章是介绍OAuth2.0中最经典最经常使用的一种受权模式：受权码模式

很是简单的一件事情，网上一堆神乎其神的讲解，让我不得不写一篇文章来终结它们。

一项新的技术，无非就是了解它是什么，为何，怎么用。至于为何，本篇文章不作重点探讨，网上会有各类文章举各类什么丢钥匙、发船票的例子供你去阅读，我的认为仍是有些哗众取宠，没有聊到本质。

那咱们就重点聊聊OAuth2.0是什么，怎么用。但首先在读本文以前，你要先对OAuth2.0有必定的了解，建议先读一下阮一峰的oauth2.0文章，直接看“受权码模式”便可，带着疑问再来读本文效果更好。

http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

二、OAuth2.0是什么

OAuth2.0是什么——豆瓣和QQ的故事

OAuth简单说就是一种受权的协议，只要受权方和被受权方遵照这个协议去写代码提供服务，那双方就是实现了OAuth模式。

举个例子，你想登陆豆瓣去看看电影评论，但你丫的历来没注册过豆瓣帐号，又不想新注册一个再使用豆瓣，怎么办呢？不用担忧，豆瓣已经为你这种懒人作了准备，用你的qq号能够受权给豆瓣进行登陆，请看。

第一步：在豆瓣官网点击用qq登陆

第二步：跳转到qq登陆页面输入用户名密码，而后点受权并登陆

 

第三步：跳回到豆瓣页面，成功登陆

 这几秒钟以内发生的事情，在无知的用户视角看来，就是在豆瓣官网上输了个qq号和密码就登陆成功了。在一些细心的用户视角看来，页面经历了从豆瓣到qq，再从qq到豆瓣的两次页面跳转。但做为一群专业的程序员，咱们还应该从上帝视角来看这个过程。

OAuth2.0是什么——上帝视角

　　简单来讲，上述例子中的豆瓣就是客户端，QQ就是认证服务器，OAuth2.0就是客户端和认证服务器之间因为相互不信任而产生的一个受权协议。呵呵，要是相互信任那QQ直接把本身数据库给豆瓣好了，你直接在豆瓣输入qq帐号密码查下数据库验证就登录呗，还跳来跳去的多麻烦。

　　先上一张图，该图描绘了只几秒钟发生的全部事情用上帝视角来看的流程

 就这这张图，来讲一下上述例子中的三个步骤在图中的表现。所用到的请求路径名称都是虚构的，所附带的请求参数忽略了一些非重点的。

如想了解每次的请求和响应的标准齐全的参数，仍是去读那篇阮一峰的文章。http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

第一步：在豆瓣官网点击用qq登陆

　　当你点击用qq登陆的小图标时，其实是向豆瓣的服务器发起了一个 http://www.douban.com/leadToAuthorize 的请求，豆瓣服务器会响应一个重定向地址，指向qq受权登陆

　　浏览器接到重定向地址 http://www.qq.com/authorize?callback=www.douban.com/callback ，再次访问。并注意到此次访问带了一个参数是callback，以便qq那边受权成功再次让浏览器发起这个callback请求。否则qq怎么知道你让我受权后要返回那个页面啊，天天让我受权的像豆瓣这样的网站这么多。

　　至于访问这个地址以后，qq那边作出怎样的回应，就是第二步的事情了。总之第一步即对应了图中的这些部分。

第二步：跳转到qq登陆页面输入用户名密码，而后点受权并登陆

　　上一步中浏览器接到重定向地址并访问 http://www.qq.com/authorize?callback=www.douban.com/callback

　　qq的服务器接受到了豆瓣访问的authorize，在次例中所给出的回应是跳转到qq的登陆页面，用户输入帐号密码点击受权并登陆按钮后，必定还会访问qq服务器中校验用户名密码的方法，若校验成功，该方法会响应浏览器一个重定向地址，并附上一个code（受权码）。因为豆瓣只关心像qq发起authorize请求后会返回一个code，并不关心qq是如何校验用户的，而且这个过程每一个受权服务器可能会作些个性化的处理，只要最终的结果是返回给浏览器一个重定向并附上code便可，因此这个过程在图中并无详细展开。现把展开图画给你们。

第三步：跳回到豆瓣页面，成功登陆

 这一步背后的过程实际上是最繁琐的，但对于用户来讲是彻底感知不到的。用户在QQ登陆页面点击受权登录后，就直接跳转到豆瓣首页了，但其实经历了不少隐藏的过程。

首先接上一步，QQ服务器在判断登陆成功后，使页面重定向到以前豆瓣发来的callback并附上code受权码，即 callback=www.douban.com/callback 

页面接到重定向，发起 http://www.douban.com/callback 请求

豆瓣服务器收到请求后，作了两件再次与QQ沟通的事，即模拟浏览器发起了两次请求。一个是用拿到的code去换token，另外一个就是用拿到的token换取用户信息。最后将用户信息储存起来，返回给浏览器其首页的视图。到此OAuth2.0受权结束。

 

三、OAuth2.0怎么写

了解了上述过程后，代码天然就不难写了，起码框架是能够写出来的。我在github上分享了一个我本身模拟的简单的不能再简单的oauth2.0，你们能够参考一下，仅仅用于了解oauth的过程，可别用于公司哦，否则老板得开除你。

github地址：https://github.com/sunym1993/dataU-OAuth.git/

若是没法下载，能够加我单独发。

项目结构很是简单，只有两个模块，分别是豆瓣和QQ，分别启动便可。

最终效果也很是简单清晰，下面请忍受low逼的显示效果

第一步

第二步

第三步