PeopleSoft Technical Hub: Implement reCaptcha in PeopleSoft

Implementing reCAPTCHA in PeopleSoft involves integrating Google's reCAPTCHA service with PeopleSoft components, typically for login pages or custom forms to enhance security. Here's a step-by-step guide to implementing reCAPTCHA in PeopleSoft:

🛠 1. Register for reCAPTCHA

Go to Google reCAPTCHA.
Choose reCAPTCHA v2 ("I'm not a robot" Checkbox) or Invisible reCAPTCHA.
Register your site and get the Site Key and Secret Key.

📂 2. Add reCAPTCHA to PeopleSoft Page

Open Application Designer:
- Navigate to the component or page where you want to add reCAPTCHA.
Insert HTML Area:
- Add an HTML Area to the page.
HTML Code for reCAPTCHA:
- In HTML Object, add the following code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
</body>
</html>

Replace "YOUR_SITE_KEY" with the Site Key from Google.

🧠 3. Backend Verification with PeopleCode

On form submission, verify the reCAPTCHA response using PeopleCode and a POST request to the reCAPTCHA API.
PeopleCode:

/* Get the reCAPTCHA response from the HTML form */
Local string &recaptchaResponse, &secretKey, &apiUrl, &postData, &response;
Local ApiObject &httpRequest, &httpResponse;

&recaptchaResponse = GetField(Field.YOUR_HTML_FIELD).Value; /* Replace with your HTML Area field name */
&secretKey = "YOUR_SECRET_KEY";
&apiUrl = "https://www.google.com/recaptcha/api/siteverify";

/* Prepare POST data */
&postData = "secret=" | &secretKey | "&response=" | &recaptchaResponse;

/* Make HTTP POST request */
&httpRequest = CreateObject("PeopleSoft.HttpClient");
&httpRequest.SetHeader("Content-Type", "application/x-www-form-urlencoded");
&httpRequest.Post(&apiUrl, &postData);

/* Get the response */
&httpResponse = &httpRequest.ResponseText;

/* Parse the response */
If Find("true", &httpResponse) > 0 Then
   MessageBox(0, "", 0, 0, "reCAPTCHA verification successful!");
Else
   MessageBox(0, "", 0, 0, "Please verify that you are not a robot.");
   /* Optionally, prevent further processing */
   Exit(1);
End-If;

4. Test the reCAPTCHA Integration

Clear Cache and Compile the page/component.
Open the page in the browser, complete the reCAPTCHA, and submit the form.
Ensure the verification process is working correctly.
Here's a simple JavaScript code to dynamically generate a 6-digit CAPTCHA displayed in a box-like image style using HTML Canvas. This approach makes the CAPTCHA non-selectable and slightly distorted to enhance security.

🚦 Example Output:

A randomly generated CAPTCHA (e.g., 8F6A2Z) will be displayed in a styled box with a refresh button.

🧾 Code Implementation:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dynamic CAPTCHA Generator</title>

<style>

.captcha-container {

display: flex;

align-items: center;

gap: 10px;

}

canvas {

border: 2px solid #ddd;

border-radius: 5px;

background-color: #f9f9f9;

}

.refresh-btn {

padding: 5px 10px;

border: none;

background-color: #4caf50;

color: white;

cursor: pointer;

border-radius: 5px;

transition: background-color 0.3s;

}

.refresh-btn:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<div class="captcha-container">

<canvas id="captchaCanvas" width="150" height="50"></canvas>

<button class="refresh-btn" onclick="generateCaptcha()">Refresh</button>

</div>

<script>

function generateCaptcha() {

const canvas = document.getElementById('captchaCanvas');

const ctx = canvas.getContext('2d');

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

let captchaText = '';

// Generate random 6-character CAPTCHA

for (let i = 0; i < 6; i++) {

captchaText += chars.charAt(Math.floor(Math.random() * chars.length));

}

// Draw background

ctx.fillStyle = '#f9f9f9';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// Add random lines for distortion

for (let i = 0; i < 5; i++) {

ctx.strokeStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.7)`;

ctx.beginPath();

ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);

ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);

ctx.stroke();

}

// Draw CAPTCHA text

ctx.font = '30px Arial';

ctx.fillStyle = '#333';

ctx.setTransform(1, Math.random() * 0.2, Math.random() * 0.2, 1, Math.random() * 5, Math.random() * 5);

ctx.fillText(captchaText, 25, 35);

ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transform

// Store CAPTCHA text for validation

document.getElementById('captchaCanvas').dataset.captcha = captchaText;

}

// Generate initial CAPTCHA on page load

window.onload = generateCaptcha;

</script>

</body>

</html>

PeopleSoft Technical Hub

Thursday, February 27, 2025

Implement reCaptcha in PeopleSoft

🛠 1. Register for reCAPTCHA

📂 2. Add reCAPTCHA to PeopleSoft Page

🧠 3. Backend Verification with PeopleCode

4. Test the reCAPTCHA Integration

🚦 Example Output:

A randomly generated CAPTCHA (e.g., `8F6A2Z`) will be displayed in a styled box with a refresh button.

🧾 Code Implementation:

No comments:

Post a Comment

Aggregate Data Into a Single Column - using LISTAGG

Report Abuse