android掃描網頁二維碼進行網頁登錄


轉載請標明出處:
http://www.cnblogs.com/dingxiansen/
本文出自:丁先森-博客園

周六和朋友去網吧開黑,開機打開TGP,朋友那邊開始輸入賬號密碼,我看了他一眼low逼,現在誰還手動輸入,手機掃一掃就好了,然后打開手機app掃一掃登錄成功,美滋滋。其實我們現在不難發現,很多的網頁為了便捷登錄除了第三方程序登陸,就是二維碼掃描登錄,比如某寶,某魚等等,其實我認為二維碼掃描不只是為了快捷登錄,讓人們省了輸入賬號密碼的麻煩,還有一個是為了推廣他們的app,不得不說這種也可以當成是推廣app的一種手段,好了進入正題。

先說一下實現了什么效果,app掃描php寫的頁面(也可以java網頁,都一樣的思路和步驟),掃描成功后跳轉進入主頁,光和你們這么說,肯定有人說了,沒圖說個jb,這就出來一個問題,很多人寫博客,看這標題特別符合自己的問題,然后興致勃勃的進來了,一看,我去...尼瑪全是代碼,也不知道是不是我的那種問題和想要的那種效果,心里沒譜啊,好了,上圖:


別糾結這頁面咋這么丑,沒寫樣式,說一下我實現的思路哈,首先在數據庫中新建一個表用來存儲掃碼登錄信息(id,username,randomnum),這三個分別是id自增長,用戶名,隨機數——>點擊生成二維碼,生成隨機數,可以用http://qr.topscan.com/api.php?text=" + data,可以使用這個生成二維碼,當然你也可以自己寫,這個操作就相當於某寶的那個二維碼登錄框,生成二維碼之后,這個時候做了一個ajax請求操作,在剛才新建的那個表中插入數據,把生成的隨機數保存到表中,這個時候username為空——>打開app進行掃碼操作,app掃描完成之后,進行網絡請求,把你掃描到的二維碼當成參數,做修改操作,修改username為當前你的用戶名——>網頁使用每個幾秒鍾請求另外一個接口,根據隨機數判斷當前username是否為空,如果不為空(剛才掃碼修改了username所以不為空)jquery操作做跳轉操作,這個就是完整的流程。

說的簡單的就是,生成二維碼的時候只存入隨機數(或者你自定義的隨便信息),使用app掃碼之后根據隨機數把用戶名存進去,網頁每隔5s請求另外一個接口時,如果username不為空好了跳轉操作。大體就是這樣的,有可能大神的實現也不是這樣的,我就是把我理解的說出來,如果你們有另外的實現方法也可以在下邊評論告訴我,共同學習,下面貼代碼了。

部分php(新手可能不太規范,勿噴)login.php代碼:

else if ($_REQUEST['act'] != '' && $_REQUEST['act'] == 'codeCreate') {
    //if userName為空--->表示網頁第一次點擊新建生成
    //網頁生成二維碼操作,同時添加數據到表中
    if ($_REQUEST['userName'] != '') {//不為空的時候表示修改
        $userName = $_REQUEST['userName'];
        $randomNum = $_REQUEST['randomNum'];
        echo "掃碼成功";
        $sql = "update UserCodeLogin set username='$userName' WHERE randomnum='$randomNum'";
//        mysqli_query($conn, $sql);//插入成功
    } else {//為空的時候表示是新建二維碼
        //生成隨機數
        $randomNum = "";
        for ($i = 0; $i < 5; $i++) {
            $randomNum .= rand(0, 9);
        }
        echo $randomNum;//顯示生成的隨機數
        $sql = "insert into UserCodeLogin(username,randomnum) VALUES ('','$randomNum')";
//        mysqli_query($conn, $sql);//插入成功
    }
    mysqli_query($conn, $sql);//插入成功

} else if ($_REQUEST['act'] != '' && $_REQUEST['act'] == 'codeSelect') {//根據隨機數查詢表中的username是否為空
    $randomNum = $_REQUEST['randomNum'];
    if ($randomNum == '' && empty($randomNum)) {
    } else if ($randomNum != '') {
        $sql = "select username from UserCodeLogin where randomnum='$randomNum'";
        $result = mysqli_query($conn, $sql);
//        print_r($result);
        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) {
                $userName = $row['username'];
            }
            if ($userName == '' && $userName == null) {
                //說明客戶端還未掃碼修改過
            } else if ($userName != '') {
                //客戶端掃碼完成
                //跳轉頁面
                echo "客戶端掃碼成功,跳轉中...";
            }
        }
    }

 

