About Us

Maxycore IT Consultatnts is an indigenous Technology solutions company with a competent and reliable pool of experts in various ICT disciplines from Infrastructure design and administration to web development, graphics design/animation, software and application programming, search engine optimization, voice and telephony solution, etc committed to providing technological solutions to small businesses in Nigeria. We are registered with the CAC - RC 2723246. Visit us at www.maxycore.net and let us know how we can be of service.
© Maxycore IT Consultants. Powered by Blogger.

Friday 27 January 2017

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

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>



Post a Comment