How to add GOOGLE Recaptcha to the website?
Do you need google Recaptcha in your site. Then you need to sign up for an API key pair for your site. The original pair contains a site key and secret key. The site key is used to launch a Recaptcha service on your site or mobile application. The secret key should be protected for protection.
After receiving the API key, you need to add this script below in your file. This script adds the JS file of Recaptcha
<script type="text/javascript">
$( document ).ready( function() {
if( $( '.g-recaptcha' ).length > 0 ) {
var gRecaptchaScript = document.createElement( 'script' );
gRecaptchaScript.type = 'text/javascript';
gRecaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
$( 'body' ).append( gRecaptchaScript );
}
} );
</script>
After adding the script, we need to add a div to our HTML code to display Recaptcha. In the attribute of that div data-sitekey="[recaptcha_siteKey]"
it needs to be added. In place of recaptcha_siteKey
we need to add the API key that we collected.
<div class="g-recaptcha" data-sitekey="[recaptcha_siteKey]"></div>
Now you will see Recaptcha in your site. Now you need to add validation for Recaptcha. I am using the confusion here, you need to put this validation checking on the form data saved code.
var status = false;
var httpService = new http(
method = "POST",
url = 'https://www.google.com/recaptcha/api/siteverify'
);
httpService.addParam( type = "formField", encoded = false, name = "secret", value = [recaptcha_secretKey] ); // In place of recaptcha_secretKeywe need to add the API secret key that we collected.
httpService.addParam( type = "formField", encoded = false, name = "remoteip", value = cgi.remote_addr );
httpService.addParam( type = "formField", encoded = false, name = "response", value = form['g-recaptcha-response'] ?: '' );
var cfHttpResult = httpService.send().getPrefix();
if( cfHttpResult.keyExists( "fileContent" ) ) {
var recaptchaResult = deserializeJSON( cfHttpResult.fileContent );
status = recaptchaResult.success == "YES";
}
// return status