How To Integrate Google's ReCaptcha on Your Website
The ReCaptcha plugin by Google is a brilliant invention that presents website users with a challenge to distinguish between bots and humans. Works beautifully and very easy to implement.
This simple tool uses simple tests to validate the user before accessing certain web resources. The result of the test is relayed back to Google's servers for authentication and the response is interpreted by the web server accordingly.
To get started,
1. Head over to https://google.com/recaptcha and sign up.
2. Register a new site.
3. Two keys are generated - html site key and server secret authentication key. Use the keys to complete the next two steps.
4. Include this snippet BEFORE the closing </head> of your HTML template
<script src='https://www.google.com/recaptcha/api.js'></script>
Paste this snippet anywhere on your html where you want the ReCaptcha to appear
<div class="g-recaptcha" data-sitekey="XXXXXw8UAAAAAMyoVjcYxWqxxxx-DJmYTGyaxxxx"></div>
Be sure to replace the site key with your own.
5. If you are implementing ReCaptcha in a contact form, include the following in your form processor
Be sure to replace the secret with your own.
6. Format the plugin display. It is common knowledge that the original plugin as is from Google does not automatically resize to fit the container it's housed in
Until such a time as Google corrects this, simply add the following to your snippet on the html that displays the plugin
<div class="g-recaptcha" data-sitekey="6LcR3BIUAAAAAOAxOh2FhV1I0hMjSm6BYDqI2dnm" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
Congratulations!
This simple tool uses simple tests to validate the user before accessing certain web resources. The result of the test is relayed back to Google's servers for authentication and the response is interpreted by the web server accordingly.
To get started,
1. Head over to https://google.com/recaptcha and sign up.
2. Register a new site.
4. Include this snippet BEFORE the closing </head> of your HTML template
<script src='https://www.google.com/recaptcha/api.js'></script>
Paste this snippet anywhere on your html where you want the ReCaptcha to appear
<div class="g-recaptcha" data-sitekey="XXXXXw8UAAAAAMyoVjcYxWqxxxx-DJmYTGyaxxxx"></div>
Be sure to replace the site key with your own.
5. If you are implementing ReCaptcha in a contact form, include the following in your form processor
$captcha=$_POST['g-recaptcha-response'];
if(!$captcha){ ?> <script language="javascript" type="text/javascript"> alert ('Please, take the captcha test for your security.'); </script> <?php exit; } $response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=XXXXXXIUAAAAAOjVKB2KiXdXXXXX4gmIZS5XXXXX&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true); if($response['success'] == false) { ?> <script language="javascript" type="text/javascript"> alert ('We cannot verify you as human. Please, take the Captcha test again.'); </script> <?php exit; }
Be sure to replace the secret with your own.
6. Format the plugin display. It is common knowledge that the original plugin as is from Google does not automatically resize to fit the container it's housed in
Until such a time as Google corrects this, simply add the following to your snippet on the html that displays the plugin
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"Your snippet should now look like this:
<div class="g-recaptcha" data-sitekey="6LcR3BIUAAAAAOAxOh2FhV1I0hMjSm6BYDqI2dnm" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
Congratulations!
0 comments:
Post a Comment