First of all you need to download the files from here http://www.webdesignbeach.com/ajax-fancy-captcha-php.zip I won’t waste time writing how to install the files since there is a good explanation on the website http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin
But copy the files into your Blogengine folder
The first problem I faced was that it was made with PHP in mind and since BlogEngine are using .NET I had to change the captcha.php file to a .NET version.
So I created a new file in the captcha folder called captcha.aspx looking like this:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%
if(Request["REQUEST_METHOD"] == "POST" && !string.IsNullOrEmpty(Request["captcha"]) && Request["captcha"] == Session["captcha"])
{
Response.Write( "Passed!"); /* YOUR CODE GOES HERE */
Session["captcha"] = string.Empty; /* this line makes session free, we recommend you to keep it */
}
else if(Request["REQUEST_METHOD"] == "POST" && !string.IsNullOrEmpty(Request["captcha"]))
{
Response.Write("Failed!");
}
/* in case that form isn't submitted this file will create a random number and save it in session */
else
{
Random r = new Random();
int random = r.Next(0,4);
Session["captcha"] = r.Next(0,4);;
Response.Write(Session["captcha"]);
}
%>
I really don’t care much about anything in here besides the Session handling that’s because .NET and Blogengine both submits form data using javascript and I don’t like to mess with the mechanics so nothing special happens here, except the random numbers generated.
The original plug-in was made so a post could not happen without the right icon was chosen, but in this version the submit button is merely disabled/enabled.
Make sure that you have enabled session in the web.config or nothing will happen.
In the jquery.captcha.js file find the following line and comment it out
//$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" id=\"captcha\" name=\"captcha\" value=\"" + rand + "\">");
Insert thes after the line above
$("#captcha").val(rand);
Next a little configuration of Blogengine is required, bear in mind that this is only tested in version 1.4.5.0, but in the settings page the references to the scripts are inserted
<script type="text/javascript" src="../latest-jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../latest-jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../captcha/jquery.captcha.js"></script>
<link href="../captcha/captcha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btnSaveAjax").attr("disabled","disabled");
$j(function() {
$j(".ajax-fc-container").captcha({
borderColor: "silver",
text: "Verify that you are a human,<br />drag <span>scissors</span> into the circle." });
});
});
</script>
BlogEngine uses the $ sign too so in order to avoid problems with JQuery make sure that you add $j = jQuery.noConflict(); that cause some grief on my behalf but luckily I found this blog http://www.dscoduc.com/2008/09/jquery-goodness-for-blogenginenet/
Back in the file system locate the User Controls folder in BlogEngine and open the CommentView.aspx file and insert the following:
<!-- Begin of captcha -->
<div class="ajax-fc-container">You must enable javascript to see captcha here</div>
<!-- End of captcha -->
This is the container for the Plugin so place it somewhere fitting like before the submit button. Before this line:
<input type="button" id="btnSaveAjax" value="<%=Resources.labels.saveComment %>" onclick="if(Page_ClientValidate('AddComment')){AddComment()}" tabindex="7" />
Insert the following line in the same file <input type="hidden" name="captcha" id="captcha" value="" /> this is the value generated by the captcha script.
Lastly you must edit the AddComment() method in the blog.js file after all the variable declarations replace:
WebForm_DoCallback('ctl00$cphBody$CommentView1',argument, callback,'comment',null,false);
with
var cap = $("captcha");
if(cap.value != "") {
WebForm_DoCallback('ctl00$cphBody$CommentView1',argument, callback,'comment',null,false);
}
This will make sure the submit will never run unless the hidden field has a value. Alternatively you could move the check into the comments.ascx.cs file and check the value against the session value. But so far I have'nt got any spam.
That’s it time will tell if it solves the spam problem but why don’t try it out and leave a comment.
Pretty neat if I might say so, all credits to http://www.webdesignbeach.com of cause.
Subscribe