PHP編寫客戶端掃描二維碼登入PC端後臺功能
阿新 • • 發佈:2019-02-19
html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" href="login/css/normalize.css">
<link rel="stylesheet" href="login/css/style.css">
</head>
<body>
<div class="top">
<img src="login/img/1.png" alt="">
</div>
<div class="middle">
<div class="login_div">
<img src="login/img/3.png" alt="" class="change_login">
<img src="login/img/9.png" alt="" class="change_txt">
<div class="change_div">
<div class="con_top">
<img src="login/img/8.png" alt="">
<span>管理員登入</span>
</div>
<div class ="con_bottom">
<div id="account">
<br>
<img src="login/img/6.png" alt="" class="userimg">
<input type="text" id="username" placeholder="請輸入使用者名稱">
<br>
<br>
<br>
<img src="login/img/7.png" alt="" class="passimg">
<input type="password" id="password" placeholder="請輸入密碼">
<br>
<br>
<br>
<br>
<div id="btnSubmit" class="btnSubmit">登入</div>
<br>
</div>
<div id="code" style="display: none;">
<div class="code_div">
<img src="" alt="" id="qrcodeimg" width="144px" height="145px">
</div>
<div class="code_txt">
<img src="login/img/18.png" alt="">
<div>
<p> 開啟APP</p>
<p> 掃一掃登入</p>
</div>
</div>
</div>
<div class="hint">
<span>二維碼有效期2分鐘</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='login/js/jquery-1.9.0.min.js'></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script src='login/js/index.js'></script>
<script src='static/h-ui.admin/js/login.js'></script>
</html>
js頁面
$.ajax({
type: "GET",
url: "er/qrcodelogin/getqruuid.php",
data: {},
success: function (result) {
console.log(result);
var data = JSON.parse(result);
// console.log(data.code);
if (data.code == 1) {
$("#qrcodeimg").attr('src', 'http://qr.liantu.com/api.php?text=' + result);
console.log(data.data);
var min=0;
interval1= setInterval(function () {
min=min+1000;
$.ajax({
type: "GET",
url: "er/qrcodelogin/checkqruuid.php",
data: {'qruuid': data.data},
success: function (result) {
min=min+1000;
if(min==36000){
console.log(min);
alert("二維碼已過期!");
clearInterval(interval1);
location.replace(location.href);
min=1000;
interval1();
}else{
console.log(min);
var data = JSON.parse(result);
if (data.code == 1) {
// alert('掃碼成功(即登入成功),進行跳轉.....');
//停止輪詢
clearInterval(interval1);
location.href="index.html";
//TODO 拿到需要的資訊 然後跳轉什麼的
}else if(data.code == 300){
alert('無此後臺使用者!');
//停止輪詢
clearInterval(interval1);
location.href="login.html";
}
}
}
});
}, 1000);//1秒鐘 頻率按需求
}
}
});
getqruuid.php頁面
<?php
/**
* 用於前端獲取qruuid(二維碼唯一ID)使用
*
* Created by PhpStorm.
* User: caohan
* Date: 2017/10/15
* Time: 下午2:59
*/
require('config.php');
//生成隨機的UUID 用於二維碼顯示的內容 和 繫結用
$qruuid = substr(md5(uniqid(mt_rand(), true)), 0, 15);//生成uuid
//將生成的隨機數儲存至資料庫
$sql="INSERT into t_pc_code(randnumber) values ('$qruuid')";
$query = sqlsrv_query($conn, $sql);
if (!$query) {
die(print_r(sqlsrv_errors(), true));
}
$arr = ['code'=>1, 'msg' => '生成qruuid成功','data'=>$qruuid];
echo json_encode($arr);
exit();
checkqruuid.php頁面
<?php
session_start();
/**
* Created by PhpStorm.
* User: caohan
* Date: 2017/10/15
* Time: 下午3:17
*/
require('config.php');
// $mysqli = new mysqli($db_host, $db_user, $db_pwd, $db_name);
// if (mysqli_connect_error())
// echo mysqli_connect_error();
// $mysqli->set_charset("utf8");
$qruuid = $_GET['qruuid'];
$sql = "SELECT * from t_pc_code where randnumber='" . $qruuid . "'";
$result = sqlsrv_fetch_array(sqlsrv_query($conn, $sql));
if (!$result) {
die(print_r(sqlsrv_errors(), true));
}
if (!is_null($result['username'])){
$nowusername=$result['username'];
$sql2="SELECT * from t_webuser where username = '$nowusername' and isDeleted=0";
$result2 = sqlsrv_query($conn, $sql2);
if($row=sqlsrv_fetch_array($result2)){
$_SESSION['sydsdj_name']=$row['username'];
$_SESSION['sydsdj_roleType']=$row['roleType'];
$_SESSION['sydsdj_orgId']=$row['orgId'];
$_SESSION['sydsdj_orgName']=$row['orgName'];
$_SESSION['sydsdj_manage_id']=$row['id'];
$arr = ['code' => 1, 'msg' => '登入成功', 'data' => $result];
}else{
$arr = ['code' => 300, 'msg' => '賬號未註冊!', 'data' => $result];
}
}else{
$arr = ['code' => 500, 'msg' => 'qruuid暫時未被繫結','data'=>$qruuid];
}
echo json_encode($arr);
exit();
?>
寫給客戶端儲存使用者賬號的介面
<?php
// 指定允許其他域名訪問
header('Access-Control-Allow-Origin:*');
require('config.php');
$username = $_REQUEST['username'];
$randnumber = $_REQUEST['randnumber'];
$result = sqlsrv_query($conn,"UPDATE t_pc_code set username='$username' where randnumber= '$randnumber'");
if (!$result) {
die(print_r(sqlsrv_errors(), true));
$arr = ['code' => 0, 'msg' => 'sy'];
}else{
$arr = ['code' => 1, 'msg' => 'sy'];
}
echo json_encode($arr);
?>
如有疑問可在下方評論——