SAP Build Apps - Integration of Google reCAPTCHA

[GergoPerlaki]

Hello everyone,

I was wondering if it could be possible to integrate reCAPTCHA protection (v3) in SAP Build Apps applications. I tought about hosting an index.html to be able to use the script, but if you have another idea, please make a discussion about it. Do you think it is possible anyway?

Best regards,

Gergő

[mihaly-toth-nc]

Hey there, 

This should absolutely be doable for the web build for sure. Below is a custom js that would essentially achieve the desired goal: 

```

const CLIENT_KEY = 'your-site-key';
/**
* @fileoverview This script dynamically loads Google's reCAPTCHA v3, executes it,
* and retrieves a verification token for backend validation.
*/
const { document } = globalThis;
const RECAPTCHA_SCRIPT_ID = "RECAPTCHA_SCRIPT";
const RECAPTCHA_SCRIPT_URL = `https://www.google.com/recaptcha/api.js?render=${CLIENT_KEY}`;

/**
* Loads the Google reCAPTCHA script dynamically if it is not already loaded.
* Ensures the script is only added once to the page.
*
* @returns {Promise<void>} Resolves when the script is loaded.
*/
async function loadRecaptcha() {
// If the script is already present, just resolve
if (document.getElementById(RECAPTCHA_SCRIPT_ID)) {
console.log("reCAPTCHA script already loaded.");
return;
}

return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.id = RECAPTCHA_SCRIPT_ID;
script.src=RECAPTCHA_SCRIPT_URL;
script.async = true;
script.defer = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));

document.head.appendChild(script);
});
}

/**
* Executes Google's reCAPTCHA for a specific action and retrieves a token.
*
* @Param {string} action - The name of the action (e.g., "submit", "login").
* @returns {Promise<string>} Resolves with the generated token.
*/
async function executeRecaptcha(action) {
await loadRecaptcha();

return new Promise((resolve, reject) => {
if (typeof grecaptcha === "undefined") {
return reject(new Error("grecaptcha is not available"));
}

grecaptcha.ready(() => {
grecaptcha.execute(CLIENT_KEY, { action: action })
.then(token => resolve(token))
.catch(error => reject(error));
});
});
}

// Example usage: Get a reCAPTCHA token for 'submit' action
try {
const token = await executeRecaptcha("submit");
// Now you can pass `token` to the rest of your nodered logic
return [0, { token }];
} catch (error) {
return [1, { error }];
};

```

The return values are prepared for a 'custom js' function that has these outputs specified: 

And so the whole flow would look like this: 

PS. You can also pass in the site_key or client_key as an input parameter to the custom js flow of Build Apps.

Hope this helps, if something is not clear enough, or was I too vague, ping me here. 

Best regards, 
Mihály Tóth 

PS2. One could probably wonder why there is a 'SCRIPT_ID' and why is that dynamic appending. This is to ensure that one script is only added once to the app, which could cause issues in both the built final app, and also the web preview.