移动端二维码扫描登录web电脑端实时检测扫码状态

电脑PC端二维码登录，手机移动端扫码，电脑PC端实时检测扫描成功失败状态，js+php源码示例。

电脑PC端二维码登录，手机移动端扫码，电脑PC端实时检测扫描成功失败状态，js php源码示例。

原理

H5页面提供二维码，手机移动端扫码后调用接口保存扫描状态信息，H5页面通过js用ajax每隔5秒钟发起请求检测状态，超时或者失败时重新发起请求。服务器端检测扫描状态，返回数据，ajax获取信息一旦为扫描成功进行页面样式更改或者跳到下一页面等相关业务逻辑。

源码

demo.html源码（PC端）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>等待确认</title>
<style>
	
</style>
</head>
<body>
	<div>
		当前等待扫码页面
	</div>
	<div id="tips">
		等待扫描中……
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

function getinfo(){
	console.log('1');
	$.ajax({
		url:'http://test.com/plug/ajaxphptime/test.php?action=a', //请求的URL
		timeout:10000, //10秒 超时时间设置，单位毫秒
		type:'post', //请求方式，get或post
		data:{userCode:'1',title:'扫码信息验证'}, //请求所传参数，json格式
		dataType:'json',//返回的数据格式
		success:function(data){ //请求成功的回调函数
			if(data.code == 10000){
				$('#tips').html('扫描成功！');
			}else{
				alert("失败!再次调用");　　　
				getInfoDo();
			}
		},
		complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
			if(status=='timeout'){ //超时,status还有success,error等值的情况
				alert("超时");　　　　　
				getInfoDo();
			}
		}
	});
}
function getInfoDo(){
	setTimeout(getinfo, 5000);
}

getInfoDo();


</script>
</html>

update.html源码 (M端扫描后调用的接口，这里我们用浏览器直接访问这个页面进行模拟)：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>扫描确认页面</title>
<style>
	
</style>
</head>
<body>
	<div>
		扫码成功调取接口
	</div>
	<div id="tips">
		更新信息中……
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

function updateInfo(){
	console.log('1');
	$.ajax({
		url:'http://test.com/plug/ajaxphptime/test.php?action=w', //请求的URL
		timeout:10000, //10秒 超时时间设置，单位毫秒
		type:'post', //请求方式，get或post
		data:{userCode:'1',title:'扫码信息验证'}, //请求所传参数，json格式
		dataType:'json',//返回的数据格式
	　  success:function(data){ //请求成功的回调函数
	　　　　if(data.code == 10000){
				$('#tips').html('更新成功！');
			}else{
				alert("失败!再次调用");　　　
				updateInfo();
			}
	　　},
	　　complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
	　　　　if(status=='timeout'){ //超时,status还有success,error等值的情况
				alert("超时");　　　　　
				updateInfo(); 
	　　　　}
	　　}
	});
}

updateInfo();
	 


</script>
</html>

test.php服务器端源码：

<?php

/**
 * 分流
 */
$action = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';
if($action == 'a'){
	checkData();
}else if($action == 'w'){
	writeData();
}else{
	exit('error');
}

/**
 * 写入
 */
function writeData(){
	$testFile = './data/testfile.txt';
	$myfile = fopen($testFile, "w");
	$res['code'] = 10000;
	echo json_encode($res);exit;
}

/**
 * 读取验证
 */
function checkData(){
	$testFile = './data/testfile.txt';
	$userCode = isset($_REQUEST['userCode']) ? $_REQUEST['userCode'] : '';
	$title = isset($_REQUEST['title']) ? $_REQUEST['title'] : '';
	sleep(5); // 模拟程序执行5秒
	if(file_exists($testFile)){
		$res['code'] = 10000;
		echo json_encode($res);exit;
	}else{
		$res['code'] = 40000;
		echo json_encode($res);exit;
	}
}

手机端扫描成功后调取的接口业务逻辑是生成文件，H5页面每次请求接口业务逻辑是检测的是文件是否存在，一旦存在就证明扫码成功，H5页面做出对应的操作，这里只是做个简单的匹配验证，因为没有用到数据库以及缓存，实际业务中移动端扫描成功后调取的接口业务逻辑应该是生成一个唯一的标识然后存入数据库中（存数据库不建议使用影响性能）或者redis缓存中，H5页面每次请求的接口业务逻辑也是获取对应的缓存值参数，进行判断是否扫码、扫描成功、扫码失败等状态。