1.首先看下实现的思路
2.废话不多说上代码
第一步(后端生成临时令牌及存储起来)
//存储二维码维一临时令牌
public static Set<String> tokens = new HashSet<>();
//存储toke绑定的用户key为tokens令牌 value 为userinfo信息
public static Map<String,Object> usersmap = new HashMap<String,Object>();
//标记二维码的状态有没有被扫过
public static Map<String,Object> usersstatus = new HashMap<String,Object>();
//生成二维码
@RequestMapping("getQRcode")
@ResponseBody
public Map<String,Object> getQRcode(){
Map<String,Object> map =new HashMap<String, Object>();
String uid = UUID.randomUUID().toString();
tokens.add(uid);
map.put("uid", uid);
return map;
}
第二步 页面(我用的时jsp)生成二维码 同时轮询后台
//生成二维码
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/app/getQRcode",
dataType:"json",
success:function(data){
new QRCode(document.getElementById('qrcode'),{text:"http://ip:port/project?token="+临时令牌,height:200,width:200});
}
});
//开始轮询
var t2 = window.setInterval(function() {
var token = $('#token').val();
if(token){
$.ajax({
type:"post",
data:{"token":token},
url:"${pageContext.request.contextPath}/app/scanLogin",
success:function(data){
console.log(data.code);
if(data.code==200){
clearInterval(t2);
window.location.href = "${pageContext.request.contextPath}/*/main";
}else if(data.code==300){
$("#qrcode").attr("style","filter: blur(3px);");
layer.msg(data.name+"扫码成功");
//失效时间
setTimeout(qingli,300000);
}
}
});
}
},1000)
第 三步 扫码
1.app拿到token和用户信息去绑定
@ResponseBody
@RequestMapping("bindinguser")
public String bindinguser(String loginName, String token,String pwd,HttpSession httpsession){
System.err.println(loginName+"--"+"---"+token+"-----"+pwd);
for (String t:tokens) {
if(t.equals(token)){
QueryWrapper<Account> queryWrapper=new QueryWrapper<>();
queryWrapper.eq("account_loginname", loginName);
queryWrapper.eq("account_loginpassword", pwd);
Account accounts =accountService.findone(queryWrapper);
usersmap.put(token,accounts);
usersstatus.put(token, "FALSE");
return "200";
}
}
return "100";
}
2.返回给app绑定成功 去确认登录 (此时页面轮询得知绑定用户)
@ResponseBody
@RequestMapping("Confirmlogin")
public String determine(String token){
usersstatus.put(token, "TRUE");
return "200";
}
3.此时的所有条件都齐全
//轮询登录
@RequestMapping("scanLogin")
@ResponseBody
public Map<String,Object> scanLogin(String token,HttpSession httpsession) {
Map<String,Object> map =new HashMap<String, Object>();
if(token==null) {
map.put("code", 100);
}
if(usersmap.get(token)!=null && usersstatus.get(token).equals("TRUE")) {
//这写自己的登录方法
map.put("code", 200);
usersmap.remove(token);
usersstatus.remove(token);
tokens.remove(token);
return map;
}else if(usersmap.get(token)!=null && usersstatus.get(token).equals("FALSE") ){
//通知页面谁扫码了等待确认
用户信息 userinfo = usersmap.get(token);
map.put("user",userinfo );
map.put("code",300);
return map;
}
map.put("code", 0);
return map;
}
到这基本上流程是完了。(app的扫码与web的通信之前的博客有写大家感兴趣的可以去看看)
感兴趣的可以试试!有什么问题评论就可以了!