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

在了解这个原理之前，一百个为什么？

什么是二维码？

扫码登录的原理是什么？

二维码里面是什么？

服务端，移动端，网站之间发生了什么？

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

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

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

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

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

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

token里面携带的是什么？

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

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

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

鉴权

Cookie + Session 登录

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

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

Token 登录

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

客户端向服务端发起登录请求，并携带用户名和密码
服务端检验用户名和密码，
检验成功以后，返回token(json对象，里面包括
- headers 类别和加密算法
- claims 用户信息，开发者自定义
- signature 根据指定的加密算法和私密的私钥，在服务端进行加密而得到的签名的字符串。
给客户端。如果未成功或者过期了，就告诉服务器需要重新鉴权。
客户端将token存储(cookie, localStorage)起来
每次发起请求，请求头header都带着token
服务端对于每次发送的token，都会检查它的时效性，如果过期了，就重新用加密算法加密再次发送给客户端。

OAuth 第三方登录

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

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

OAuth

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

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

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

客户端与服务端——Websocket

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

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

二维码的本质是什么？

二维码其实也是字符串。

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

怎么生成二维码？

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

二维码的状态有哪些？

已生成，待确定，已确定

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

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

二维码的背后它一定存在一个唯一性的ID，当二维码生成时，这个ID也一起生成，并且绑定了PC端的设备信息

手机去扫描这个二维码

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

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

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

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

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

网站扫码登录

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

小程序扫码登录

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

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

当然是用户的信息

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

实践

小程序扫码登录网站

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

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

![请添加图片描述](https://img-blog.csdnimg.cn/949d09729d5a4b37b26615e04a4794a4.gif

钉钉扫码登录

代码实现

重定向网站
iframe嵌入

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

进行内网穿透

借鉴

鉴权

你再说说微信扫码登录背后的实现原理？（以某东为例）

网页授权

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

二维码登录原理

点击微信登录

极客时间-二维码原理

一张图搞定OAuth2.0

应用开发

web项目对接钉钉扫码登录

扫码登录第三方网站