reCAPTCHA - jak dodać widget na stronę?

Inne kategorie Internet
#1

Witam,
Mam problem ponieważ nie mogę zrozumieć jak dodać widget reCAPTCHA v2 wraz ze skryptem. Są co prawda poradniki ale jakimś cudem nie mogę zrozumieć nawet tego od Google (moją wiedza o programowaniu sięga stworzenia formularza). Stronę mam w PHP.

#2

Musisz stworzyć jakiś obiekt gdzie zostanie osadzony widżet. Np:
<div id="recaptcha_container" style="margin-bottom: 15px;" align="center"></div>

Skrypt java dodajesz za pomocą (async = asynchronicznie, defer po załadowaniu strony)
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Następnie gdzieś na stronie musisz wywołać skrypt ładujący widżet.
Obiekt skryptu warto zapisać do zmiennej w celu uniknięcia błędów, np reCAPTCHA_var. Warto dodać sobie zmienną zapisującą czy captha została rozwiązana czy nie. W kodzie użyłem jquerry aby ukrywać rozwiązany widżet. $(„#recaptcha_container”).hide();. Gdzie XXXXXXXX musisz podać klucz publiczny, który generujesz na stronie recaptha od google.

		<script type="text/javascript">
			var captchaLoaded = false;
			var reCAPTCHA_var;
			var onloadCallback = function() {
				var reCAPTCHA_var = grecaptcha.render("recaptcha_container", {
					"sitekey" : "XXXXXXXXXXXXXXXXXXXXXXX",
					"theme" : "dark",
					"callback": recaptchaCallbackHide
				});
				captchaLoaded = true;
				$("#recaptcha_container").hide();
				<--RESZTA KODU-->
			};
			function recaptchaCallbackHide() {
				$("#recaptcha_container").hide();
				<--RESZTA KODU-->
			}
		</script>
		<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Potem musisz dodać przesyłanie tokenu zwrotnego np w funkcji fetch czy parametrze post czy cokolwiek tam robisz aby pobrać jakieś dane z pliku np php.
W java script w fetch dodaje po prostu parametr &grecaptcharesponse=${grecaptcha.getResponse(reCAPTCHA_var)

Teraz musisz na swojej stronie zrobić weryfikację tokena podam ci przykład w php:

	if (isset($_GET['grecaptcharesponse'])) {
		//Dane wstępne
		$recaptchaSecretKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
		$recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
		
		//Budowanie klucza 
		$recaptchaData = array(
			'secret' => $recaptchaSecretKey,
			'response' => $_GET['grecaptcharesponse']
		);
		
		//Budowanie zapytania
		$recaptchaOptions = array(
			'http' => array(
				'header' => "Content-type: application/x-www-form-urlencoded\r\n",
				'method' => 'POST',
				'content' => http_build_query($recaptchaData)
			)
		);
		
		//Pobieranie danych zwrotnych
		$recaptchaContext = stream_context_create($recaptchaOptions);
		$recaptchaResult = file_get_contents($recaptchaURL, false, $recaptchaContext);
		$recaptchaResponseData = json_decode($recaptchaResult);

		if ($recaptchaResponseData->success) {
			<-- TWÓJ KOD LUB USTAWIENIE ZMIENNEJ GLOBALNEJ LUB FUNCJA JEŻELI POZYTYWNY WYNIK -->

		} else {
			<-- NEGATYWNY WYNIK KOD -->
		}
	} else {
		<-- BRAK DANYCH WYNIK NEGATYWNY (Oszczedzanie zasobów) -->
	}
#3