一张图搞定OAuth2.0

1、引言

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

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

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

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

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

2、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授权结束。

3、OAuth2.0怎么写

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

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

如果无法下载，可以加我单独发。

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

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

第一步

第二步

第三步