然后是login.html

<html>
<head>
    <title>這是首頁</title>
</head>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<body>

<script type="text/javascript">
    var type = 1;
    var randomNum;

    function clickBtn() {
        $.post("../login.php?act=codeCreate&userName=",
            function (data) {
                alert("-------random:" + data);
                randomNum = data;
                $("#img").attr('src', "http://qr.topscan.com/api.php?text=" + data);
            });
        type = 2;
    }
    function time() {
        $.post("../login.php?act=codeSelect&randomNum=" + randomNum,
            function (data) {
                if (data) {
                    alert(data);
                    $(location).attr('href', 'index.html');
                } else {
                }
            })
    }
    setInterval("time()", 4000);
</script>
<button type="submit" id="btn" onclick="clickBtn()"> 點擊生成二維碼</button>

<!--src="https://www.baidu.com/img/baidu_jgylogo3.gif"-->
<img id="img" style="visibility: visible" width="250px"/>
</body>
</html>

 

上邊就是服務端的部分代碼,放心有源碼,下邊寫完一起給

下面開始android了關於android的掃碼第三方開源的有挺多的,這里使用的是Zing,他可以實現的挺多的二維碼,條形碼,生成二維碼。。。

建類庫,導jar包,掉用,你們可以直接拿過這個類庫去,然后自己改需要的樣式。

這個圖是目錄結構

 

 

主要的就是mainActivity.java里邊的調用了

掃碼成功之后的回掉:

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        // 掃描二維碼/條碼回傳
        if (requestCode == REQUEST_CODE_SCAN && resultCode == RESULT_OK) {
            if (data != null) {

                String content = data.getStringExtra(Constant.CODED_CONTENT);
                result.setText("掃描結果為:" + content);

                /*執行網絡請求*/
                String username = "dingchao";
                volleyScanCodeLogin(content, username);
                Log.e("aaa","volleyScanCodeLogin。。。3");
            }
        }
    }
volleyScanCodeLogin()方法:
/**
     * 網絡請求
     * 使用Volley進行網絡請求
     *
     * @param content  攜帶的隨機數和用戶名
     * @param username 用戶名
     */
    private void volleyScanCodeLogin(final String content, final String username) {
        Log.e("aaa","volleyScanCodeLogin。。。1");
        final RequestQueue mQueue = Volley.newRequestQueue(MainActivity.this);
        StringRequest stringRequest = new StringRequest(Request.Method.POST, "http://你自己的目錄地址/webcodelogin/login.php", new Response.Listener<String>() {
            @Override
            public void onResponse(String s) {
                Log.e("aaa","volleyScanCodeLogin。。。2");
                Toast.makeText(MainActivity.this, "" + s, Toast.LENGTH_SHORT).show();
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError volleyError) {

            }
        }) {
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String, String> map = new HashMap<String, String>();
                map.put("act", "codeCreate");
                map.put("userName", username);
                map.put("randomNum", content);
                return map;
            }
        };
        mQueue.add(stringRequest);/*請求數據*/
    }
 
        

上邊那些就是主要的工程代碼,然后源碼我打包放到百度雲盤中,鏈接:https://pan.baidu.com/s/1slsQM2D 密碼:gdyp

新的地址鏈接:鏈接:https://pan.baidu.com/s/1pwCnhNCBxbLpIl2-p6WEGQ 密碼:833v

 

如有缺點或不足請不吝指教,如果集成有問題,請留言,或者郵箱dingchao7323@qq.com

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM