Question
Cognizant
GB
Last activity: 4 Oct 2018 13:54 EDT
Implementing Google reCaptcha in PEGA
The requirement is to implement Google Recaptcha in a PEGA screen.
Step 1: Get the site key from the Google recaptcha site-->DONE
Step 2 : Adding reCAPTCHA to the PEGA section. The following code snippet provided by Google has been included in a PEGA control which has been included in the section.
<pega:choose>
<pega:otherwise>
<%
%><!DOCTYPE html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="PublicKey"></div>
</form>
</body>
</html>
</pega:otherwise>
</pega:choose>
The Recaptcha widget is getting displayed correctly and the user can complete the captcha test using the Widget.
Step 3: Server side integration----@@@@This is where I am stuck @@@
According to Google,when the user submit the form where reCAPTCHA has been plugged in, we will get as part of the payload a string with the name "g-recaptcha-response" . How do we get hold of the value of this string in PEGA ? Once we have the value of this string we can leverage the OOTB rule pyValidateCustomCaptcha to validate the user's response with the Google recaptcha server.
The requirement is to implement Google Recaptcha in a PEGA screen.
Step 1: Get the site key from the Google recaptcha site-->DONE
Step 2 : Adding reCAPTCHA to the PEGA section. The following code snippet provided by Google has been included in a PEGA control which has been included in the section.
<pega:choose>
<pega:otherwise>
<%
%><!DOCTYPE html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="PublicKey"></div>
</form>
</body>
</html>
</pega:otherwise>
</pega:choose>
The Recaptcha widget is getting displayed correctly and the user can complete the captcha test using the Widget.
Step 3: Server side integration----@@@@This is where I am stuck @@@
According to Google,when the user submit the form where reCAPTCHA has been plugged in, we will get as part of the payload a string with the name "g-recaptcha-response" . How do we get hold of the value of this string in PEGA ? Once we have the value of this string we can leverage the OOTB rule pyValidateCustomCaptcha to validate the user's response with the Google recaptcha server.
Has anyone implemented the new reCaptcha. I have gone through the following PDN article but i think it depicts the older version of reCaptcha where text boxes were present to capture the user response.
https://docs.pega.com/security/85/customizing-captcha-presentation-and-function
***Updated by moderator: Lochan to add Category***
***Updated by moderator: Marissa to add SR Details to post***
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Accepted Solution
Cognizant
GB
Hi,
I should have updated the solution much earlier but better late than never :)
This is how I have implemented Google Recaptcha in Pega .
1.Embed the below snippet in the section where you want to display the recaptcha images.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="Your public key goes here"></div>
<script>
//The below function will be used to set the value of the element "g-recaptcha-response"
function getCaptchaResponse() {
var CaptchaResp= document.getElementById("g-recaptcha-response").value ;
var oSafeURL = new SafeURL("Your activity name goes here"); // Classify the class name as well for e.g Pega-.TestActivity
oSafeURL.put("CaptchaResponse", CaptchaResp); // "CaptchaResponse" is the parameter and the value will be set in the parameter page.
var strReturn = httpRequestAsynch(oSafeURL.toURL(),null, 50, 100);
}
</script>
</body>
</html>
Hi,
I should have updated the solution much earlier but better late than never :)
This is how I have implemented Google Recaptcha in Pega .
1.Embed the below snippet in the section where you want to display the recaptcha images.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="Your public key goes here"></div>
<script>
//The below function will be used to set the value of the element "g-recaptcha-response"
function getCaptchaResponse() {
var CaptchaResp= document.getElementById("g-recaptcha-response").value ;
var oSafeURL = new SafeURL("Your activity name goes here"); // Classify the class name as well for e.g Pega-.TestActivity
oSafeURL.put("CaptchaResponse", CaptchaResp); // "CaptchaResponse" is the parameter and the value will be set in the parameter page.
var strReturn = httpRequestAsynch(oSafeURL.toURL(),null, 50, 100);
}
</script>
</body>
</html>
2.In the activity stated in the function above, set the value of the parameter into any page(pyWorkPage/pyDisplayHarness/any data page) based on your requirement.
3.Call the function on click of a button once the user has solved the Captcha.
4. On click of the button , call a HTTP service to validate the captcha response with Google.While calling the service, refer the value from the page where you have set the "gcaptcha response " as stated in Step 2 above.
Note :
You either need to set up a proxy server or need to amend your organisation's firewall rule for the traffic to go through to Google from the Pega server.
Pegasystems Inc.
US
Hi Subh, i have not tried this before. is 'g-recaptcha-response' sent to pega as part of connect-http response? if yes, we might be able to customize the connector to get the details.
Pegasystems Inc.
GB
I have never used the Google Re-Captcha process I'm afraid - but I took a quick look at their Docs: https://developers.google.com/recaptcha/docs/verify
Are you using V1 of their API - or the new V2 ?
According to the docs (and if I understand them correctly): you can do all this client-side - there are three ways listed on the site to get at the response, they say:
This page explains how to verify a user's response to a reCAPTCHA challenge from your application's backend. When a reCAPTCHA is solved by end user, a new field (g-recaptcha-response) will be populated in HTML. You can get the user’s response in one of three ways:
-g-recaptcha-response POST parameter when the user submits the form on your site
-grecaptcha.getResponse(opt_widget_id) after the user completes the CAPTCHA challenge
-As a string argument to your callback function if data-callback is specified in either the g-recaptcha tag attribute or the callback parameter in the grecaptcha.render method
So: I think you should be able to either implement a Javascript 'callback' function to get the information back from Google (and then also post it back to them? -not sure if that's what they need here...) or check the DOM (it will update the Widget (method 2 above?)
Sorry I couldn't be of more help here...
I have never used the Google Re-Captcha process I'm afraid - but I took a quick look at their Docs: https://developers.google.com/recaptcha/docs/verify
Are you using V1 of their API - or the new V2 ?
According to the docs (and if I understand them correctly): you can do all this client-side - there are three ways listed on the site to get at the response, they say:
This page explains how to verify a user's response to a reCAPTCHA challenge from your application's backend. When a reCAPTCHA is solved by end user, a new field (g-recaptcha-response) will be populated in HTML. You can get the user’s response in one of three ways:
-g-recaptcha-response POST parameter when the user submits the form on your site
-grecaptcha.getResponse(opt_widget_id) after the user completes the CAPTCHA challenge
-As a string argument to your callback function if data-callback is specified in either the g-recaptcha tag attribute or the callback parameter in the grecaptcha.render method
So: I think you should be able to either implement a Javascript 'callback' function to get the information back from Google (and then also post it back to them? -not sure if that's what they need here...) or check the DOM (it will update the Widget (method 2 above?)
Sorry I couldn't be of more help here...
Cognizant
GB
Thanks for your responses . Really appreaciate it :)
We are trying to use v2 of Google Recaptcha. The issue I am having is to capture the value of 'g-recaptcha-response' on click of button and then pass it into the OOTB connector via HTTP post.
The scenario is as follows:
On a pega section(flow action), user enters some data, before submitting the screen PEGA will need to validate whether the captcha has been completed or not...
According to Google Docs, the g-captcha response element is added to the HTML page once the green tick appears after the captcha has been solved.
I was going through some old documentation on PDN and it seems the document refers to v1 of Google recaptcha.Also what I have found is that if you enable Google recaptcha on the Log in screen as part of the PDN documentation, the system allows the user to log in even if the Captcha is not filled but the validation works for Simple Recaptcha apparently.
Pegasystems Inc.
IN
Hi Subhenjit,
On reviewing the SR, we noticed that the issue was resolved after disabling the firewall. Please let us know for any more information!
Regards,
Lochan | Community Moderator | Pegasystems Inc.
Updated: 8 Jan 2017 20:46 EST
TATA Consultancy Services Ltd
GB
Hi Subh,
Were you able to solve the verify Recaptcha part? Am also trying to implement the same and looking for some assistence. Could you please share the information regarding - verify recaptcha.
Thanks in advance.
***Updated by moderator: Lochan to remove personal information***
Accepted Solution
Cognizant
GB
Hi,
I should have updated the solution much earlier but better late than never :)
This is how I have implemented Google Recaptcha in Pega .
1.Embed the below snippet in the section where you want to display the recaptcha images.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="Your public key goes here"></div>
<script>
//The below function will be used to set the value of the element "g-recaptcha-response"
function getCaptchaResponse() {
var CaptchaResp= document.getElementById("g-recaptcha-response").value ;
var oSafeURL = new SafeURL("Your activity name goes here"); // Classify the class name as well for e.g Pega-.TestActivity
oSafeURL.put("CaptchaResponse", CaptchaResp); // "CaptchaResponse" is the parameter and the value will be set in the parameter page.
var strReturn = httpRequestAsynch(oSafeURL.toURL(),null, 50, 100);
}
</script>
</body>
</html>
Hi,
I should have updated the solution much earlier but better late than never :)
This is how I have implemented Google Recaptcha in Pega .
1.Embed the below snippet in the section where you want to display the recaptcha images.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="Your public key goes here"></div>
<script>
//The below function will be used to set the value of the element "g-recaptcha-response"
function getCaptchaResponse() {
var CaptchaResp= document.getElementById("g-recaptcha-response").value ;
var oSafeURL = new SafeURL("Your activity name goes here"); // Classify the class name as well for e.g Pega-.TestActivity
oSafeURL.put("CaptchaResponse", CaptchaResp); // "CaptchaResponse" is the parameter and the value will be set in the parameter page.
var strReturn = httpRequestAsynch(oSafeURL.toURL(),null, 50, 100);
}
</script>
</body>
</html>
2.In the activity stated in the function above, set the value of the parameter into any page(pyWorkPage/pyDisplayHarness/any data page) based on your requirement.
3.Call the function on click of a button once the user has solved the Captcha.
4. On click of the button , call a HTTP service to validate the captcha response with Google.While calling the service, refer the value from the page where you have set the "gcaptcha response " as stated in Step 2 above.
Note :
You either need to set up a proxy server or need to amend your organisation's firewall rule for the traffic to go through to Google from the Pega server.