Hello, everyone!
Basically, in this solution, we will create a hidden field within the catalog item that will be validated as true/yes by a client script and will only allow form submission after validating the reCAPTCHA.
Please note that currently reCAPTCHA V2 is supported. To do this, you'll need to follow these steps:
1. Create a catalog item, adding a Yes/No variable with the name Recaptcha (ID: captcha_verification), and set it to be hidden. Also, enable the option "Include None."
2. Create a variable in the sys_properties table with the name "recaptcha.site-key" and add the secret key of the reCAPTCHA in the value option.
3. Create the reCAPTCHA widget (Public Widget):
Body HTML Template:
<body>
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha" data-callback="captchaCallback" data-sitekey="{{data.sitekey}}"></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>
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.sitekey = gs.getProperty('recaptcha.site-key');
})();
Client Controller:
api.controller=function($scope,spUtil) {
/* widget controller */
var c = this;
$scope.changelink = function() {
$scope.page.g_form.setValue('captcha_verification','Yes');
};
};
Create a catalog Client Script OnSubmit that will validate the field with "Yes" (UI Type: All):
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;
}
}
