使用工具：

redis+qrcode.js+jquery.js

注意事项：

扫码手机必须跟项目使用同一网络ip；不然网络ip不同扫码请求访问不到项目服务，我这里是用手机连接电脑热点进行扫码；亲测！！！

整体实现描述：
前端生成二维码后，同时发起频繁请求来判断二维码的登入状态，用户扫码进行登入后，后端验证登入通过后，把二维码登入状态存入redis，前端接收到成功登入返回值后进行页面跳转。

1.前端登入页面生成二维码
扫码页面定义一个div容器用来存放生成的二维码,当点击扫码登入的时候使用单机事件，触发一个生成二维码的函数，函数执行qrcode.js的new QRCode(“放二维码的容器”,”二维码内容”)方法来生成一个二维码,二维码内容写入需要访问登入页面的url。同时使用js的setInterval(“执行的方法或代码”，”每隔多少毫秒执行”)方法生成一个定时器,开启定时器用来判断二维码的登入状态，因为考虑到二维码的唯一性，所以需要给二维码设置一个唯一标识，我们可以使用一个Math.random()的随机数方法加上一个当前时间的时间戳，组合成一个字符串，代表二维码的唯一标识，用来保证每个二维码标识的唯一性，把二维码的唯一标识拼接到二维码登入页面的url中，让扫码后登入页面的登入请求使用。

2.前端扫码后登入页面的登入请求
当我们扫码页面生成二维码之后我们就可以进行扫码登入了，扫描二维码进入到登入页面，因为二维码的唯一性，所以我们要携带着二维码的唯一标识来进行登入请求。因为我们把二维码的唯一标识已经放入二维码的访问url中了，所以我们可以直接获取二维码唯一标识，这里使用window对象的localtion.search的方法来获取请求路径中从问号(？)开始的url路径，也就是我们请求中拼接的二维码唯一标识，截取后获取二维码的唯一标识，发送一个登入请求携带着我们的二维码唯一标识，让后端用来存储二维码的登入状态。

3.后端二维码登入请求的处理
我们后端API接口收到带着二维码标识的登入请求后，就可以进行登入的业务处理了，首先需要验证账号密码是否正确，如果有误直接返回账号或密码验证失败。当账号密码都验证通过后我们对二维码进行处理，我们可以使用redis来存储一个token，用来验证前端登入请求是否登入成功，同时也是用户登入后的token凭证，Key就是二维码的唯一标识，因为是唯一的标识，所以不会造成不同的二维码登入冲突。存储token后就可以返回登入成功的请求了，来告诉扫码页面已经扫码登入成功了。

4.定时器获取后端二维码的登入状态
我们第一步生成二维码的时候，同时也开启了一个定时器，我们要使用定时器来获取二维码的登入状态，使用定时器调用一个函数，不断发送一个查看二维码登入状态的请求，设置好定时器时间每隔多少毫秒发送请求，因为我们生成的二维码是唯一性的，所以判断二维码登入状态，需要拿着二维码的唯一标识来进行后端的判断，后端收到定时器频繁发来的请求后，进行判断用户是否完成扫码登入，具体实现就是拿着二维码的唯一标识，查询redis是否存有成功登入后存储的token，如果有token证明扫码页面用户已经登入成功了，就可以返回登入成功状态与token凭证到前端了，让前端做出登入成功后的响应与处理。

5.前端登入成功后的响应与处理
前端定时器执行判断登入状态的请求，一旦接收到后端返回成功登入装态的返回值，就可以进行成功登入的响应处理了，首先获取成功登入的token凭证，使用SessionStore.setItem(“键”，”值”)方法把凭证存储到sessionStore中，让登入后的其他请求使用，使用定时器.close()方法把判断登入状态的定时器关闭，最后进行登入成功后的页面跳转即可。完成扫码登入！！！

实现代码：

1.前端生成二维码并开启定时器：

 //生成二维码函数function getQRCode() {//随机数+时间戳生成一个二维码唯一标识var qrCode = Math.random().toString().substring(2) + new Date().getTime();//生成二维码，第一个参数是放二维码的容器，第二个参数是二维码访问地址new QRCode(document.getElementById("QRCodeDiv"), "http://192.168.1.113:2222/tm-shop-show/shop-front-end/QRCode.html?QRCode=" + qrCode);//创建一个定时器执行函数获取二维码登入状态var interval = setInterval(getQRCodeStatus, 1000);//定时器函数获取二维码登入状态function getQRCodeStatus() {$.ajax({url: "http://localhost:7777/user/user/getQRCodeStatus",type: "post",            data: {"qrCode": qrCode},dataType: "json",success: function (result) {if (result.code === 200) {//登入成功把token存入sessionStore中sessionStorage.setItem("token", result.result);//跳转页面$(location).attr("href", "index.html");//关闭定时器clearInterval(interval);}},error: function () {alert("获取登入状态失败");}})}}

