Needless to say we have too many iOS devices accessing our apps nowadays... unfortunately, the built-in captcha control provided by PHPR uses flash. Here is a solution to implementing captcha that does not use flash. I borrowed partial code from this post:http://webdesignpub.com/html-contact-form-captcha/

First:
Download php script file from here: http://webdesignpub....orm-captcha.zip

Second:
Find a place in your PHPR form where you want to add the captcha image and insert a php snippet.

$random_value
= rand();

echo
'
<div>
        <img src="captcha_code_file.php?rand='
.$random_value.'" id="captchaimg" >
        <br>
        <label for="message">Enter the code above here :</label>
        <br>
        <input id="value_CaptchaValue_1" style="" type="text" name="value_CaptchaValue_1" value="">
        <br>
        <small>Can\'t read the image? click <a href="javascript: refreshCaptcha();">here</a> to refresh</small>
        <br>
        <br>
        <br>
</div>

<script type="text/javascript">
function refreshCaptcha(){
                //console.log("captcha refresehed");
                var img = document.images["captchaimg"];
                img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
        }
</script>'
;


Third:
Copy and paste the file your downloaded from zip folder in first step called "captcha_code_file.php" and place it in your project directory (root folder of project... not necessarily your web server root). Also copy the monofont.ttf file to same location.

Fourth:
In your PHPR form "Before record Added" or "Before record updated" event (depends if you are using it on a add or edit type form) add the following code:
if(empty($_SESSION['6_letters_code'] ) || strcasecmp($_SESSION['6_letters_code'], $values['CaptchaValue']) != 0){
//Note: the captcha code is compared case insensitively.
//if you want case sensitive match, update the check above to strcmp()

        $message
= "<div style='background-color: #FF0; padding-top: 10px; padding-bottom: 10px;color: #F00;font-size: 1.2em;'>
                                        The captcha code below does not match! Try again.
                                        </div>"
;
       
return false;
}


Notice that I am using a PHPR field that I created in my underlying table called "CaptchaValue" which is why I included the $values['CaptchaValue'] in the conditional statement above. This is what captures the user input to verify if they entered the same thing that is presented in the captcha image.

Fifth:
In the same form go to the "After record added" or "After record updated" event and add the following code to unset the $_SESSION['6_letter_code'] var to prevent same captcha value entered by user from being used again.
unset($_SESSION['6_letters_code']);//Unset this after submission so it needs to be recreated and cannot be reused by hackers


Done!

That's it. You can also tweak some values in the "captcha_code_file.php" to change the size of the image and a few other things.

Hope this helps folks out there and maybe even makes it into a new version of PHPR given the Flash issues with iOS devices). 

Post a Comment