The Google reCAPTCHA Dilemma

TStark · ‎12-26-2022

In my journey of trying to implement Google reCAPTCHA into a public catalog item I've come across several attempts (forum and blog posts, examples) on how to achieve such task. Each posts, listed below, looks promising but falls short. Maybe because either it's something I'm not doing right or the processes used are just outdated which does occur more often than not in ServiceNow due to the high frequency of upgrades.

*SN Forum Post #1 - This one instructs how to use Google reCAPTCHA with an actual web form and not a catalog item.
Link: https://www.servicenow.com/community/developer-blog/google-recaptcha-in-service-portal/ba-p/2274506

*SN Forum Post #2 - It looks like the gentleman in this attempted to build upon the previous post (above - Goran WitchDoc) and instead of using a web form he tried associating reCAPTCHA with a catalog item and disabling the Submit button which is a brilliant idea. However, it didn't work. I spoke to others who've attempted the provided steps, like myself, without success.
Link: https://www.servicenow.com/community/it-service-management-articles/adding-a-google-recaptcha-to-a-r...

*Blog Post #1 - I found this one via a Google search. I've seen these guys' work and they provide a lot of helpful and great ideas in their posts. When I saw 'SN Guys' pop up in my search I was sure that I finally found my solution. However, the problem with this one is, although you can attached the reCAPTCHA to a catalog item via variable type: Custom > Widget, the catalog item can be submitted without completing the reCAPTCHA. It was probably something I didn't do correctly and I tried to reach out. I was able to get in touch with one of their salesmen who was very cool btw, but was not able to get in touch with any of their devs.
Link: https://snprotips.com/blog/2016/10/6/implementing-recaptcha

*Blog Post #2 - I also found this one via a Google search. It also looked promising but in order to implement you would need to use the update set mentioned in the post. The links to the update sets were broken. I tried reaching out to Jeff with no response.

Link: https://jeffbenedictblog.wordpress.com/2014/06/06/including-a-captcha-on-catalog-items/

* YouTube Post #1 - The video only shows a demo of the reCAPTCHA on an SP page that's it. They say they'll provide an update set if you go to there website and fill out the contact form which I've done with no response. Marketing at it's best.
Link: https://www.youtube.com/watch?v=3pgQxF5rgyo

* SN Forum Post #3 - One of many people just like me searching for the same solution.
Link: https://www.servicenow.com/community/developer-forum/make-google-recaptcha-mandatory-before-form-sub...

* SN Forum Post #4 - This started off as a post about public user attachments, but ended with the need to use Google reCAPTCHA. So far, that need hasn't been met in this post.
Link - https://www.servicenow.com/community/developer-articles/allow-guest-users-to-add-attachments-on-cata...

Last but not least....I found that the Password Reset Tool OOB, actually uses Google reCAPTCHA. OOB! See screenshot below. I searched everywhere within my PD instance and could not find how reCAPTCHA was implemented and made mandatory prior to submission. I reached out to SN Support and below was their response which I respect:

"Unfortunately, we are not able to share any code from our source code with our customers. This is an implementation question and out of scope for ServiceNow support. Please discuss this question either in our community or our Professional Services to see if it is possible to do or not. "

In the Password Reset Tool (https://yourinstance.service-now.com/now/nav/ui/classic/params/target/pwd_process.do%3Fsys_id%3Dc6b0... ) there's a field: 'Display captcha' from the [pwd_process] table. This field, of type: yes/no, is what displays the reCATPCHA on the Password Reset Tool. I attempted to Configure > Form Design on the category item form and add this field as a reference to see if would allow me to display the reCAPTCHA on a category item and no luck. It was worth the try however 🙂

So, sorry for the long winded post. This has been bugging me for a while and since the mandatory Google reCAPTCHA has been implemented in the Password Reset Tool I figured it had to be possible to do the same for a category item. If someone out there has actually made this work please chime in.

Thanks in advance
- AJ

TStark · ‎01-24-2023

I finally have a solution by simply creating a widget for the Google reCAPTCHA and making it mandatory by using the value of a variable. Below are the steps to achieve this:

1. For the form in which the reCAPTCHA will be located create a hidden variable of type: Yes/No. For this little tutorial let's give it the name: captcha_verification

2. Create a service portal widget to 1. include the reCAPTCHA secret key and 2. use the Yes/No variable for validation. When the user clicks the reCAPTCHA check box the value of variable captcha_verification changes to YES. If the box was never checked the value is NO and when the user clicks Submit you get a popup preventing submission. Oh, where'd the popup come from.....see step #3 below. Please see the widget code below

Body HTML template:

<body>
<div class="g-recaptcha" data-sitekey="YOUR GOOGLE RECAPTCHA KEY" data-callback="captchaCallback"></div>

<input type="text" style=" display: none;"id="myText" name="message" ng-model = "c.message" ng-change="changelink()">
</body>
<script type="text/javascript">
function captchaCallback() {
var resp = grecaptcha.getResponse();
if(resp){
document.getElementById("myText").value = "true";
var element = document.getElementById('myText');
var event = new Event('change');
element.dispatchEvent(event);
}
}
</script>

Client controller:

api.controller=function($scope,spUtil) {
/* widget controller */
var c = this;

$scope.changelink = function() {
//spUtil.addErrorMessage("12e");
$scope.page.g_form.setValue('captcha_verification','Yes');

};
};

3. Create a Catalog Client Script for the catalog item with Type onSubmit and Applies on Catalog Item view checked and UI Type: ALL

Catalog Client Script (Script):

function onSubmit() {
//Type appropriate comment here, and begin script below
if (g_form.getValue('captcha_verification') != "Yes") {
alert("Please verify that you are not a robot.");

return false;
}
}

NOTE: make sure that your widget, cat item, variables' permissions are read, write, create roles are 'public' as well as following the directions in this KB article for unauthenticated users

Hopefully this helps!
AJ

View solution in original post

Rupesh Ram Chi1 · ‎08-05-2023

@TStark what should be added in place of 'data-sitekey="YOUR GOOGLE RECAPTCHA KEY" in the above code ? could you please guide on this ?

Also with this client script im unable to see the captcha verification checkbox in my record producer. did i miss something in my client script ?

TStark · ‎02-20-2024

Hi @Rupesh Ram Chi1

To your first question, you would replace "YOUR GOOGLE RECAPTCHA KEY" with the key you that you create on Google's Recaptcha site: https://www.google.com/recaptcha/about/

To your second question: I didn't implement this on a record producer, but rather a catalog item.

Thanks,
AJ

Drew Carpenter · ‎02-15-2024

This isn't working on Utah.
We got it working by tweaking the client controller a bit:

api.controller = function($scope, $rootScope) {
	var c = this;
	$scope.gForm;

	$rootScope.$on('spModel.gForm.initialized', function (e, gFormInstance){
			$scope.gForm = gFormInstance;
	});
    
    c.changelink = function() {
		$scope.gForm.setValue('captcha_verification','Yes');
    };
};

TStark · ‎02-20-2024

Hi @Drew Carpenter ,

I'm using Utah as well. What issues did you experience?

Thanks,
AJ

Drew Carpenter · ‎02-20-2024

It didn't work until we figured out the rewrite.