於Xoops佈景中製作一個profile模組註冊頁面的防機器人機制(js+php+ajax)-教學撰寫:徐嘉裕Neil hsu

相信用過Xoops架站的朋友最怕就是遇到機器人了,每天都來註冊產生一大推的垃圾帳號,刪到手都酸了還刪不完,所想以說在佈景中寫一個js+php+ajax的防機器人驗證機制來阻擋垃圾帳號的建立,解決註冊機器人出亂的問題。

範例網站:http://demoweb.neodw.com/themesdemo/modules/profile/register.php



防機器運作方式是這樣,先由js建立10位數的隨機碼,然後透過js建構一個name='verification'欄位取得隨機碼值,另外再透過ajax吧隨機碼值存入$_SESSION['profile_post']中,當user送出表單時所建構的欄位name='verification'會吧數值post到註冊表單的第二頁,然後php會讀取ajax的$_SESSION['profile_post']數值與post過來的$verification核對,如果數值相符則進行後續的註冊流程,若不相符或是$_SESSION['profile_post']為空值則返回首頁顯示【本站不歡迎機器人註冊】的文字,所以就算機器人使用的瀏覽器沒啟用javascript也一樣無法送出註冊會員表單,在第二頁就會被阻擋,資料不會被寫入資料庫中。




製作註冊表單防機器人方法如下(請先安裝profile會員管理模組)

1、於Xoops佈景根目錄中建立一個js資料夾(佈景最頂層目錄),然後建立一個anti-robot.js檔,並貼入以下的code



/*==========註冊頁面防機器人設置==============*/

/*================產生亂數==================*/

var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];


function generateMixed(n) {

var res = "";

for(var i = 0; i < n ; i ++) {

var id = Math.ceil(Math.random()*35);

res += chars[id];

}

return res;

}

var $randomvalue=generateMixed(10);


$(window).load(function() {


$('#profile-form-regform .odd .formButton').attr('disabled', true);

$('#regform #step').attr('disabled', true);

$("#profile-form-regform .odd .formButton").before("<input type='checkbox' id='notarobot' /><label>"+$notarobot+"</label><br /><br />");

$("#profile-form-regform .odd .formButton").after("<input class='verification' type='hidden' disabled='disabled' name='verification' value='"+$randomvalue+"'>");


$("#notarobot").click(function(){

$('#notarobot').attr('disabled', true);

$('#regform #step').attr('disabled', false);

$('.verification').attr('disabled', false);

$('#profile-form-regform .odd .formButton').attr('disabled', false);


$.ajax({

url: $ajaxurl+'/ajax.php',

type: 'POST',

data: {id: '1',random: $randomvalue},


})

});


2、於Xoops樣板<head></head>之間貼上以下的引入js語法連結及代入變數

<{*防機器人*}>

<{if $xoops_dirname eq profile}>

<script>

var $ajaxurl="<{$xoops_imageurl}>program";

var $notarobot="<{$smarty.const._MD_IMNOTAROBOT}>";

</script>

<script type="text/javascript" src="<{$xoops_imageurl}>js/anti-robot.js"></script>

<{/if}>

3、於Xoops佈景根目錄中建立一個program資料夾(佈景最頂層目錄),於program資料夾中建立一個ajax.php檔,用筆記本打開,貼入一下的code


<?php

include "../../../mainfile.php";

$random=(empty($_REQUEST['random']))?"":$_REQUEST['random'];

$id=(empty($_REQUEST['id']))?"":$_REQUEST['id'];

if($id==1){

$_SESSION['profile_post']["random"]=$random;

}

?>

4、於Xoops佈景的language資料夾中找到tchinese_utf8/main.php,用筆記本打開,貼上以下的code:


/*===註冊表單防機器人========*/

define('_MD_NOTWELCOME','機器人請勿註冊');

define('_MD_IMNOTAROBOT','我不是機器人(請勾選)');


5、於xoops佈景根目錄中建立一個modules資料夾,然後在其中在建立一個profile資料夾,於profile資料夾中建立一個profile_form.tpl檔,用筆記本打開並貼上以下的code

<{php}>

$step=$_POST['step'];

$verification=$_POST['verification'];

if($step==1 and ($verification!=$_SESSION['profile_post']["random"] or $_SESSION['profile_post']["random"]==NULL)){

redirect_header(XOOPS_URL,0 , _MD_NOTWELCOME);

}

<{/php}>


<{$xoForm.javascript}>

<form id="<{$xoForm.name}>" name="<{$xoForm.name}>" action="<{$xoForm.action}>" method="<{$xoForm.method}>" <{$xoForm.extra}> >

<table class="table table-striped profile-form" id="profile-form-<{$xoForm.name}>">

<{foreach item=element from=$xoForm.elements}>

<{if !$element.hidden}>

<tr>

<td class="head">

<div class='xoops-form-element-caption<{if $element.required}>-required<{/if}>'>

<span class='caption-text'><{$element.caption}></span>

<span class='caption-marker'>*</span>

</div>

<{if $element.description != ""}>

<div class='xoops-form-element-help'><{$element.description}></div>

<{/if}>

</td>

<td class="<{cycle values='odd, even'}>">

<{$element.body}>

</td>

</tr>

<{/if}>

<{/foreach}>

</table>

<{foreach item=element from=$xoForm.elements}>

<{if $element.hidden}>

<{$element.body}>

<{/if}>

<{/foreach}>

</form>


6、清除xoops暫存檔,就完成註冊表單防機器人的建置工作了!

暫存檔清除路徑

xoops_data\caches\smarty_cache
xoops_data\caches\smarty_compile
xoops_data\caches\xoops_cache

備註:neilambilight2.5版後的佈景都會配置此項功能
教學撰寫:徐嘉裕 neil hsu



留言

這個網誌中的熱門文章

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

jQuery用.each()取代for迴圈

xampp修改phpMyAdmin的MySQL密碼方法-教學撰寫:徐嘉裕Neil hsu