二维码扫码登陆原理及简单demo

扫码登陆原理转载自: https://www.cnblogs.com/liyasong/p/saoma.html

      需求介绍

        首先，介绍下什么是扫码登陆。如今，大部分同窗手机上都装有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而不是直接存储用户信息是由于，手机端的用户信息，不必定是和浏览器端的用户信息彻底一致。

　　登陆原理图以下：

    扫码登陆功能的简单demo实现:

     本身写了个简单的demo,码云地址 : https://gitee.com/huaixiaonian/qrCodeLogin ,具体用到开发中时,还需注意,先后端的长链接可使用websocket,用户信息的存储可使用NoSql数据库等等

     demo参考了此博客,有本身作修改: https://www.cnblogs.com/BulingBuling/p/Buling.html