网站扫码登录时怎么一回事?

723 阅读9分钟

在了解这个原理之前,一百个为什么?

什么是二维码?

扫码登录的原理是什么?

二维码里面是什么?

服务端,移动端,网站之间发生了什么?

对于服务器于第三方的网站为什么需要授权,健全?

扫码登录为什么需要是在登录之后才可以使用?

关于二维码引发的网络安全是什么?

服务端与网络之间的通信是怎么进行的?

对于第三方平台的授权方式有什么?

对于网页进行长轮询询问服务器,怎么在控制台看出来?

token里面携带的是什么?

在了解扫二维码登录的前提下,我们先来了解一下什么鉴权?

对于服务器来说它不知道每次发送的请求是谁,而有些资源是部分共享的,那么这时候就需要鉴权这个手段。

在浏览器安全方面,我们客户端和服务端之间才有了鉴权方式,一方面考虑到http无状态,另一方面考虑到防止被攻击。

鉴权

Cookie + Session 登录

session解决的是http协议无状态的问题。session是由24个随机的字符串组成的。session是服务端的解决方案,那么对于客户端与服务端来说,这是两套隔离系统,那么对于服务端来说通过每次检查请求头里面的唯一标识sessionid去读取它对应的key值。服务端一般会把sessionid放在哪里呢?内存,硬盘等,不同的语言有不同的解决方案。

对于客户端来说,是sessionid是存储在cookie字段里面的,对于禁止缓存的客户端说,我们可以对sessionid进行加密,然后通过url的形式进行传递,好比我们通过点击链接跳转到第三方网站的时候,不需要我们进行登录儿需要我们鉴权。

Token 登录

