Read updated clipboard values in Web-Login HTML section

User Experience
, ,
1

Our requirement to show captcha on login screen and validate it on client side with the user input. For captcha, we are using PEGA OOTB approach by calling the Code-Security.pyGenerateCaptcha activity using background: url(“Code-Security.pyGenerateCaptcha”).

When this activity runs, it will send the captcha image to browser and also sets a property on pxRequestor page.

We tried reading this value in javascript variable. However, when the section loads initially, pxRequestor page does not have any captcha value, so a null value is set to the variable. Then when the captcha image is loaded, captcha value is set on the pxRequestor page.

We want to read the latest value set on pxRequestor page without having to refresh the entire HTML section so we can show the client side validation on UI. Has anyone done this?

2

@SathishKumarJ17003558 To achieve client-side validation of CAPTCHA without refreshing the entire HTML section, you can use JavaScript to periodically check for the updated CAPTCHA value on the pxRequestor page. Here is a possible approach to implement this:

  1. Initial Setup: Ensure that the CAPTCHA image is loaded and the Code-Security.pyGenerateCaptcha activity is called to set the CAPTCHA value on the pxRequestor page.\

  2. JavaScript Polling: Use JavaScript to periodically check for the updated CAPTCHA value on the pxRequestor page. You can use setInterval to poll the value at regular intervals.

  3. Update UI: Once the CAPTCHA value is detected, update the JavaScript variable and perform the client-side validation.

Here is a sample JavaScript code snippet to illustrate this approach:


function checkCaptchaValue() {

var captchaValue = null;

var interval = setInterval(function() {

// Fetch the CAPTCHA value from the pxRequestor page

captchaValue = pega.api.ui.ClientCache.get(\"pxRequestor\").get(\"CaptchaValue\");

if (captchaValue) {

// Update the JavaScript variable with the latest CAPTCHA value

document.getElementById(\"captchaInput\").value = captchaValue;

clearInterval(interval); // Stop polling once the value is found

}

}, 1000); // Poll every 1 second

}

// Call the function to start polling

checkCaptchaValue();

In this code, pega.api.ui.ClientCache.get(\"pxRequestor\").get(\"CaptchaValue\") is used to fetch the CAPTCHA value from the pxRequestor page. The polling interval is set to 1 second, but you can adjust it as needed.

This approach ensures that the latest CAPTCHA value is read and updated on the UI without refreshing the entire HTML section.

:warning: This is a GenAI-powered tool. All generated answers require validation against the provided references.

Customizing CAPTCHA presentation and function

Implementing Google reCaptcha in PEGA

Substitute a third-party service