Recently Google has released a new version of recaptcha, with enhanced security and richer user experience. The documentation available at this time does not include the steps to implement Google recaptcha in ASP.NET applications nor SharePoint. My intention in this article is to explain the detailed step by step to add this robot proof widget in our SharePoint application pages, but it would also will work for any ASP.NET application.
The steps:
1) Register your application at:
https://www.google.com/recaptcha/admin#list
You must enter an identifying label of your web application, which will help you later to manage keys and our application domain, for example: "myapp.com". Important: You don't need add a public domain, private domains as "svr2013-local" will also work fine.
2) After registering our application you have the keys to implement recaptcha: "Site key" which you will use to create our recaptcha widget in html, and also "Secret key" which you will use to communicate with the recaptcha validator service but from the server's side.
3) To integrate in your HTML client the recaptcha script reference must be incorporated in the HEAD section of the page :
<Script src = 'https: //www.google.com/recaptcha/api.js'> </ script>
In the case of an application page of SharePoint 2013, as all .js, style sheets and others will go into this container:
<Asp: Content ID = "PageHead" ContentPlaceHolderID = "PlaceHolderAdditionalPageHead" runat = "server"><Script src = 'https: //www.google.com/recaptcha/api.js'> </ script></ Asp: Content>
4) then you must incorporate the widget recaptcha:
<div class = "g-recaptcha" This data-SiteKey = "here's your key site"> </ div>
within the web form (before the </ form>), in the case of an application page of SharePoint 2013 anger within the container:
<asp: Content ID = "Main" ContentPlaceHolderID = "PlaceHolderMain" runat = "server">
<div id="section0">
<div class="field">
<label for="FullName">Full Name</label>
<asp:TextBox runat="server" ID="FullName" ClientIDMode="Static" required placeholder="enter your first name and surname" />
</div>
<div class="field">
<label for="Email">Email</label>
<asp:TextBox runat="server" ID="Email" ClientIDMode="Static" required placeholder="enter your email address" type="email" />
</div>
<div class="field">
<label for="Country">Location</label>
<asp:HiddenField runat="server" ID="HiddenCountry" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="Country" ClientIDMode="Static" placeholder="enter your location" required />
</div>
<div class="field">
<label for="Company">Company</label>
<asp:HiddenField runat="server" ID="HiddenCompany" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="Company" ClientIDMode="Static" placeholder="enter your company" required />
</div>
<div class="field">
<label for="Community">Community</label>
<asp:HiddenField runat="server" ID="HiddenCommunity" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="Community" ClientIDMode="Static" placeholder="enter the community you want to join" />
</div>
<div class="field">
<label for="Comments">Comments</label>
<!--<input id="Comments" name="Comments" size="65" placeholder="if you have any comment or sugestion please enter here" type="text" />-->
<asp:TextBox runat="server" ID="Comments" ClientIDMode="Static" placeholder="if you have any comment or sugestion please leave it here" />
</div>
<div class="field">
<div class = "g-recaptcha" This data-SiteKey = "here's your key site"> </ div>
</div>
<div class="field">
<asp:Button runat="server" ID="SendButton" Text="Submit" OnClick="SendButton_Click" />
</div>
</ asp: Content>
5) Google recaptcha allows integration with our server side, so you can control the server side validation, to do so you will create a class called "CaptchaResponse":
public class CaptchaResponse
{
public bool Success {get; Set; }
public List <string> ErrorCodes {get; Set; }
}
You also need to create a method to validate the response recatpcha, this will do in the main class of our website:
public bool ValidateCaptcha()
{
var response = Request ["g-recaptcha-response"];
secret = const string "here's your secret key";
var client = new WebClient ();
var reply =
client.DownloadString (
string.Format ("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}" secret, response));
var serializer = new JavaScriptSerializer();
var captchaResponse = serializer.Deserialize <CaptchaResponse> (reply);
if (! captchaResponse.Success)
{
return false;
}
return true;
}
As you can see you could also control according to the type of error that brings us back but in my case it was not necessary, it is only required to know whether it was valid or not.
5) Finally in the OnClick event of the button on the form called the "ValidateCaptcha" method:
protected void SendButton_Click(object sender, EventArgs e)
{
try
{
if (this.Page.IsValid && ValidateCaptcha())
{
//Do something
.
.
.
Response.Redirect("Confirmation.aspx",false);
}
}
catch(Exception ex)
{
Response.RedirectPermanent("Failure.aspx");
}
}
Conclusion: Implementing Google recaptcha 2 in our ASP.NET applications could improve the security or the data entries. The implementation requires only a few steps and it is very straight forward to get it work in almost no time.
Suscribirse a:
Enviar comentarios (Atom)
nice post with easy to understand explanations.
ResponderEliminar