New reCaptcha

by Štěpán Kozák
New reCaptcha preview

Price

$0

Details

Licence:
PGPL
Works with:
8.1, 8.2, 9.0, 10.0
Version:

Web site

https://developers.google.com/recaptcha/

Summary

An implementation of Google's new reCAPTCHA as a Kentico form control, available with full source code.

Description

Recently, Google released a new innovative version of reCAPTCHA where it is enough to tick a box in most cases leading to way better experience for your users. This is an implementation of this reCAPTCHA as a Kentico Form control, available with full source code.

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis engine to tell humans and bots apart. With the new API, a significant number of your valid human users will pass the reCAPTCHA challenge without having to solve a CAPTCHA.

Comments


Keio K commented on

I have jsut tested the control, it still not working on multi forms (more than 1 form). For example, if you have a form in content and a form footer, which are both using New reCaptcha controls, none of them can pass validation. Especially, the first form (according to the position in your HTML code) Captcha control will be disappeared after click submit once.

I had fixed the when I worked on my project on Feb in a day. 3 areas need to be updated.

1) Render -> I had to add multiple callback js functions for control itself and also the CaptchaCallback loop callback function.

2) OnInit -> I had to register all callback functions - CaptchaCallback (loop in the function) and individual loop for all control in page. (I would think ReCaptcha control would callback individually. However, I need to register all callback functions in my test - CaptchaCallback (loop all same controls in page in the function) AND CaptchaCallBack_[Control client id] loop to register same controls callback functions. By logic, should be either one would work. However, may be caused by 2 control will have 2 init that override another one register, so I do register all of the callback function to fix the disappearing problem)

3) The first 2 will fix the disappear issue. However, the validation still cannot be passed because the GetCoupledRequestFormValue function cannot return correct value when there are more than 1 form, it will only return the first control value (wherever which come first). Since it is HTML input value, with the same field name in 2 control, it will become "value1,value2". if you are submitting form 2, you need to update this part to provide the correct value pass to API for validation.

HERE are the code I updated.

/// <summary>
/// Control init event
/// </summary>
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Page.Validators.Add(this);
IsMultipleInstance = false;

ScriptManager.RegisterStartupScript(this, typeof(Page), UniqueID, "if (typeof(CaptchaCallback) === 'function') { CaptchaCallback(); }", true);

foreach (var validator in Page.Validators)
{
if (validator is NewRecaptchaControl)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), "CallBack_" + ((NewRecaptchaControl)validator).ClientID, "if (typeof(CaptchaCallback_" + ((NewRecaptchaControl)validator).ClientID + ") === 'function') { CaptchaCallback_" + ((NewRecaptchaControl)validator).ClientID + "(); }", true);
}
}
}


/// <summary>
/// Control render event.
/// </summary>
/// <param name="writer">HtmlTextWriter parameter</param>
protected override void Render(HtmlTextWriter writer)
{
// Render the div tag for nesting the reCaptcha
writer.WriteBeginTag("div");
if (!string.IsNullOrEmpty(Theme))
{
writer.WriteAttribute("data-theme", Theme);
}
if (!string.IsNullOrEmpty(DataType))
{
writer.WriteAttribute("data-type", DataType);
}
writer.Write("></div>");

if (!IsMultipleInstance)
{
IsMultipleInstance = true;

// Render the reCaptcha scripts
string sUrl = RECAPTCHA_API_URL.Replace("onload=CaptchaCallback&", "onload=CaptchaCallback_" + this.ClientID + "&");

writer.Write("<script src=\"{0}\" async defer></script>", RECAPTCHA_API_URL);

writer.Write("<script>");

writer.Write("var CaptchaCallback_" + this.ClientID + " = function(){");
writer.Write("if (document.getElementById('" + this.ClientID + "') != null && (typeof grecaptcha!== 'undefined')) { grecaptcha.render(document.getElementById('" + this.ClientID + "'), {'sitekey' : '" + SiteKey + "'}); }");
writer.Write("};");

writer.Write("var CaptchaCallback = function(){");
foreach (var validator in Page.Validators)
{
if (validator is NewRecaptchaControl)
{
writer.Write("if (document.getElementById('" + ((NewRecaptchaControl)validator).ClientID + "') != null && (typeof grecaptcha!== 'undefined')) { grecaptcha.render(document.getElementById('" + ((NewRecaptchaControl)validator).ClientID + "'), {'sitekey' : '" + SiteKey + "'}); }");
}
}
writer.Write("};");

writer.Write("</script>");

}
base.Render(writer);
}


/// <summary>
/// Get form field value
/// </summary>
/// <param name="formField">Field name to get its value from</param>
private string GetCoupledRequestFormValue(string formField)
{
// Get form value
var fieldValue = Context.Request.Form[formField];

if (!string.IsNullOrEmpty(fieldValue))
{
var fieldValuesArray = fieldValue.Split(new[] { ',' });
int iCount = -1;
foreach (var validator in Page.Validators)
{
if (validator is NewRecaptchaControl)
{
iCount += 1;
if (this.ClientID == ((NewRecaptchaControl)validator).ClientID)
{
break;
}
}
}
if (fieldValuesArray.Length > 0)
{
fieldValue = fieldValuesArray[iCount];
}
else
{
fieldValue = string.Empty;
}
}

return fieldValue;
}


