Last active
February 5, 2018 01:48
-
-
Save jjjjcccjjf/bb5f0053244a431ba5bc60ee1943c38b to your computer and use it in GitHub Desktop.
Google ReCAPTCHA example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Get your API key here | |
https://www.google.com/recaptcha/admin#list | |
# This is the main captcha url | |
# Put on your <head> tag | |
# Omit this if you're using the code block below | |
<script src="https://www.google.com/recaptcha/api.js"></script> | |
# This is a script for multiple captchas on the same page | |
# Put on <head> tag | |
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script> | |
<script type="text/javascript"> | |
var CaptchaCallback = function(){ | |
$('.g-recaptcha').each(function(index, el) { | |
grecaptcha.render(el, {'sitekey' : 'YOUR_SITE_KEY_HERE'}); // Don't forget to put your sitekey here!! | |
}); | |
}; | |
</script> | |
# This is the script for validating the captcha | |
# Put this in your POST request handler | |
if($_POST['g-recaptcha-response'] != ''){ | |
// ... If the captcha is successful | |
}else{ | |
// ... If captcha fails | |
} | |
# This is the captcha form element | |
# Put this inside your <form> | |
# NOTE: You can totally omit the `style` attribute if you want. This is just for rescaling your captcha element if it doesn't fit | |
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY_HERE" | |
style="transform:scale(0.85);-webkit-transform:scale(0.85);transform-origin:0 0;-webkit-transform-origin:0 0;" | |
></div> | |
# Client-side validation | |
if(grecaptcha.getResponse() != ""){ | |
}else{ | |
alert('Please prove that you are not a robot!'); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment