PHP如何編寫用戶端掃描二維碼登入PC端後台功能

來源:互聯網
上載者:User

本文主要和大家分享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>&nbsp;&nbsp;開啟APP</p>                                <p>&nbsp;&nbsp;掃一掃登入</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);?>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.