Hope this can help everyone who need to put this control into more than one form in the same page. Thank you :)

Brenden Kehren commented on

Thanks for keeping this control up to date! Unfortunately the way the Membership module is setup the Google secret and site keys in the Membership Settings cannot be used per site because they are set to be global so you are forced to enter them every time you use the control. This scenario doesn't work well when using a multi-tenancy environment. Maybe the Membership Settings could be updated to allow this in a hotfix or a new version?

Daniela Kubikova commented on

Hi all, a new package with "new reCatpcha" form control - version for Kentico 9 - was just uploaded!

zbynekh-kentico commented on

Hi Keio, it's hard to tell without seeing your code using the reCAPTCHA Control. It would be great if you could provide us an example that we can inspect.

Keio commented on

According to Zbyněk said: This new version allows you to add multiple forms with reCAPTCHA Control on a single page as well as use this control inside Update Panel.

However, I have tested it's not working in multi form in the same page, even through I tried to modify the source code to use unique callback function name. It still comes up with javascript error and the new ReCaptcha will be disappear. Javascript Error: "Uncaught Error: ReCAPTCHA placeholder element must be empty."

Christian commented on

It appears that this control does not support the "data-size" attribute. Is there any way to implement that?

DanielaK commented on

Hi John, if you have downloaded the form control here and followed all the instructions included in the download package you should have new form control with the name "New reCaptcha" in your Kentico instance. This new form control contains the "I am not a robot" checkbox as shown on the picture above. Are you sure that you have used this "New reCaptcha" form control instead of the old "reCaptcha" form control (which is included in Kentico out-of-the-box)?

John commented on

Hello,
When i downloaded the new recaptcha for Kentico 8.1, I'm able to see the implementation for recaptcha (https://docs.kentico.com/pages/viewpage.action?pageId=57442755#Spamprotection(CAPTCHA)-ConfiguringreCAPTCHA). Can anyone post sample user control code for the new release as shown in the above figure (I'm not a robot)??

When i tested my application with downloaded sample, I cannot see the latest version rather i see an implementation for recaptcha (audio, image). Can anyone point me to the right sample code?

Awaiting your response,

Zbyněk Hanák commented on

We are happy to announce we did some small improvements in reCAPTCHA Form Control implementation to make it work correctly in more development scenarios. This new version allows you to add multiple forms with reCAPTCHA Control on a single page as well as use this control inside Update Panel.

Enjoy!

kentico_ondrejv commented on

Hi Rob,

Thank you for your suggestion. By default, this new Recaptcha form control uses language strings according to users' "user agent" setting. Therefore it should be localized just fine by default. However, you are still be able to override it and set some required language. If you look around there are couple of articles about it all over the internet (e.g.: http://webdesign.tutsplus.com/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024). Should you have already customized it this way, we'll be happy to receive your customization and incorporate it here.

Regrettably, there are no plans for this customization from our side in near future.

Cheers

Rob R commented on

Very nice, my only suggestion is that it could use some multilingual support . Not hard to add, but would be good to be there by default.

DanielaK commented on

Hi Sean, for more information on how to import new objects in Kentico, please read the Documentation https://docs.kentico.com/display/K82/Importing+a+site+or+objects
Do not forget to check the "Import files (recommended)" and "Import code files" boxes in the Object selection step.

Sean commented on

Hi, I did everything in the instructions up to #11. How do I import the Import_FormControl_NewReCaptcha.zip? Is it through the Ketnico admin panel or some other tool? There's a Kentico Import Tool, but I'm not sure what settings to use for that tool.

Thanks!

maxi commented on

tanks

Daniela Kubikova commented on

Hi yonglas, I am afraid I wasn't able to reproduce the error, it works correctly on my Kentico installation. The only idea I have is that you have ticked the "Required" check box when adding the form control into the form. If so, try to uncheck this box and save the changes. If this will not help, please check:
a) whether the error is thrown also with the standard reCaptcha form control which is included in Kentico by default,
b) what error message is displayed in the English culture,
and send all these information to our support: http://www.kentico.com/Support

yonglas commented on

thanks, i sucsses to import the files.
i implement the new captcha form control but seems that the validation is not working well.
although the google validation is verified the form still display error in the captcha label error.
you can see the screenshot here
http://screencast.com/t/A6BqdhIPMf

DanielaK commented on

Hi yonglas, try to import the form control again and in the Step 2 of the import process tick the "Import files (recommended)" and "Import code files" checkboxes. It could do the trick. If not, please check that you followed all instructions in the attached instructions.txt file properly.

yonglas commented on

Hi, im getting this error
The file '/CMSFormControls/Captcha/NewReCaptcha.ascx' does not exist.