月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，
  1. 在 login.php 中建立驗證碼程式，這裏我們採session的方式來建立驗證碼，將答案存在session中，然後登入時先使用ajax去確認答案是否正確，如果正確則繼續下一步，如果錯誤則出現錯誤提示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <tr>
        <td class="tt ct">驗證碼</td>
        <td class="pp">
        <?php
        $a=rand(10,99);
        $b=rand(10,99);
        $_SESSION['ans']=$a+$b;
        echo "{$a} + {$b} = ";
        ?>    
        <input type="text" name="ans" id="ans"></td>
    </tr>

  1. 在 ./api/ 目錄中建立 ans.php 檔案，並撰寫檢查驗證碼的功能

    1
    2
    include_once "../base.php";
    echo ($_SESSION['ans']==$_GET['ans'])?1:0;

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function login(table){
    	let user={
    		acc:$("#acc").val(),
    		pw:$("#pw").val()
    	}
    	let ans=$("#ans").val();

    	$.get("./api/ans.php",{ans},(res)=>{
    		if(parseInt(res)){
    			$.post("./api/login.php",{table,user},(res)=>{
    				if(parseInt(res)){
    					switch(table){
    						case "User":
    							location.href="index.php";
    						break;
    						case "Admin":
    							location.href="backend.php";
    						break;
    					}
    				}else{
    					alert("帳號或密碼錯誤")
    				}
    			})
    		}else{
    			alert("對不起，您輸入的驗證碼有誤請您重新登入")
    		}
    	})
    }

  3. 在類別中撰寫login方法
    /controller.php/User.php

    1
    2
    3
    4
    5
    6
    7
    8
    function login($user){
        if($this->count($user)){
            $_SESSION['user']=$user['acc'];
            return 1;
        }else{
            return 0;
        }
    }

  4. 在 ./api/ 目錄中建立 login.php 檔案，利用可變變數的方式來直接取用類別中的login方法，並將表單資料帶入

    1
    2
    3
    4
    include_once "../base.php";

    echo ${$_POST['table']}->login($_POST['user']);

  5. 由於題目中並沒有描述註冊是否需要驗證所有的欄位，也沒有提到登入失敗會如何，因此這些細節可以自己視時間來決定是否增加