本文主要和大家分享PHP如何編寫用戶端掃描二維碼登入PC端後台功能,本人也是第一次寫這個功能,受下方博主部落格啟發機demo完成此功能,自己想重新歸納一下此代碼,以防忘記。
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> <p class="top"> <img src="login/img/1.png" alt=""> </p> <p class="middle"> <p class="login_p"> <img src="login/img/3.png" alt="" class="change_login"> <img src="login/img/9.png" alt="" class="change_txt"> <p class="change_p"> <p class="con_top"> <img src="login/img/8.png" alt=""> <span>管理員登入</span> </p> <p class="con_bottom"> <p 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> <p id="btnSubmit" class="btnSubmit">登入</p> <br> </p> <p id="code" style="display: none;"> <p class="code_p"> <img src="" alt="" id="qrcodeimg" width="144px" height="145px"> </p> <p class="code_txt"> <img src="login/img/18.png" alt=""> <p> <p> 開啟APP</p> <p> 掃一掃登入</p> </p> </p> </p> <p class="hint"> <span>二維碼有效期間2分鐘</span> </p> </p> </p> </p> </p></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頁面
<?phpsession_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);?>