CAPTCHA输入可能是最常见的一个令人失望的互联网体验。它们对于大多数用户来说都已经足够的痛苦了，就姑且不提那些模糊不清的图片，又或者是那些依赖于像是阅读屏幕发声的辅助技术的用户了。然而，悲哀的是，CAPTCHA也绝对是对抗垃圾邮件至关重要的一环。
讽刺的是，即使传统的”扭曲文本”Captcha”让人类阅读起来非常的尴尬，现代人工智能技术已经比较容易就能解决他们了。Google甚至使用相似的技术来阅读独立屋的号码和路牌来确认Google道路景观的地点！
这件事情唯一的逻辑就是Google自己的程序员想出了一个最好的应对CAPTCHA的解决方式，直到2014年底为止。这个No CAPTCHA reCAPTCHA需要的东西不多，而只是一个手指的点击、一个鼠标的点击、或者将光标指向input并按空格键即可。
在大多数的情况下都应该是这么简单，但是如果Google的风险分析依然没办法确定你是个活人的话，一个第二步的提示就会弹出来。
你可以看到对于互联网来说它的功能已经完全是即用的了，像是@materialup的提交页面这个例子。
获得No CAPTCHA reCAPTCHA
让我们开门见山的开始设置我们自己的No CAPTCHA吧。
步骤1
首先，我们需要一个API key，所以前往https://www.google.com/recaptcha/admin来获取。要想使用这个页面，你需要登录到一个Google的账户。你会被要求注册你的网站，所以给它一个合适的名字，然后列出域名（举个例子tutsplus.com）并指出你特别想使用reCAPTCHA的站点。子域名（比如webdesign.tutsplus.com和code.tutsplus.com） 会自动的被添加到账户里面。
步骤2
在完成了这一步之后，你会得到一个网站的key（密钥）以及一个对应的秘密key（密钥）：
步骤3
在密钥的下面你会看见一些小片段用来放置到你的网站上以生成reCAPTCHA。首先是一段JavaScript代码：
| 1 | <script src='https://www.google.com/recaptcha/api.js'></script> |
你可以同时来定义你将要使用的40种不同语言的支持，只需要添加以下参数到你的字符串即可。在这里，我们将添加一个es，这个会给我们一个西班牙语的reCAPTCHA：
| 1 | <script src='https://www.google.com/recaptcha/api.js?hl=es'></script> |
将这个代码标签添加到你的页脚（或者接着reCAPTCHA表单的位置添加在它后面也可以，这个取决于你如何决定读取每一个资源的顺序）。
步骤4
接下来，我们需要为你的表单结构添加一个占位符来决定你希望在哪里显示这个reCAPTCHA区域：
| 1 | <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> |
注意：data-sitekey属性将会保存你的密钥的值，而并不是下面这个随便输入的样例。
其他的还有一些属性你可以添加到你的reCAPTCHA来自定义它的外观和功能。举个例子，添加一个data-theme="dark"到这个div会给你的reCAPTCHA一个暗色调的版本，可能有时候你正需要这样外观的设计。
对于更多如何配置你的reCAPTCHA，你可以看看下面这个网站：developer.google.com。
将所有部件组装在一起
现在我们已经有了最基础的所有元素，并且是时候将它们放在一起放置到一个真实的工作环境中了。
步骤1
让我们将脚本标签和占位符首先放到一个简单的表单里面：
| 010203040506070809101112131415161718192021222324252627 | <!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--><script src='https://www.google.com/recaptcha/api.js'></script> </body></html> |
在这里我们使用了barebones页面结构并添加了一个包含了name input、emailinput和提交按钮的一个表单。在这里，我们并没有添加任何的样式因为我们并不太需要这些来完成我们的教程。
为了展示reCAPTCHA测试已经被通过了，我们需要运行一些服务器端的检查。在这个情况下，我们需要使用PHP，所以将当前这个文件保存为一个新的项目并命名为index.php。
步骤2
你可能会注意到表单的类别是post，所以当我们提交表单数据的时候它会返回这个页面并且还包括一个数组的变量。我们可以使用循环语句来输出那些变量，所以添加以下代码到你页面的任意地方。
| 12345 | <?php foreach ($_POST as $key => $value) {echo '<p><strong>' . $key.':</strong> '.$value.'</p>';}?> |
这段代码会调取每一对密钥/值并放入$_POST数组里面，接下来使用了一点格式输出出来。现在，再当你提交表单的时候你应该会看到一些类似下图的内容：
你会看到这些返回的name和email的值，而且还有g-recaptcha-response的值。 如果你并没有成功的完成CAPTCHA测试，这个值应该是空白的；但是如果你确实点击了“我不是机器人”选项框，那么你应该会看到一大串英文代码的字符串。
这个就是我们需要发回给Google的值，这样它们才可以来验证其真伪，那么我们接下来继续。
步骤3
令人欣慰的是，Google的开发团队已经帮我们完成了这一部分艰难的工作，所以你只需要到Github上面，找到ReCAPTCHA项目并且将它们拷贝到recaptchalib.php库里面即可。将它放置在你项目的根目录下面，并且将其链接到你index.php文件的最顶端：
| 123456 | <?php // grab recaptcha libraryrequire_once "recaptchalib.php"; ?> |
步骤4
这个库包含了一系列的功能，它们将使用HTTP请求发送g-recaptcha-response（以及我们的秘密key）到Google。 然后它们将会获取反馈回来的数据，并检查CAPTCHA的验证到底是通过了还是失败了。要想实现这个功能，我们首先需要设置几个变量，将它们放在PHP标签结束之前：
| 12345678 | // your secret key$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // empty response$response = null; // check secret key$reCaptcha = new ReCaptcha($secret); |
ReCaptcha()检查如果我们的秘密key是被包含的。如果它没有找到秘密key，那么它将终止进程并且建议我们来获得一个key。接下来，我们将运行下面这些详细信息：
| 1234567 | // if submitted check responseif ($_POST["g-recaptcha-response"]) {$response = $reCaptcha->verifyResponse($_SERVER["REMOTE_ADDR"],$_POST["g-recaptcha-response"]);} |
步骤5
我们假设我们提交了表单并且一切顺利，$response变量会反馈回一个”成功”的数据，然后我们就可以继续处理表单的数据了。这里就是它有可能的结构：移除循环处理表单数据的那一部分代码，然后在表单的最上面添加下面的检查代码：
| 12345 | <?phpif ($response != null && $response->success) {echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";} else {?> |
最后的，在表单之后添加一个闭合PHP的标签：
| 1 | <?php } ?> |
这样，包含CAPTCHA的表单就会显示出来了，除非它已经成功的被提交了，那样的话页面上就会显示一个小的感谢的提示。这里就是最终的演示样例
结论
这样的结果可能是看起来非常的粗糙的以PHP为基础的No CAPTCHA reCAPTCHA工具。 不过它依然可以接受很广泛的改进，在这里，我们只是希望能提供给你最基本的理解。这个JS的库应该归功于Google开发团队，并且我同时应该给予帮助我找到它的Matt Aussaguel一个特别感谢。
Leave a reply