測試程式可連結http://yafu.dyndns.org/yafutest/codelogin.php 進行測試
如用憑證(機密性高,不方便),OTP(機密性高,不方便),簡訊碼,電話鎖與認證碼等等!
這次我來用PHP開發認證碼的網頁! 認證碼的部分還有加ㄧ些小點當作背景,來提高用圖片辨識的難度!整個驗證流程如下圖
輸入完成後,帳號密碼去資料庫驗證,驗證碼直接驗證!然後確定是否OK!
因此!這邊需要幾個程式
1.首頁:codelogin.php
2.驗證碼程式:authing.php
3.驗證程式:check.php
確認證號密碼(與假設資料)
驗證碼確認
4.成功顯示頁面:success.php(也可取名為.html)
5.失敗顯示頁面:
帳號密碼錯誤頁面:acpwfail.php(也可取名為.html)
驗證碼錯誤頁面:codefail.php(也可取名為.html)
-----------------------------------------------------------------------------------------------
codelogin.php畫面
-------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<?
$authnum = rand()%10000;
?>
<table width="400" border="1">
<tr>
<td bgcolor="#FFFF00"><div align="center">驗證碼登入頁面</div></td>
</tr>
<tr>
<td><form id="form1" name="form1" method="post" action="check.php">
<table width="400" border="1">
<tr>
<td width="200" bgcolor="#00FFFF"><div align="right">帳號</div></td>
<td width="200"><div align="left">
<label>
<input type="text" name="account" id="account" />
</label>
</div>
<label></label></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div align="right">密碼</div></td>
<td><div align="left">
<div align="left">
<label>
<input type="text" name="passwd" id="passwd" />
</label>
</div>
</div></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div align="right">請輸入如下驗證碼</div></td>
<td><div align="left">
<div align="left">
<label>
<input type="text" name="authcode" id="authcode" />
<input type="hidden" name="authnum" value=<? echo $authnum; ?>>
</label>
</div>
</div></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div align="right">驗證碼</div></td>
<td><div align="left"><img src=authimg.php?authnum=<?
echo $authnum;
?>></div></td>
</tr>
<tr>
<td><label>
<div align="right">
<input type="reset" name="refill" id="refill" value="重填" />
</div>
</label></td>
<td><label>
<div align="left">
<input type="submit" name="send" id="send" value="送出" />
</div>
</label></td>
</tr>
</table>
</form></td>
</tr>
</table>
<p>備註:</p>
<p>正確帳號為:test</p>
<p>密碼為:test123</p>
</body>
</html>
-------------------------------------------------------------------------------
authing.php程式
<?php
//生成驗證碼圖片
Header("Content-type: image/PNG");
srand((double)microtime()*1000000);
$num=$HTTP_GET_VARS['authnum'];
$im = imagecreate(62,20);
ImageColorAllocate($im, 100,10,20);
$numcolor = ImageColorAllocate($im, 200,200,200);
imagestring($im, 5, 10, 3, $num, $numcolor);
for($i=0;$i<200;$i++)
{
$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);
}
ImagePNG($im);
ImageDestroy($im);
?>
--------------------------------------------------------
check.php 程式
<?
//----------取得codelogin傳送過來的帳號與密碼
$account = $_POST['account'];
$passwd = $_POST['passwd'];
$authcode = $_POST['authcode'];
$authnum = $_POST['authnum'];
//----------確認驗證碼是否正確
if(strcmp($authcode,$authnum)==0){
//----------確認帳號密碼是否正確
if(checkap($account,$passwd)){
header('Location: success.php');
}
else {
header('Location: acpwfail.php');
}
}
else {
header('Location: codefail.php');
}
function checkap($account,$passwd){
//------預先定義的帳號密碼-----------
$ac="test";
$pw="test123";
if((strcmp($account,$ac)==0) && (strcmp($passwd,$pw)==0))
return true;
else
return false;
}
?>
--------------------------------------------------------------------
success.php畫面
success.php 程式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
恭喜帳號: 登入成功
</body>
</html>
-----------------------------------------------------------------
codefail.php畫面
codefail.php程式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
<p>很抱歉!驗證碼錯誤!請重新<a href="codelogin.php">登入</a>!</p>
</body>
</html>
------------------------------------------------------------
acpwfail.php畫面
acpwfail.php程式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
很抱歉! 帳號或密碼錯誤! 請重新<a href="codelogin.php">登入</a>!
</body>
</html>
-------------------------------------------------------------------------
將以上程式全部放到安裝網站的根目錄下:我這邊機器是:C:/appserv/www/yafutest/
即可測試! 此程式也可延伸驗證資料從資料庫來!待下次次介紹資料庫介接時再說明
沒有留言:
張貼留言