reCaptcha Component usage

WEB TMS WEB Core
1

Hi
I'm trying to user Google ReCaptchav3 component with demo "Demos\Services\GoogleRecaptcha"

I set my Site Key into WebGoogleReCaptcha1.APIKey and set my URL path to my Web Core app into WebGoogleReCaptcha1.APIUrl (aka https:/www.domain.com/captchalab/index.html)
But if I see bottom right Captcha "logo"
image
Which seems to mean the API ack is OK on Google side but the web core component about captcha control isn't displaying anything
I saw there is a check on Google side about bot but none event occurs on WebGoogleReCaptcha1Verified
Couple of seconds later there is an error on

WEBLib.WebSocketClient.pas:135 
 WebSocket connection to 'wss://www.label-qualirepar.fr:8888/captchalab/' failed: 
Connect	@	WEBLib.WebSocketClient.pas:135
Create$1	@	WEBLib.Forms.pas:4194
c.$create	@	rtl.js:332
$mod.$init	@	WEBLib.Forms.pas:4586
loadimpl	@	rtl.js:224
loaduseslist	@	rtl.js:200
loadimpl	@	rtl.js:212
run	@	rtl.js:138
(anonymes)	@	(index):14

How the component should be used, it seems connection occurs through wss on port 8888
Here test application is deployed into a vhost on apache server (80-443)

TMS Web Core document mentions there is a server side to consider. Is the component process this server side or is there something to add ? (which isn't present inside demo).

If I force button click on demo I get more error but it seems logical

WEBLib.GoogleReCaptcha.pas:185 
 
 GET https://www.label-qualirepar.fr/captchalab/03AD1IbLB_R76jy3hJ7EwZAYD6E3m0Lh…NihO5y-2mFl3IN3Hd4oKZ9g8ruliVQ_nXsBudyMKrbwOPiF7moK909rxMaBzzIKcCwz37AyMag 403 (Forbidden)
VerifyToken	@	WEBLib.GoogleReCaptcha.pas:185
HandleToken	@	WEBLib.GoogleReCaptcha.pas:171
(anonymes)	@	WEBLib.GoogleReCaptcha.pas:202
Promise.then (asynchrone)		
then	@	recaptcha__fr.js:450
Verify	@	WEBLib.GoogleReCaptcha.pas:198
WebButton1Click	@	UCaptcha.pas:33
cb	@	rtl.js:240
Click	@	WEBLib.Controls.pas:1747
HandleDoClick	@	WEBLib.Controls.pas:3744
cb	@	rtl.js:236

WEBLib.GoogleReCaptcha.pas:146 
 Uncaught SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at Object.HandleResponse (WEBLib.GoogleReCaptcha.pas:146:1)
    at XMLHttpRequest.cb (rtl.js:256:1)
HandleResponse	@	WEBLib.GoogleReCaptcha.pas:146
cb	@	rtl.js:256
load (asynchrone)		
VerifyToken	@	WEBLib.GoogleReCaptcha.pas:179
HandleToken	@	WEBLib.GoogleReCaptcha.pas:171
(anonymes)	@	WEBLib.GoogleReCaptcha.pas:202
Promise.then (asynchrone)		
then	@	recaptcha__fr.js:450
Verify	@	WEBLib.GoogleReCaptcha.pas:198
WebButton1Click	@	UCaptcha.pas:33
cb	@	rtl.js:240
Click	@	WEBLib.Controls.pas:1747
HandleDoClick	@	WEBLib.Controls.pas:3744
cb	@	rtl.js:236

Thanks
Sylvain

1 Like
3

Hi,

Please note that after calling "Verify" with TWebGoogleRecaptcha, the URL assigned in the APIUrl property is called with the response token as a parameter.
The server-side code must be created manually. This depends on the language used on the server-code.
The google documentation explains which request you should build and execute server-side:

4

Hi
thanks for answer that's help me to create a first working test defining a backend script in charge of async controle with Google verification service
carefully building the URL with the structure including parameter name sent to script

WebGoogleReCaptcha1.APIUrl := 'https://www.domain.com/captchalab/verify-captcha.php?recaptchaResponse=';

with a simple php script "verify-captcha.php"

<?php
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; // URL to the reCAPTCHA server
$recaptcha_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Secret key
$recaptcha_response = $_GET['recaptchaResponse'];

$recaptchagoogle = file_get_contents($recaptcha_url.'?secret='.$recaptcha_secret.'&response='.$recaptcha_response); // Send request to the server
// echo '<BR>';
//echo '<BR>';
//echo 'GOOGLE Response = '.$recaptchagoogle;

echo $recaptchagoogle;
5

I understand v3 doesn't display anything about captcha if Google consider context isn't a bot.

Is there a way to force display of Captcha inside a web core page ? in order to verify integration of component inside a page

Thanks