Fancy Captcha in BlogEngine 1.6.0

In my previous post I tried to get rid of all the comments spam and succeeded! But I decided to upgrade to Blogengine 1.6.0 due to the new comments moderation features, and it's ok, the thing that still bothers me are that I’m still getting mails about the spam comments, surely it's easy to go in mark them and delete all the comment from a central point but still, I don't want to see those mails. So why not configure Blogengine not to send any mails? Well, I could but then I wouldn’t get alerted when real users leave their comments. So the only solution was to update the captcha package to match Blogengine 1.6.0.


First of all the structure of the package is simplified by grouping the JQuery files under the captcha folder.


It should be a simple copy and paste EXCEPT for the web.config file do not override your own with mine, it only shows what to change to enable session state. As usual backup your files in case something goes wrong.


Insert this in HTML head section under Settings in Blogengine

<script type="text/javascript" src="../captcha/latest-jquery/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="../captcha/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>

And all is good. No more spam. As always the credit goes to http://www.webdesignbeach.com

 

Download the source from this link:

captcha.rar (58,41 kb)

Upgradeing to Blogengine 1.6

The process of upgradeing to Blogengine 1.6 from 1.4.5 was really easy, unfortunately my new and super cool implementation of fancy ajax capcha is no longer to be found on my blog, and since the new version has a better administration of blog comments/spam, I doubt it will return.

Enable fancy JQuery captcha in Blogengine 1.4.5.0 (UPDATED)

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.


 

About the author

Jesper is a serlfemployed IT-consultant and owner of Nsight ApS.

His primary focus is on SharePoint and Microsoft online services like Azure and Office 365

Month List

Page List