一张图搞定OAuth2.0

OAuth2.0最经典地一种授权模式: 授权码模式

OAuth是什么

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

举个例子, 你想登录豆瓣去看看电影评论, 但你从来没有注册过豆瓣账号, 又不想新注册一个再使用豆瓣, 怎么办呢? 不用担心, 豆瓣已经为你这种懒人做了准备, 用你的qq号可以授权给豆瓣进行登录.

第一步: 在豆瓣官网点击用qq登录

第二步: 跳转到qq登录页面输入用户名密码, 然后点授权并登录

第三步: 跳回到豆瓣页面, 成功登录

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

OAuth2.0是什么—上帝视角

简单来说, 上面的例子中的豆瓣就是客户端, QQ就是认证服务器, OAuth2.0就是客户端和认证服务器之间由于相互不信任而产生的一个授权协议

第一步: 在豆瓣官网点击用qq登录

当你点击用qq登录的小图标时, 实际上是向豆瓣的服务器发起了一个http://www.douban.com/leadToAuthorize的请求, 豆瓣服务器回响应一个重定向地址, 指向qq授权登录

浏览器接到重定向地址: http://www.qq.com/authorize?callback=www.douban.com/callback, 再次访问。并注意到这次访问带了一个参数是callback, 以便qq那边授权成功再次让浏览器发起这个callback请求

至于访问这个地址之后, 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授权结束