[技能檢定]題組四步驟7 製作會員登入功能

在 login.php 中建立驗證碼程式，這裏我們採session的方式來建立驗證碼，將答案存在session中，然後登入時先使用ajax去確認答案是否正確，如果正確則繼續下一步，如果錯誤則出現錯誤提示

<tr>
    <td class="tt ct">驗證碼</td>
    <td class="pp">
    <?php
        //使用亂數取得兩個變數
        $a=rand(10,99);
        $b=rand(10,99);
        //將答案存入session
        $_SESSION['ans']=$a+$b;
        //顯示驗證碼字串在頁面上
        echo "{$a} + {$b} = ";
    ?>    
    <input type="text" name="ans" id="ans"></td>
</tr>

在 ./api/ 目錄中建立 chk_ans.php 檔案，並撰寫檢查驗證碼的功能
1
2
3
session_start();

echo ($_SESSION['ans']==$_GET['ans'])?1:0;

在 ./js/js.js 中建立檢查驗證碼的js程式碼，在外部js檔中建立這支函式，並增加帶入資料表物件名稱的參數，這會讓這支函式同時也可以適用於管理登入

//建立登入函式，並傳入table參數
function login(table){
    //使用ajax呼叫api/chk_ans.php，並傳入ans參數
    $.get('./api/chk_ans.php',{ans:$("#ans").val()},(chk)=>{
        //判斷回傳值是否為0
        if(parseInt(chk)==0){
            //回傳值為0，顯示警告訊息
            alert("驗證碼錯誤，請重新輸入")
        }else{
            //回傳值不為0，使用ajax呼叫api/chk_pw.php，並傳入table、acc、pw參數
            $.post("./api/chk_pw.php",
                    {table,
                     acc:$("#acc").val(),
                     pw:$("#pw").val()},
                    (res)=>{
                //判斷回傳值是否為0
                if(parseInt(res)==0){
                    //回傳值為0，顯示警告訊息
                    alert("帳號或密碼錯誤，請重新輸入")
                }else{
                    //回傳值不為0，導向首頁
                    location.href='index.php';
                }
            })
        }
    })
}

在 ./api/ 目錄中建立 chk_pw.php 檔案，利用可變變數的方式來建立對應的資料表物件，這讓這支程式可以同時被會員登入和管理登入使用

include_once 'db.php';
//取得table參數
$table=$_POST['table'];
//移除$_POST表單資料中的table參數
unset($_POST['table']);
//建立DB物件，並傳入table參數
$db=new DB($table);
//呼叫DB物件的count方法，並傳入$_POST表單資料
$chk=$db->count($_POST);
//判斷回傳值是否為1
if($chk){
    //回傳值為1，將acc欄位的值寫入$_SESSION[$table]變數
    echo $chk;
    $_SESSION[$table]=$_POST['acc'];
}else{
    //回傳值不為1，顯示0
    echo $chk;
}