Google Recaptcha v2 (NO-captcha) in Copernica formulieren

Iets zat mij al enige tijd dwars en vandaag had ik even een ingeving hoe ik de webformulieren van Copernica kon voorzien van de nieuwste versie van Google recaptcha.

Recaptcha

Google heeft een behoorlijke tijd geleden een anti-spam controle aangeboden voor webmasters met formulieren. Hier maakt Copernica ook gebruik van en ik denk dat iedereen ze wel kent. Vage plaatjes met vervormde teksten of cijfers die slecht leesbaar zijn. Frustraties levert dit voor veel gebruikers.

Google heeft dit gemoderniseerd en geprobeerd het eenvoudiger te maken voor de eindgebruiker met de nieuwe versie recaptcha v2.

Copernica

Recaptcha v2 bestaat alweer een jaar of 2 onderhand, maar Copernica biedt hier nog steeds geen support voor. Je kunt gebruik maken van hun ouderwetse implementatie van recaptcha.

Wanneer je dan aan support vraagt wanneer ze naar de nieuwe overstappen, krijg je steevast het antwoord dat ze het bij de ontwikkelaars in de to-do lijst zetten. Ik geloof dit ook best, maar de Copernica devs hebben hier gewoon geen oog voor. En dat neem ik ze ook echt niet kwalijk.

Dan maar zelf

Op een gegeven moment denk je, ik ga maar zelf aan de gang. Wat moet je dan allemaal doen?
Copernica laat webformulieren vullen op basis van een XSLT document, waar je gelukkig volledig toegang tot hebt en zelf kunt kiezen wat je allemaal wilt doen en hoe.

Het is dan ook snel geregeld om de v2 versie in te laden waar normaliter de oude versie wordt ingeladen.

Onderin het XSLT document met standaard code wordt het XSLT template voor de oude recaptcha ingeladen. Even vervangen met de recaptcha v2 display code en klaar ben je daar.

Dan nog even in je website formulier het juiste recaptcha v2 script inladen in de header en voila, je formulier wordt ingeladen met jouw recaptcha v2!

Maar dan ben je er nog niet

Copernica injecteert namelijk zelf nog een javascript snippet voor formulierverwerking waar ook gecontroleerd wordt of er een recaptcha is... En laat dat nou net een controle voor de oude zijn...

Die wordt niet gevonden dus vervolgens wordt het formulier gewoon verwerkt, zonder recaptcha controle...

Heb je dus nog niets eigenlijk, of toch wel?

De uitdaging zit dus in het feit dat Copernica een javascript snippet injecteert wat de formulier verwerking activeert, en waar jij geen wijzigingen in kunt doorvoeren!

Vandaag schoot mij dus te binnen dat ik het script kan onderbreken, en een fout kan laten plaatsvinden. Sterker nog, ik kan gewoon het script laten stoppen door de juiste variabele van de juiste waarde te voorzien, zodra er op de Verzend-knop wordt geklikt. En nog voordat het script van Copernica wordt doorgevoerd.

Het script toch onderbroken, sla je slag!

Nu het script wordt onderbroken bij het klikken van verzenden, kan ik mijn eigen code laten uitvoeren voordat er verder wordt gegaan en heb daarmee eigenlijk de mogelijkheid om de recaptcha, de nieuwe, toch te valideren!

Hieronder het script dat ik laat uitvoeren op de webpagina van Copernica waar mijn formulier met eigen XSLT wordt ingeladen:

   function captchaverify(){
     $( "#captcha_retry" ).text( "" ) && $( "#captcha_retry" ).css("display","block");
                           
                             if ($("#g-recaptcha-response").val())
                             {
                               var captchaResVal = $("#g-recaptcha-response").val();
                               $.post('https:www.je-eigen-domein.nl/recapverify.php', 'https://www.je-eigen-domein.nl',
                                      {
                                        captchaRes: captchaResVal
                                      }, function(res)
                                      {
                                        alert(res);
                                      });
                             }
                             else
                             {
                               grecaptcha.reset(),
                                 window.event.returnValue = false,
                                 $( "#captcha_retry" ).text( "Vul eerst de anti-spam controle hierboven in" ) && $( "#captcha_retry" ).fadeOut( 5000 ).delay( 1000 );
                                                                    
                             }
                           };                       
                                            

Ik heb nu dus de mogelijkheid om de submit button een onclick=captchaverify() mee te geven en daarmee mijn functie uit te laten voeren voordat Copernicas eigen script ingrijpt.

Validatie server-zijde

Zoals je in mijn script kunt lezen, wordt er een validatie gevraagd via een php bestand. Deze heb ik op eigen server staan, daar je bij Copernica verder geen php kunt hosten of uitvoeren bij mijn weten. In dit bestand staat het volgende:

<?php

$captcha = $_POST['captchaRes'];

if (!$captcha)
{
	echo '2';
}
else
{
	$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?".
	"secret=je-geheime-sleutel".
	"response=" . $captcha);
	
	if (preg_match("/\"succes\": true/",$response))
	{
		echo '0';
	}
	else
	{
		echo '1';
	}
}
?>

De echo statements zijn gewoon voor het testen, die kun je leegmaken wanneer je live gaat. Bij de regel waar "secret=je-geheime-sleutel". staat vul je natuurlijk je eigen geheime sleutel in.

Sla dit bestand op en plaats het op je server en verwijs naar de juiste url in het eerder genoemde javascript snippet. Niet vergeten, anders valideert het formulier alsnog niet.

Dit was het eigenlijk, vrij simpel!

Als er genoeg interesse is, zal ik binnenkort nog eens met wat screenshots en meer info komen over recaptcha v2, maar mensen die zich er al in verdiept hebben, kunnen hier vast al mee aan de slag en uit de voeten!

En dan heb je recaptcha v2 draaien, maakt iemand deze robot :