Skip to content

Instantly share code, notes, and snippets.

@jjjjcccjjf
Last active February 5, 2018 01:48
Show Gist options
  • Save jjjjcccjjf/bb5f0053244a431ba5bc60ee1943c38b to your computer and use it in GitHub Desktop.
Save jjjjcccjjf/bb5f0053244a431ba5bc60ee1943c38b to your computer and use it in GitHub Desktop.
Google ReCAPTCHA example
# 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