Auth2.0授权码模式机制详解

叫一只猪
706 阅读2分钟

大家很经常地应用到第三方登录，比如微信登录，微博登录，facebook登录。不用提供账户和密码就可以登录，获取你个人的用户信息。这些第三方登录都是oauth2.0d的应用。建议大家先去看下阮一峰大佬的文章再来看我的：www.ruanyifeng.com/blog/2014/0…

OAuth流程

先放一张流程图：

image.png Re client：客户端，第三方应用程序，比如：自己写的某个活动（需要第三方登录的应用）

HTTP service：HTTP服务提供商，本文中简称"服务提供商"，即Google、github、weibo等

Resource Owner：资源所有者，本文中又称"用户"（user），就是我自己！

User Agent：用户代理，本文中就是指浏览器

Authorization server：认证服务器，即服务提供商专门用来处理认证的服务器。就是授权服务器，如点击微信登录，微信会询问是否同意登录，当我们点击确认了，也就是同意了之后才有微信给第三方应用程序的token。

Resource server：资源服务器，即服务提供商存放用户生成的资源（用户个人信息如头像，用户昵称，用户名，邮箱等）的服务器。它与认证服务器，可以是同一台服务器，也可以是不同的服务器。

举个例子吧~ 如掘金的登录

image.png

下面有微博、微信、github三种登录方式。

client：掘金这个网站

服务提供商（HTTP service）：微博、微信、github

Resource Owner：资源所有者，我自己

image.png

但是微博、微信、github这些第三方服务也不可能信任所有的第三方应用，所以第三方应用如掘金需要去微博、微信、github上面申请一个唯一标识（client_id)

流程

无标题.png

授权准备，需要第三方应用准备： 1、应用名称

2、应用地址

3、回调地址：redirect_rl

4、客户端标识 client_id （用来标识这个应用而不是其他的应用）

5、客户端密钥 client_secret 加密获取token

拿github举例： image.png

image.png

提交之后就可以获取你的应用的唯一标识client_id，client_secret。

授权码code模式

FB登录，CALLBACK_URL为activity.clktec.com/thematic/CM…

window.location.href = `https://www.facebook.com/v3.2/dialog/oauth?client_id=570592843713290&redirect_uri=${this.CALLBACK_URL}&state=FB&response_type=code&scope=email`

image.png

用户同意授权之后，浏览器上面的地址变为：

activity.clktec.com/thematic/CM…_

即redirect_uri/?code=XXXXX&state=FB结构，就拿到授权码了。 前端将code发给后端，后端就可以通过code+client_id+client_secret去向授权服务器获取token了。 拿到token之后就可以证明用户已登录，获取用户信息。

 const param = {
        code: code,
        login_type: type,
        // r_url: this.CALLBACK_URL,
        r_url: 'https://activity.clktec.com/thematic/CMEFanArtContest/',
      }
     const res = await this.APIS.Login(param)

注意：token会过期，code只有一次有效，失效了就需要重新登录。刷新token详细看阮一峰大佬的文章吧！

avatar
文章
阅读
粉丝