本文详细介绍了扫码登录的实现原理，特别是微信扫码登录的流程。用户打开网页时，服务器生成唯一标识并存储，展示二维码。手机扫描后，服务器接收到用户信息，通过UUID关联用户，最终实现登录。涉及的技术包括二维码生成、服务器端UUID管理、微信开放平台接口等。
扫码登录实现原理
来源：http://www.cnblogs.com/liyasong/
今天说一说现在比较流行的扫码登录的实现原理。
需求介绍
首先，介绍下什么是扫码登录。现在，大部分同学手机上都装有qq和淘宝，天猫等这一类的软件。而开发这些app的企业，都有他们相对应的网站。为了让用户在使用他们的网站时，登录更加方便和安全。这些企业提供了， 使用手机，扫一扫，就可以登录的服务。网页登录时的效果如下：
有很多小伙伴可能会感到很神奇，网页上只是显示了个二维码，它怎么就知道是哪个手机扫到了二维码，并且进行登录的呢？而且，登录完成以后，还能直接把用户信息显示给用户，真的是很神奇啊。
原理解释
网页端+服务器
接下来就是对于这个服务的详细实现。首先，大概说一下原理：用户打开网站的登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id作为key值存入redis服务器，同时设置一个过期时间，再过期后，用户登录二维码需要进行刷新重新获取。同时，将这个key值和本公司的验证字符串合在一起，通过二维码生成接口，生成一个二维码的图片（二维码生成，网上有很多现成的接口和源码，这里不再介绍。）然后，将二维码图片和uuid一起返回给用户浏览器。
浏览器拿到二维码和uuid后，会每隔一秒向浏览器发送一次，登录是否成功的请求。请求中携带有uuid作为当前页面的标识符。这里有的同学就会奇怪了，服务器只存了个uuid在redis中作为key值，怎么会有用户的id信息呢？
这里确实会有用户的id信息，这个id信息是由手机服务器存入redis中的。具体操作如下：
手机端+服务器
话说，浏览器拿到二维码后，将二维码展示到网页上，并给用户一个提示：请掏出您的手机，打开扫一扫进行登录。用户拿出手机扫描二维码，就可以得到一个验证信息和一个uuid（扫描二维码获取字符串的功能在网上同样有很多demo，这里就不详细介绍了）。由于手机端已经进行过了登录，在访问手机端的服务器的时候，参数中都回携带一个用户的token，手机端服务器可以从中解析到用户的userId（这里从token中取值而不是手机端直接传userid是为了安全，直接传userid可能会被截获和修改，token是加密的，被修改的风险会小很多）。手机端将解析到的数据和用户token一起作为参数，向服务器发送验证登录请求（这里的服务器是手机服务器，手机端的服务器跟网页端服务器不是同一台服务器）。服务器收到请求后，首先对比参数中的验证信息，确定是否为用户登录请求接口。如果是，返回一个确认信息给手机端。
手机端收到返回后，将登录确认框显示给用户（防止用户误操作，同时使登录更加人性化）。用户确认是进行的登录操作后，手机再次发送请求。服务器拿到uuId和userId后，将用户的userid作为value值存入redis中以uuid作为key的键值对中。
登录成功
然后，浏览器再次发送请求的时候，浏览器端的服务器就可以得到一个用户Id，并调用登录的方法，声成一个浏览器端的token，再浏览器再次发送请求的时候，将用户信息返回给浏览器，登录成功。这里存储用户id而不是直接存储用户信息是因为，手机端的用户信息，不一定是和浏览器端的用户信息完全一致。
登录原理图如下：
扩展阅读
微信公众号：javafirst
扫码关注免费获取更多资源
<div class="hide-article-box hide-article-pos text-center">
<a class="btn-readmore" data-report-view="{"mod":"popu_376","dest":"https://blog.csdn.net/xiamiflying/article/details/82719152","strategy":"readmore"}" data-report-click="{"mod":"popu_376","dest":"https://blog.csdn.net/xiamiflying/article/details/82719152","strategy":"readmore"}">
展开阅读全文
<svg class="icon chevrondown" aria-hidden="true">
<use xlink:href="#csdnc-chevrondown"></use>
</svg>
</a>
</div>
<div class="recommend-box"><div class="recommend-item-box type_blog clearfix" data-report-view="{"mod":"popu_387","dest":"https://blog.csdn.net/gentlu/article/details/78592571","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}" data-report-click="{"mod":"popu_387","dest":"https://blog.csdn.net/gentlu/article/details/78592571","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}">
<div class="content" style="width: 852px;">
<a href="https://blog.csdn.net/gentlu/article/details/78592571" target="_blank" rel="noopener" title="java实现简单扫码登录功能(模仿微信网页版扫码)">
<h4 class="text-truncate oneline" style="width: 692px;">
java实现简单<em>扫码登录</em>功能(模仿微信网页版扫码) </h4>
<div class="info-box d-flex align-content-center">
<p class="date-and-readNum oneline">
<span class="date hover-show">11-21</span>
<span class="read-num hover-hide">
阅读数
3万+</span>
</p>
</div>
</a>
<p class="content" style="width: 852px;">
<a href="https://blog.csdn.net/gentlu/article/details/78592571" target="_blank" rel="noopener" title="java实现简单扫码登录功能(模仿微信网页版扫码)">
<span class="desc oneline">#java实现简单扫码登录功能jsp+spring+struts2+mybatis：-**模仿微信pc网页版扫码登录**-**使用js代码生成*qrcode*二维码减轻服务器压力**-**js循环请求...</span>
</a>
<span class="blog_title_box oneline ">
<span class="type-show type-show-blog type-show-after">博文</span>
<a target="_blank" rel="noopener" href="https://blog.csdn.net/gentlu">来自： <span class="blog_title"> gentlu的博客</span></a>
</span>
</p>
</div>
</div>
微信网页扫码登录的实现（两种方式）
05-21 阅读数 1万+
https://www.cnblogs.com/jiangjunli/p/7436110.html为了让用户登录网站的门槛更低，微信扫一扫登录变得越来越广泛，所以最近加紧赶制的项目中有用到这个功能，此... 博文 来自： A9925的专栏
javaweb实现app扫码登录
11-14 阅读数 4449
1.web页面主动向服务器索要一张由服务器生成包含维一标识的二维码图片,也可以直接向后台索要一个维一标识,拿到标识后通过js生成二维码.这里本人采用的是第二种方式,至于为什么吗,个人感觉这样方便,后台... 博文 来自： 江西DJ烟仔的博客
微信扫码登录实战（附代码）
10-11 阅读数 3176
来源：JAVA葵花宝典导读：由于微信端流量比较足，所以扫码登录系统功能也受到了很多系统的青睐，本文就来详细的解开该技术的面纱。演示效果准备工作1. 需要一个微信开放平台账号，并创建一个网站应用点击查看... 博文 来自： javafirst
<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_59" data-pid="59" data-report-view="{"mod":"kp_popu_59-78","keyword":""}" data-report-click="{"mod":"kp_popu_59-78","keyword":""}"><script type="text/javascript">
(function() {
var s = "_" + Math.random().toString(36).slice(2);
document.write('<div style="" id="' + s + '"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u3491668",
container: s
});
})();
二维码登录（三）扫码登录
06-04 阅读数 7069
承接上篇博客，在进行二维码生成之后，app进行扫码，扫码成功之后，手机点击登录，进行绑定登录关系，后台做自动关联与自动登录。本文git地址：https://github.com/xvshu/qrlog... 博文 来自： 许恕
扫码登录原理及实践
08-18 阅读数 1993
前言近期实现了一个扫码登录的需求，在此之前没有这方面的开发经历，所以接到这个需求的时候还是有点慌的，最终通过查阅网上的资料以及老大的指导下实现了这个功能，目前已经投入使用，实现之后还是蛮兴奋的。特此... 博文 来自： 席儒空间
微信扫码登录网页实现原理
05-23 阅读数 1175
扫码登录操作过程浏览器输入：https://wx.qq.com/?lang=zh_CN手机登录微信，利用“扫一扫”功能扫描网页上的二维码手机扫描成功后，提示“登录网页版微信”；网页上显示“成功扫描请在... 博文 来自： Just Code
<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_60" data-pid="60" data-report-view="{"mod":"kp_popu_60-43","keyword":""}" data-report-click="{"mod":"kp_popu_60-43","keyword":""}"><div class="mediav_ad"><newsfeed class="newsfeed QIHOO__WEB__SO__1567588492849_563" id="QIHOO__WEB__SO__1567588492849_563" style="display:block;margin:0;padding:0;border:none;width:900px;height:84px;overflow-y:hidden;overflow-x:hidden;position:relative;text-align:left;"><info-div id="QIHOO__WEB__SO__1567588492849_563-info" style="zoom:1"><info-div class="QIHOO__WEB__SO__1567588492849_563 singleImage clk" data-href="https://ssxd.mediav.com/s?type=2&r=20&mv_ref=blog.csdn.net&enup=CAAB0hYITAgAAkwIFtIA&mvid=NjQwNjE3ODI3Mjg1MzA5MjAwNTAwMTk&bid=13923ca3ba43db66&price=AAAAAF1vgI4AAAAAAAw78QCzQezpP1CR3/nRwg==&finfo=DAABCAABAAAA7AgAAgAAAOkEAAM/S2adwhHNOwAIAAIAAAADCgADaKjzHT12Er8IAAQAAAEaBgAGG4sGAAoAAAgADgAAADMKAA8AAAAAACQCwAA&ugi=FcTgigEVyNtrTBUCFUAVXhUAABW6h+GeARaECBXIARaA/rW11O3IBRwWgda2grL/oue2ARUAAAA&uai=FeTGlAIlAhUEFtK8n6WwgfWo0QEV8ggl3MurpwIlABUaFAAcFv+7h++J3+L0dxUAAAA&ubi=FejnJBWkhJ4CFaD1xhUVwI36WBUGFRwWuonH+hQW0ry0jLrH+ajRATQCFqjgECUGFbTbnZ8FFZ4BFQAkFBbo5yQA&clickid=0&cpx=__OFFSET_X__&cpy=__OFFSET_Y__&cs=__EVENT_TIME_START__&ce=__EVENT_TIME_END__&ldtype=2&csign2=aV75QrTCu0Z=&url=http%3A%2F%2Fbaidu.code.jjyx.com%2Fhtmlcode%2F24889.html%3Fsourceid%3D%7Bsource_id%7D" data-pv="https://ssxd.mediav.com/s?type=1&r=20&tid=NjQwNjE3ODI3Mjg1MzA5MjAwNTAwMTk&finfo=DAABCAABAAAA7AgAAgAAAOkEAAM/S2adwhHNOwAIAAIAAAADCgADaKjzHT12Er8IAAQAAAEaBgAGG4sGAAoAAAgADgAAADMKAA8AAAAAACQCwAA&mv_ref=blog.csdn.net&enup=CAAB0hYITAgAAkwIFtIA&mvid=NjQwNjE3ODI3Mjg1MzA5MjAwNTAwMTk&bid=13923ca3ba43db66&ugi=FcTgigEVyNtrTBUCFUAVXhUAABW6h+GeARaECBXIARaA/rW11O3IBRwWgda2grL/oue2ARUAAAA&uai=FeTGlAIlAhUEFtK8n6WwgfWo0QEV8ggl3MurpwIlABUaFAAcFv+7h++J3+L0dxUAAAA
最低0.47元/天 解锁文章
1万+
到【灌水乐园】发言
