跳到主要內容

於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



標籤：

留言

張貼留言

這個網誌中的熱門文章

好用的windows備份檔案dos指令XCOPY-教學撰寫:徐嘉裕Neil hsu

要快速的備份某個硬碟全部資料到備份硬碟中，雖然是可以用windows內建的備份與還原，但如果重灌windows可會有key不同而無法還原的問題，還要改一堆設定煩死了，直接用dos指令XCOPY來做檔案的複製就很快了，資料也不會丟失，好朋友可以參考看看!! 首先開啟windows所有程式->附屬應用程式->開啟命令提示字元! 然後輸入以下指令 XCOPY C:\xxx   F:\xxx /s 藍字的 C:\xxx  為複製檔案來源位置例如要複製整個C槽就輸入 C:\ 綠色的   F:\xxx 為複製目的位置，例如要放到F槽的備份資料夾，就輸入  F:\ 備份 紅字的 S 為複製類型參數，可以自行修改為以下的參數設定： ================================================================= /A    只複製設定成保存屬性的檔案，不要改變屬性的設定。 /M    只複製設定成保存屬性的檔案，並清除保存屬性。 /D:m-d-y  複製指定日期當天或之後變更的檔案。如果沒給日期，只複製那些來源檔案日期比目的檔案日期為新的檔案。 /EXCLUDE:file1[+file2][+file3]...         指定檔案清單字串。每個字串應在不同行。如果有字串對應到要進行複製的檔案絕         對路徑的任何部分，這個檔案會被排除複製。例如，指定字串         \obj\ 或 .obj 的話，會排除所有在 obj 目錄下副檔名是.obj 的檔案複製。 /P    在建立每個目的檔案時顯示提示。 /S    複製每個目錄及其包含的子目錄，不複製空目錄。 /E    複製每個目錄及其包含的子目錄，也複製空目錄。/S 與 /E相同，能夠用來修改 /T。 /V   ...
3 則留言
閱讀完整內容

jQuery取得下拉選單selected中數值與內容的方法

假設選單狀態為： <select id='selectname '> <option value='v1' data-id="d1">選單A</option> <option value='v2' data-id="d2">選單B</option> <option value='v3' data-id="d3">選單C</option> </select> 以jQuery取得選單數值與內容方法如下： 1、取得下拉選單 value 數值的方法 $selectname=$('#selectname').val(); alert($selectname); //顯示選單中 selected 狀態的value數值v1 or  v2  or  v3。 2、取得下拉選單中 data-id 數值的方法 $data-id= $(this).find(':selected').attr('data-id'); alert($data-id); //顯示選單中 selected 狀態的data-id數值d1 or  d2 or  d3。 3、取得下拉選單中 文字 的方法 $selecttext=$(this).find(':selected').text(); alert($selecttext); //顯示選單中 selected 狀態的文字內容，如選單A or  選單B or 選單C。 教學撰寫：徐嘉裕 Neil hsu
張貼留言
閱讀完整內容

XAMPP自行下載PHP官方PHP8.3升級方法

目前這方法只適用於Windows安裝的Xampp，可以下PHP官網的PHP8.3包進行升級，如果是LINUX安裝的LAMPP此方法不適用，可直接跳過! 因為本地端的開發環境需要更高的PHP版本來測試模組，而XAMPP官網釋出的PHP版本只有到PHP8.2，無法滿足需求，只好自己動手DIY升級了，其實方法也很簡單，說明如下： 1、先關閉Xampp Panel的Apache跟Mysql 2、前往PHP官網，下載PHP8.3包(VS16 x64 Thread Safe) 下載連結： https://windows.php.net/download#php-8.3-ts-vs16-x64 3、吧下載回來的php包放解壓縮放到php資料夾裡面(建立一個php資料夾)，然後吧Xampp根目錄中的php檔案更名，例如改為php_8.1，再吧剛剛下載建立的php資料夾放到Xampp根目錄中c:\xampp\php 4、進入php根目錄，找到php.ini-development，複製一份後改為php.ini，用文字編輯器打開進入 5、先搜尋;extension_dir，在下面加上extension_dir = "\xampp\php\ext" 6、再搜尋;extension=curl，會有下面這一排啟用套件設定 將以下套件的;註解拿掉 extension=curl extension=fileinfo extension=gd extension=gettext extension=mbstring extension=exif      extension=mysqli extension=openssl extension=pdo_mysql extension=pdo_sqlite extension=zip 7、最後需要吧 C:\xampp\php裡面的 libssh2.dll 複製後貼到C:\xampp\apache\bin 覆蓋舊檔 再到資料夾C:\xampp\php中輸入搜尋 libcrypto-*.dll 和 libssl-*.dll 找到兩支檔，複製後貼到C:\xampp\apache\bin 覆蓋舊檔 找到php.ini中的curl.cainfo，吧註解拿掉改為 curl.cainfo = "C:\xampp\php\ext...
張貼留言
閱讀完整內容