1. 程式人生 > >Android 實現掃碼登入

Android 實現掃碼登入

如今通過掃描二維碼然後跳轉登入的情形已經很普遍了,這裡就來模擬實現一個簡單的跳轉登入功能

模擬登陸的思路:

  • 建立一張資料表,包含三個欄位,分別為主鍵id,使用者名稱username,隨機數randnumber
  • 要生成一張包含有隨機數的二維碼圖片,可以採用聯圖網(http://www.topscan.com/pingtai/)提供的API介面(http://qr.topscan.com/api.php?text=)只要在連結字尾加上特定文字資訊,就可以得到指定的二維碼圖片了。每生成一張二維碼圖片,就向資料庫插入該隨機數,此時使用者名稱欄位為空。
  • 客戶端如果掃描了二維碼圖片,就向伺服器端傳送讀取到的隨機數以及使用者名稱,通過隨機數查詢到指定欄位,向該欄位插入使用者名稱
  • 想要讓第二步驟生成的二維碼圖片知道自己被掃描了然後自動跳轉登入,需要第二步驟的生成的網頁每隔一段時間就查詢username欄位是否為空,如果不為空,可知已經被掃描,,從而實現跳轉登入

一、搭建伺服器端開發環境

為了簡化步驟,這裡選擇整合軟體包——XAMPP
XAMPP是一個整合型的Apache套件,包含Apache、MySQL、PHP、PERL,可以一鍵式搭建起開發環境,推薦初學者使用。官方網址——https://www.apachefriends.org/zh_cn/index.html
雙擊XAMPP安裝包開始安裝。
選擇全部安裝

這裡寫圖片描述

執行軟體,點選start開啟Apache和MySql,如果文字背景顏色變為綠色,說明服務開啟成功。如果失敗,先檢查電腦中是否已經安裝了該服務,或者是埠號衝突,有時候安裝完成也需要先重啟下電腦。

這裡寫圖片描述

雙擊MySql一行的Admin按鈕,如果能啟動如下網頁,說明一切無誤。

這裡寫圖片描述

二、新建資料表

建立資料庫scan_code,再新建資料表scancode,包含三個欄位,id和randnumber作為聯合主鍵

這裡寫圖片描述

三、伺服器端的設計

這裡採用php作為開發語言
首先需要連線資料庫:mysql_connection.php

<?php
    $con=mysql_connect("localhost","root","");
    mysql_select_db("scan_code");
?>

首頁index.php檔案主要完成生成二維碼圖片的操作
生成一個位數為五的隨機數字,然後用聯圖網的API介面生成相應的二維碼圖片並顯示,並將隨機數插入到資料庫當中

<html>
    <head>
        <title>這是首頁</title>
    </head>
    <body>
        <?php
            require 'mysql_connection.php';
            $randnumber = "";
            for ($i = 0; $i < 5; $i++) {
                $randnumber .= rand(0, 9);
            }
            mysql_query("insert into scancode(randnumber) values('$randnumber')");
        ?>
        <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="250px" />
    </body>
</html>

在xampp的安裝目錄下的htdocs資料夾裡再新建個資料夾,命名為php,將以上兩個php檔案放入當中,開啟apache伺服器與mysql
在瀏覽器輸入:http://localhost/php/index.php
即可看到一張二維碼圖片,資料表當中也會多出一行資料
開啟二維碼網頁的原始碼,也可以看到該隨機數

這裡寫圖片描述

這裡寫圖片描述

再建立一個welcome.php檔案,作為掃碼成功後網頁跳轉到的連結方向,只包含一句歡迎語句即可

<html>
<head>
    <title>歡迎頁</title>
</head>
<body>
    你好啊,葉應是葉
</body>
</html>

為了讓inde.php頁知道有人已經掃描了二維碼,需要讓之進行一個輪詢操作,每隔一段時間查詢資料庫表
index.php修改為:

<html>
    <head>
        <title>這是首頁</title>
    </head>
    <body>
        <?php
            require 'mysql_connection.php';
            $randnumber = "";
            for ($i = 0; $i < 5; $i++) {
                $randnumber .= rand(0, 9);
            }
            mysql_query("insert into scancode(randnumber) values('$randnumber')");
        ?>
        <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="250px" />
        <input hidden="hidden" type="text" id="randnumber" value="<?php echo $randnumber; ?>"/>
    </body>
    <script>
        function polling() {
            var xmlHttp;
            if(window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.status == 200 && xmlHttp.readyState == 4) {
                    var result = xmlHttp.responseText;
                    if(result == 'true') {
                        window.location.href = 'welcome.php';
                    }
                }
            }
            var randnumber = document.getElementById("randnumber").value;
            xmlHttp.open("GET", "polling.php?randnumber=" + randnumber, true);
            xmlHttp.send();
        }
        setInterval("polling()", 1000);
    </script>
</html>

程式碼所進行的操作是:每隔一秒執行一次polling()函式,polling()函式又去非同步載入polling.php檔案,讓polling.php檔案去進行資料庫查詢操作,如果查詢到的結果是true,則跳轉到welcome.php頁面,否則繼續查詢

資料庫查詢操作:polling.php檔案

<?php
    require 'mysql_connection.php';
    $randnumber = $_GET['randnumber'];
    $result = mysql_query("select * from scancode where randnumber='$randnumber'");
    $row = mysql_fetch_array($result);
    if ($row['username'] != "") {
        echo "true";
    } else {
        echo "false";
    }
?>

此時,如果我們向資料庫的username欄位插入資料,則index.php頁面將自動跳轉到welcome.php頁面

不過我們不可能總是這樣來手動輸入資料,所以需要自定義一個介面來自動向資料庫輸入使用者名稱
這裡為了簡便,都採用get的方式來提交資料
saveUsername.php:

<?php
    require 'mysql_connection.php';
    $randnumber=$_GET['randnumber'];
    $username=$_GET['username'];
    mysql_query("update scancode set username='$username' where randnumber='$randnumber'");
?>

則如今的操作可簡化為:

這裡寫圖片描述

本來,我想在移動端實現掃描二維碼的功能,可是找不到適用於Android Studio的二維碼掃描開源庫,只能作罷

這裡提供上述用到的所有php檔案:掃碼登入