Using Captcha Control On DotNetNuke Page
Published on 6/24/2010 by Anton Burtsev
All Articles / Tutorials
This tutorial shows how to create a form with a captcha control. Three controls are covered: Telerik RadCaptcha, DotNetNuke CaptchaControl, reCaptcha online service.
Live demo for the article:
http://xsltdb.com/XsltDb/Help/CaptchaSamples.aspx
In this article I show you how to use Captcha on DotNetNuke page. I take 3 captcha control:
- Native DotNetNuke CaptchaControl
- Telerik RadCaptcha
- External well-known captcha service reCaptcha
Telerik RadCaptcha
As far as XsltDb allows us to create ASP.NET Controls we can use RadCaptcha control to implement protection. The code that creates a captcha on the form is simple:
We must know the type of your nature. Type the code below and submit form:<br/>
<mdo:asp xmlns:telerik="telerik" xmlns:asp="asp">
<asp:Label runat="server" ID="litT" ForeColor="#00AA00" />
<telerik:RadCaptcha ID="capImgT" runat="server" ErrorMessage="You are not a man..." />
<asp:Button runat="server" ID="btnSubmitT" Text="Submit Form" />
</mdo:asp>
<mdo:pre-render>
<xsl:if test="mdo:event-source()='btnSubmitT'">
<xsl:choose>
<xsl:when test="mdo:aspnet('#capImgT.IsValid')">
<!-- Here you put your database processing and other significant manipulations -->
<xsl:execute select="mdo:assign('#litT.Text', 'Your input is correct, you are a human!')" />
</xsl:when>
<xsl:otherwise>
<xsl:execute select="mdo:assign('#litT.Text', '')" />
</xsl:otherwise>
</xsl:choose>
</xsl:if>
</mdo:pre-render>
As you see the code consists of two parts:
- mdo:asp section is executed at page initialization and creates all controls that required for the demo:
- asp:Label that shows result of processing in case of valid input
- telerik:RadCaptcha - captcha image and text box
- asp:Button - submit button that sends data to server and initiate server-side processing
- mdo:pre-render section is executed at PreRender phase of ASP.NET page life cycle. All controls are created ath this time so we can't declare new control and we can't generate additional markup. We can provide values for existing control properties using mdo:assign function.
mdo:asp section is clear and but mdo:pre-render section must be commented.
<xsl:if test="mdo:event-source()='btnSubmitT'">
- mdo:event-source() returns id of ASP.NET control that fires page submission
<xsl:when test="mdo:aspnet('#capImgT.IsValid')">
- mdo:aspnet() returns a property value of ASP.NET environment objects. If name of object is started with # - XsltDb uses text after # and before "." as server-side ASP.NET control ID and allows to address control properties.
<xsl:execute select="mdo:assign('#lit.Text', 'Your input is correct, you are a human!')" />
- mdo:assign() assigns a value to the property of ASP.NET environment objects. And again, if root segment in path is started with #, mdo:assing() writes value to a ASP.NET control with this ID.
DotNetNuke CaptchaControl
We must know the type of your nature. Type the code below and submit form:<br/>
<mdo:asp xmlns:asp="asp" xmlns:dnn="dnn">
<asp:Label runat="server" ID="litD" ForeColor="#00AA00" />
<dnn:CaptchaControl ID="capImgD" CaptchaHeight="40" CaptchaWidth="150"
ErrorStyle-CssClass="NormalRed" cssclass="Normal" runat="server"
ErrorMessage="The typed code must match the image, please try again"/>
<asp:Button runat="server" ID="btnSubmitD" Text="Submit Form" />
</mdo:asp>
<mdo:pre-render>
<xsl:if test="mdo:event-source()='btnSubmitD'">
<xsl:choose>
<xsl:when test="mdo:aspnet('#capImgD.IsValid')">
<!-- Here you put your database processing and other significant manipulations -->
<xsl:execute select="mdo:assign('#litD.Text', 'Your input is correct, you are a human!')" />
</xsl:when>
<xsl:otherwise>
<xsl:execute select="mdo:assign('#litD.Text', '')" />
</xsl:otherwise>
</xsl:choose>
</xsl:if>
</mdo:pre-render>
Google reCaptcha
To start using reCaptcha you must
download Recaptcha.dll and put it into your DotNetNuke site
Bin folder. You also need public and private keys that are
generated online here.
<xsl:text disable-output-escaping="yes"><![CDATA[
<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
]]></xsl:text>
<mdo:asp xmlns:asp="asp" xmlns:recaptcha="recaptcha">
<style type="text/css">
.reMsg { color: <asp:Literal ID="reClr" runat="server"/>; }
</style>
<asp:Label CssClass="reMsg" ID="litR" runat="server" />
<recaptcha:RecaptchaControl
ID="capImgR"
runat="server"
PublicKey="6LeVEbsSAAAAAEQlBW4BIuPtFfhc-NbcfQe5hQO_"
PrivateKey="6LeVEbsSAAAAAHxEFyG6LOMg_hFZbBNAhl8xpXdi"
/>
<br />
<asp:Button ID="btnSubmitR" runat="server" Text="Submit" />
</mdo:asp>
<mdo:pre-render>
<xsl:if test="mdo:event-source()='btnSubmitR'">
<xsl:choose>
<xsl:when test="mdo:aspnet('#capImgR.IsValid')">
<!-- Here you put your database processing and other significant manipulations -->
<xsl:execute select="mdo:assign('#litR.Text', 'Your input is correct, you are a human!')" />
<xsl:execute select="mdo:assign('#reClr.Text', '#00AA00')" />
</xsl:when>
<xsl:otherwise>
<xsl:execute select="mdo:assign('#litR.Text', 'You are wrong, try once more!')" />
<xsl:execute select="mdo:assign('#reClr.Text', '#FF0000')" />
</xsl:otherwise>
</xsl:choose>
</xsl:if>
</mdo:pre-render>
Read more about reCaptcha at Google.
Review these Captcha-s in action here: http://xsltdb.com/XsltDb/Help/CaptchaSamples.aspx
Print Article