本文共 6150 字，大约阅读时间需要 20 分钟。
请使用recaptcha
by Ondrej Svestka
通过Ondrej Svestka
In this tutorial, I will show you how to easily and quickly add a captcha to your Bootstrap form to prevent spam. We will be using Google’s ReCaptcha, the most popular Captcha solution today.
在本教程中，我将向您展示如何轻松快速地将验证码添加到Bootstrap表单中以防止垃圾邮件 。 我们将使用Google的ReCaptcha，这是当今最受欢迎的验证码解决方案。
As a base, I will be using with the PHP backend from one my previous tutorials. You can use it with any other Bootstrap form that you have.
作为基础，我将使用以前的教程中 和PHP后端。 您可以同时与任何其他形式的引导程序，你必须使用它。
Our form will be using HTML5 syntax sprinkled with some Bootstrap scaffolding and a JavaScript validator.
我们的表单将使用带有一些Bootstrap支架和JavaScript验证器的 HTML5语法。
We will submit it via AJAX (the page will not reload), and then process the form values with PHP.
我们将通过AJAX提交 (页面不会重新加载)，然后使用PHP处理表单值。
And finally, we will send an email with PHP and return a response to the original page that will be shown in a status message above the form.
最后，我们将使用PHP发送电子邮件，并返回对原始页面的响应，该响应将显示在表单上方的状态消息中。
As I mentioned before, I will mostly focus on working with ReCaptcha today and not on the Bootstrap form itself too much. So, in case you have missed it, have at least .
如前所述，我今天主要将精力集中在使用ReCaptcha上，而不是过多地关注Bootstrap表单本身。 因此，如果您错过了它，请至少 。
or for the tutorial
或本教程
Ok, let’s do it!
好的，让我们一起做！
To be able to use ReCaptcha, you will need to register your website on first.
为了能够使用ReCaptcha，您需要首先在上注册您 。
After successful registration, you will get a pair of keys to use with your ReCaptcha. Leave the page open or copy the keys to a text file, we will need them soon.
成功注册后，您将获得一对与ReCaptcha一起使用的钥匙 。 使页面保持打开状态或将密钥复制到文本文件，我们很快将需要它们。
We will use the contact form’s template from the + we will add a reCAPTCHA element and a hidden input next to it to help us with the JavaScript validation.
我们将使用的联系表单模板，并在其旁边添加一个reCAPTCHA元素和一个隐藏的输入，以帮助我们进行JavaScript验证。
Let’s explain the HTML code a bit:
让我们稍微解释一下HTML代码：
To add a ReCaptcha to your form, you just need:
要将ReCaptcha添加到您的表单，您只需要：
to include <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div>on a place you need it in your form (replace the site key with your own key from the first step)
将<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"> </ div>包含在您需要的表单中(从第一步开始用您自己的密钥替换站点密钥 )
Include the ReCaptcha JS to initialize ReCaptcha on the page — <script src='https://www.google.com/recaptcha/api.js'><;/script>
在页面上包含ReCaptcha JS以初始化ReCaptcha — <script src='https://www.google.com/recaptcha/api.js'>< ; / script>
I also use data-callback and data-expired-callback attributes on the g-recaptcha div — these are optional and I will use them to make ReCaptcha cooperate with the validator
我还在g-recaptcha div上使用data-callback和data-expired-callback属性-这些是可选的，我将使用它们使ReCaptcha与验证程序配合使用
Here’s the full code of the form
这是表格的完整代码
In the PHP, we will be using that will take care of the verification.
在PHP中，我们将使用来处理验证。
You can use Composer to install it in your project, download it from GitHub or simply use the version I included in the .
您可以使用Composer将其安装在您的项目中，可以从GitHub下载它，也可以仅使用我在包含的版本。
The major part of the code is also from my previous tutorial, so I will try to recap it just briefly.
该代码的主要部分也来自我之前的教程，因此我将尝试简要回顾一下。
Let’s name the file contact.php and see what we’ll do in it:
让 我们将 文件命名为 contact.php ，看看我们将在其中执行以下操作：
in the beginning, we need to require the ReCaptcha PHP library — require('recaptcha-master/src/autoload.php');
首先，我们需要ReCaptcha PHP库— require('recaptcha-master/src/autoload.php');
and do some configuration stuff, for example entering your Secret Key — $recaptchaSecret = 'YOUR_SECRET_KEY';
并做一些配置工作，例如输入您的秘密密钥— $recaptchaSecret = 'YOUR_SECRET_KEY';
then, you’ll need to initialize the class with your Secret Key - $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret);
然后，您需要使用您的密钥初始化该类- $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret) ;
send a call to validate the ReCaptcha — $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
发送呼叫以验证ReCaptcha — $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR' ]);
throw an exception if the validation fails — if (!$response->isSuccess()) {...}
如果验证失败， if (!$response->isSuccess()) {.引发异常if (!$response->isSuccess()) {. ..}
the script then composes the email message, sends it, and returns a JSON response. (The form is submitted by AJAX in default.)
然后，脚本编写电子邮件，发送该电子邮件，然后返回JSON响应。 (默认情况下，表单是由AJAX提交的。)
Our JavaScript file contact.js will take care of:
我们JavaScript文件contact.js将负责：
validating the inputs with
使用 验证输入
handling the JS callbacks from ReCaptcha (we will fill in the hidden input[data-recaptcha] based on the ReCaptcha’s response. If successful, we fill this input in = the validator will consider the form being valid.)
处理来自ReCaptcha的JS回调 (我们将 根据ReCaptcha的响应 填写隐藏的 input[data-recaptcha] 。如果成功，则将其输入=验证程序将认为该表格有效。)
AJAX sending the form
AJAX发送表格
and lastly, displaying the success or error message and also emptying the form.
最后， 显示成功或错误消息 ，并清空表单。
Here’s the code:
这是代码：
This is it!
就是这个！
You should have a working contact Bootstrap contact form with ReCaptcha and PHP background now.
您现在应该可以使用具有ReCaptcha和PHP背景的Bootstrap联系表单。
Originally published on .
最初发布在 。
Ondrej Svestka is a Bootstrap and front-end enthusiast and founder of .
Ondrej Svestka是Bootstrap和前端爱好者，也是创始人。
翻译自:
请使用recaptcha
转载地址：http://mcewd.baihongyu.com/