Skip to content

Instantly share code, notes, and snippets.

@jamigibbs jamigibbs/vf-recaptcha.js Secret
Last active Jun 11, 2019

Embed
What would you like to do?
<apex:page showHeader="false">
<div id="widget1" class="g-recaptcha"></div>
<style>
body, div {
background: transparent !important;
}
#widget1 {
transform: scale(0.74);
transform-origin: 0 0;
-webkit-transform:scale(0.74);
-webkit-transform-origin: 0 0
}
</style>
<script type="text/javascript">
var sitekey = null;
var hostUrl = null;
var onloadCallback = function () {
grecaptcha.render('widget1', {
'sitekey': sitekey,
'callback': grecaptchaRenderCallback
});
};
function grecaptchaRenderCallback(res) {
parent.postMessage({
action: "checkCAPTCHAState",
isValid: res ? true : false
}, '*');
}
window.addEventListener("message", function(event) {
if (event.data.type === 'CAPTCHA-SITEKEY') {
sitekey = event.data.key;
hostURL = event.data.hostURL;
/*
* Adding the captcha script to the header if it's not there already. We're doing this manually so that
* we can control when the script loads (ie. not until the sitekey is available).
*/
var gCaptchaScript = document.getElementById('g-captcha-script')
if (!gCaptchaScript) {
var script = document.createElement('script');
head = document.head || document.getElementsByTagName('head')[0];
script.src = `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`
script.id = 'g-captcha-script'
document.head.insertBefore(script, head.firstChild);
}
}
/*
* If a message was received not from the expected origin, let's bail.
*/
if (event.origin !== hostURL){
return;
}
/*
* Let's check for a recaptcha token and send back the result to our component.
*/
if (event.data.action == "alohaCallingCAPTCHA"){
var token = document.getElementById("g-recaptcha-response").value;
if (token == ""){
parent.postMessage({
action: "alohaCallingCAPTCHA",
alohaResponseCAPTCHA : "NOK"
}, hostURL);
} else {
parent.postMessage({
action: "alohaCallingCAPTCHA",
alohaResponseCAPTCHA : "OK",
response: token
}, hostURL);
}
}
}, false);
</script>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.