3.后端验证登入状态：

 @Overridepublic RestReturnModel userLogin(LoginUserEntity loginUserEntity) {//获取用户账号密码UserEntity user = userMapper.getUser(loginUserEntity.getInputName());if (null == user) {//如果账号不存在返回账号不存在return RestReturnModel.LOGIN_ERROR("账户不存在");}if (MD5Util.valid(loginUserEntity.getInputPassword(), MD5Util.MD5Upper("password", user.getPassword()))) {//如果密码不正确返回密码不正确return RestReturnModel.LOGIN_ERROR("密码错误");}//生成token凭证String token = JwtTokenUtil.generateToken(user);if (null != loginUserEntity.getQRCode()) {//如果是二维码登入存入的key为二维码唯一标识redisTemplate.opsForValue().set(loginUserEntity.getQRCode(), token, 30, TimeUnit.MINUTES);//返回登入成功return RestReturnModel.LOGIN_SUCCESS(token);}//非二维码登入把token存入到redisredisTemplate.opsForValue().set("token_" + user.getUsername(), token, 30, TimeUnit.MINUTES);//返回登入成功return RestReturnModel.LOGIN_SUCCESS(token);
}

4.后端接收定时器请求返回登入状态：

 @Overridepublic RestReturnModel getQRCodeStatus(String qrCode) {//拿着二维码唯一标识获取redis中二维码状态String token = (String) redisTemplate.opsForValue().get(qrCode);//如果不为空则代表二维码登入成功了if(null != token){//返回成功登入状态return RestReturnModel.LOGIN_SUCCESS(token);}//为空则代表二维码还未登入成功return RestReturnModel.LOGIN_ERROR("暂未登入");}

使用java代码实现扫码登录相关推荐

java实现简单扫码登录功能(模仿微信网页版扫码)
java实现简单扫码登录功能模仿微信pc网页版扫码登录使用js代码生成qrcode二维码减轻服务器压力 js循环请求服务端,判断是否qrcode被扫二维码超时失效功能二维码被扫成功登录,服务端 ...
Java实现微信扫码登录并实现认证授权
Java实现微信扫码登录并实现认证授权 1.登录流程及原理 1.1 OAuth2协议网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.0 ...
java实现手机扫码登录客户端
为什么手机登录记住密码后不用再次登录在了解扫码登录之前我们先了解一下其他内容, 首先为了安全,手机端它是不会存储你的登录密码的.但是在日常使用过程中,我们应该会注意到,只有在你的应用下 ...
JAVA代码实现扫码购带圆图二维码生成
JAVA代码生成带图片的圆形二维码需求背景技术方案程序设计代码实现实现效果过程中遇到的问题写在最后需求背景针对常规的新媒体运营渠道,经常要推出一些福利商品,只能通过自媒体的渠道进行购 ...
个人开发者实现微信扫码登录
使用码上登录中转微信扫码登录使用之前最好有一个公网服务器,能够公网访问的 redis 和 mysql 数据库,并且能够部署公网访问的服务码上登录是一个小程序,对个体开发者提供了免费的微信扫一扫登录 ...
java实现生成二维码及扫码登录
java实现生成二维码及扫码登录 1. 场景描述 2. 实现思路 3. 代码实现过程 3.1 pom.xml 3.2 二维码工具类 3.3 生成二维码并下载为图片 3.4 扫码登录 1. 场景描述 ...
微信扫码登录实战（附代码）
来源:JAVA葵花宝典导读:由于微信端流量比较足,所以扫码登录系统功能也受到了很多系统的青睐,本文就来详细的解开该技术的面纱. 演示效果准备工作 1. 需要一个微信开放平台账号,并创建一个网站应用 ...
手把手教程用Java实现微信公众号扫码登录功能
文章目录前言一.环境准备二.使用步骤 1. 使用微信工具包 2. 创建数据表 3. 登录页面代码逻辑 4. 验证微信公众号登录总结前言微信现今是我们必不可少的社交工具了,围绕微信这个生态实 ...
Java 语言实现简易版扫码登录
基本介绍相信大家对二维码都不陌生,生活中到处充斥着扫码登录的场景,如登录网页版微信.支付宝等.最近学习了一下扫码登录的原理,感觉蛮有趣的,于是自己实现了一个简易版扫码登录的 Demo,以此记录一下学 ...

使用java代码实现扫码登录

实现代码：

使用java代码实现扫码登录相关推荐

最新文章

热门文章