Step 1: Sign up on hCaptcha.com
a. You’ll need your "site key" and "secret" to proceed.
Step 2: Salesforce Security Configuration
a. Whitelist https://hcaptcha.com/siteverify from your Remote Site Setting.
b. LEX:Include assets.hcaptcha.com in your CSP Trusted Sites.
Step 3: Add the JavaScript Library
a. LEX: Include the hCaptcha js as a static resource. JS can't be directly added in cmp.
b. VFP: Simply add the js library to your vf page.
<script src='https://www.hCaptcha.com/1/api.js' async defer></script>
Note: Since js is not automatically served from hcaptcha's server in LEX, it's your job to update it periodically.
Step 4: Add the hCaptcha Widget to your component / vfp
a. Add this HTML code where you want to show the hCaptcha button, for example inside a case form.
b. Remember to replace "your_site_key" with your actual site key.
<div class="h-captcha" data-sitekey="your_site_key"></div>"
Step 5: Validate the result on your backend server.
a. When the captcha succeeded, the hCaptcha script inserted a token into your form data.
<textarea name="h-captcha-response">CLIENT-RESPONSE</textarea>
b. Get the value of "h-captcha-response" during form submission using simple js hack. You'll need this token as one of the parameters in your API request.
document.getElementsByName("h-captcha-response")[0].value;
c. Check the token is indeed valid, you must now verify it at the API endpoint:
curl -d "response=CLIENT-RESPONSE&secret=YOUR-SECRET" -X POST https://hcaptcha.com/siteverify
d. Open the apex cls file to check the exact POST request code version for VFP and Aura controllers.
Reference:
API docs: https://docs.hcaptcha.com/
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4