It’s only logical therefore that Google’s own developers came up with the best CAPTCHA solution so far, towards the end of 2014. The No CAPTCHA reCAPTCHArequires nothing more than a finger tap, a mouse click, or focusing on the input with your keyboard and hitting the spacebar.
Get No CAPTCHA reCAPTCHA
Let’s cut to the chase and get ourselves setup with No CAPTCHA.
Step 1
First, we need an API key, so head on over tohttps://www.google.com/recaptcha/admin. To gain access to this page you’ll need to be logged into a Google account. You’ll be asked to register your website, so give it a suitable name, then list domains (for example tutsplus.com) where this particular reCAPTCHA will be used. Subdomains (such as webdesign.tutsplus.com and code.tutsplus.com) are automatically taken into account.
Step 2
With that done you’ll be given a site key and its partner secret key:
Step 3
Underneath the keys you’ll see some snippets for including reCAPTCHA on your website. First up there’s the JavaScript:
1
|
You can also define which of the 40 supported languages you’re using by adding a parameter to the string. Here we’re adding
es which will give us a Spanish language reCAPTCHA:
1
|
Place this script tag at the foot of your page (or just underneath the form where the reCAPTCHA will appear, depending on how you prioritize your asset loading).
Step 4
Next up is the placeholder which you’ll need to add to your form markup wherever you want the reCAPTCHA to appear:
1
| <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> |
Note: the
data-sitekey attribute will hold the value of your key, not this dummy example.
There are other attributes which you can add to customize the look and functionality of your reCAPTCHA at this point. For example, adding
data-theme="dark" to thisdiv will give you a dark version, which might better suit your UI:
For more details on configuring your reCAPTCHA take a look at developers.google.com.
Putting it Together
Now we have the initial ingredients it’s time to put them in a working environment.
Step 1
Let’s put our script tag and placeholder into a simple form:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html><html lang="en"> <head> <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title> </head> <body> <form action="" method="post"> <label for="name">Name:</label> <input name="name" required><br /> <label for="email">Email:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> <input type="submit" value="Submit" /> </form> <!--js--> </body></html> |
Here we’ve used a barebones page structure with a form containing a
name input, an email input and a submit button. There’s no styling whatsoever here because it’s not really necessary for this tutorial.
To demonstrate that the reCAPTCHA test has been passed we’ll need to run some server-side checks. In this case we’ll do so with PHP, so save this file in a new project as
index.php.Step 2
You’ll notice the form’s method is
post, so when we submit the form data it will be returned to this page within an array of variables. We can output those variables by looping over them, so add the following to your page somewhere:
1
2
3
4
5
| <?php foreach ($_POST as $key => $value) { echo '<p><strong>' . $key.':</strong> '.$value.'</p>'; }?> |
This takes each key/value pair present in our
$_POST array and outputs them with a bit of formatting. Now when you submit the form you should see something like the following:
You’ll see the value returned for
name and email, but also a value for g-recaptcha-response. If you failed to complete the CAPTCHA test this value will be blank, but if you did check the “I’m not a robot” box you’ll see a huge string of characters.
It’s this value we need to send to Google so it can be verified, so let’s do that next.
Step 3
Happily, the Google developer team have done the hard work for us here, so head on over to the ReCAPTCHA project on Github and grab a copy of therecaptchalib.php library. Place it in the root of your project and then reference it at the top of your
index.php file:
1
2
3
4
5
6
| <?php// grab recaptcha libraryrequire_once "recaptchalib.php";?> |
Step 4
This library contains a collection of functions which send the
g-recaptcha-response(along with our secret key) to Google via an HTTP request. They then collect the response, checking whether or not the CAPTCHA was successful. To use this we need to first set up a couple of variables, before the closing PHP tag:
1
2
3
4
5
6
7
8
| // your secret key$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";// empty response$response = null;// check secret key$reCaptcha = new ReCaptcha($secret); |
ReCaptcha() checks to see if our secret key is present. If not it kills the process and advises us to go and get one. We then run our details through the following:
1
2
3
4
5
6
7
| // if submitted check responseif ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] );} |
Step 5
Assuming all is well with our submitted form, the
$response variable will report back with “success” and we can continue to process the form data. Here’s how that might look: remove the bit where we looped over the form data, then add the following check above the form:
1
2
3
4
5
| <?php if ($response != null && $response->success) { echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!"; } else {?> |
Finally, add a closing PHP tag after the form:
1
| <?php } ?> |
This displays the form, unless it has been successfully submitted, in which case it displays a small thank you notice. Here’s the final demo.
Tổng hợp từ: http://webdesign.tutsplus.com/
Không có nhận xét nào:
Đăng nhận xét