使用jwt(Json Web Token)方案,客户端与服务端进行了六次交互

  1. 客户端向服务端发起登录请求,并携带用户名和密码

  2. 服务端检验用户名和密码,

  3. 检验成功以后,返回token(json对象,里面包括

    • headers 类别和加密算法
    • claims 用户信息,开发者自定义
    • signature 根据指定的加密算法和私密的私钥,在服务端进行加密而得到的签名的字符串。

    给客户端。如果未成功或者过期了,就告诉服务器需要重新鉴权。

  4. 客户端将token存储(cookie, localStorage)起来

  5. 每次发起请求,请求头header都带着token

  6. 服务端对于每次发送的token,都会检查它的时效性,如果过期了,就重新用加密算法加密再次发送给客户端。

OAuth 第三方登录

那么我们通过微信,钉钉,淘宝扫码登录是属于哪一种呢?

我们可以看这个网站的开放平台,可以看到大多数是采用OAuth 第三方登录。

OAuth

OAuth

在生活中,网站利用微信qq登录一键登录,网站通过微信qq扫码一键登录,小程序使用微信一键登录等这都是采用oauth验证。

对于第三方应用的授权验证,一般分为三个角色,用户,第三开发者,授权服务器。接下来我们通过这三个角色对下面三个使用oauth的应用场景进行分析。

在生活中,网站利用微信qq登录一键登录,网站通过微信qq扫码一键登录,小程序使用微信一键登录等这都是采用oauth验证。

对于第三方应用的授权验证,一般分为三个角色,用户,第三开发者,授权服务器。接下来我们通过这三个角色对下面三个使用oauth的应用场景进行分析。

客户端与服务端——Websocket

对于传统的服务器与客户端通信,只有客户端向服务端发送信息,可是服务端缺少主动性,wesocket刚好满足这个要求,也就是服务端主动推动。

二维码的登录原理是什么?

二维码的本质是什么?

二维码其实也是字符串。

  • 可以是二维码ID

  • 可以是包含二维码ID的一个url地址

请添加图片描述

怎么生成二维码?

当pc端去请求服务器,服务端会生成随机的id值,这时候网页根据这个id值生成二维码,这时候就等待移动端的扫码了

二维码的状态有哪些?

已生成,待确定,已确定

二维码的状态是怎么转变的?这里从两个方面进行讨论转变。

手机端 - pc端-服务端(未接入第三方应用)
  1. 二维码的背后它一定存在一个唯一性的ID,当二维码生成时,这个ID也一起生成,并且绑定了PC端的设备信息

手机去扫描这个二维码

  1. 二维码切换为 已扫描待确认状态, 此时就会将账号信息与这个ID绑定

  2. 当手机端确认登录时,它就会生成PC端用于登录的token,并返回给PC端

3641633875817_.pic_hd.jpg 请添加图片描述

手机端 - pc端-服务端(接入第三方应用)

这几天相继看了钉钉开放者平台,微信开放平台等对于扫码登录第三方网站,都有一些预授码,授权。临时凭证等,我在想为什么要授权?看得我一头雾水,这时候了解了oauth机制才知道。了解完二维码的原理,pc端,服务端,移动端之间扫码登录的具体步骤,知道了二维码其实也是字符串,当pc端去请求服务器,服务端会生成随机的id值,这时候网页根据这个id值生成二维码,这时候就等待移动端的扫码了。这时候pc端也就是代理服务器怎么有权利去访问服务器资源呢?这就是一个临时凭证的生成,这个临时的凭证是怎么生成的?那像生活中的app端的支付宝(第三方应用)扫码登录支付宝网站呢?我们把第三方应用都比做移动端,因为移动端无法存储密码,相反它存储的是token,换句话说,这是一场基于token的认证机制。而token里面是什么呢?移动端看到网站的二维码,扫码得到的是二维码的ID值,移动端手机的设备信息发给服务器。这时候二维码的状态变成待确定,这时候移动端把账号信息就和id进行绑定。当手机确定以后,它就会生成pc用于登录的token,并返回给服务端。在移动端与服务器的互动的过程中,pc端会一直轮询服务器的二维码状态。接下来要讨论pc端怎么拿到服务端的token了,因为在pc端和网站之间还有一层授权层,这个授权层是基于OAuth协议,不同的第三方应用有不一样的处理方式,比如微信,钉钉,京东。这个授权可以理解为用户(移动端)给网站权利可以访问使用资源库(服务端),也就是这时候客户端要利用服务端的api请问临时授权码,那么请求体要带什么呢?一般是用户的账号密码等。如果验证通过,就会返回临时票据code。再通过code 加上 appidappsecret来换取 access_token。这时候就拿到令牌了。

微信客户端,网站,服务器,微信开放平台这几个角色之间有什么关系呢?看字看多了还是图文来的比较直观是吧!

网站扫码登录

这里需要思考的是我们最终的目标是拿到服务端的授权码,那我们首先是想拿到用户授权码,那么怎么主动拿到用户授权码呢?其实就是生成个二维码,从我们点击图标或者选择登录方式的时候,我们的客户端的后台就向授权服务端请请求一个二维码id,然后用qrcode库绘制,那么怎么传到客户端(网站)展示出来呢?以前接触的都是客户端发送给服务端,那我们服务端怎么主动发给客户端呢?这就涉及我们前面设计的webbsocket通信啦!二维码一扫,客户端用户授权拿到手(一般监听二维码事件),客户端利用js携带code(用户授权)发送请求给自己的后台,后台拿到code,这时候再像授权服务器(微信开放平台等),这时候授权服务器返回服务器授权码,这是一场基于token的认证机制。

请添加图片描述请添加图片描述


小程序扫码登录

对于刚刚的二维码原理,一共有是泛指三个角色,移动端,服务端,客户端。

那么对于小程序扫码登录网站,这三个三个角色指的是什么?我们首先要明白我们扫码登录这是一个token鉴权的过程,那么通过鉴权,我们要共享什么呢?

当然是用户的信息

从这里开始,用户的信息,我们用微信登录第三方网站是为了获取用户信息登录第三方网站,那么用户信息放在哪里呢?微信服务器有服务提供商也就是微信开放平台,这里好比就是三者中的服务端,网站分前后台(开发者服务器),那么客户端泛指这两者,移动端就很好认啦,也就是微信客户端。(小程序)

请添加图片描述

实践

小程序扫码登录网站

pc端(小程序)采用websocket和后台(express)进行通信,微信作为手机客户端,微信开放平台作为授权服务器。

  • 微信开放平台申请小程序
  • 微信扫码获得那一串就是用户授权码
  • 数据库存的是openid
  • 网站生成的是小程序码
  • 小程序记录通信状态

请添加图片描述

请添加图片描述

请添加图片描述

钉钉扫码登录

代码实现

  • 重定向网站
  • iframe嵌入

首先你得用注册,创建一个企业内部应用。

请添加图片描述

进行内网穿透请添加图片描述

借鉴

鉴权

你再说说微信扫码登录背后的实现原理?(以某东为例)

网页授权

websocket 实现微信扫码登录(需关注公众号) #8

二维码登录原理

点击微信登录

极客时间-二维码原理

一张图搞定OAuth2.0

应用开发

web项目对接钉钉扫码登录

扫码登录第三方网站