请使用recaptcha

by Ondrej Svestka

通过Ondrej Svestka

如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单 (How to build a Bootstrap email form with ReCaptcha and PHP in 30 minutes)

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 an HTML contact form with the PHP backend from one my previous tutorials. You can use it with any other Bootstrap form that you have.

作为基础，我将使用以前的教程中 HTML联络表和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 a quick look at my Bootstrap form tutorial.

如前所述，我今天主要将精力集中在使用ReCaptcha上，而不是过多地关注Bootstrap表单本身。 因此，如果您错过了它，请至少快速浏览一下我的Bootstrap表单教程 。

演示与链接 (Demo & Links)

• See the demo

  观看演示

• or download the files for the tutorial

  或下载本教程的文件

Ok, let’s do it!

好的，让我们一起做！

1.注册您的网站 (1. Register your site)

To be able to use ReCaptcha, you will need to register your website on ReCaptcha’s website first.

为了能够使用ReCaptcha，您需要首先在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一起使用的钥匙 。 使页面保持打开状态或将密钥复制到文本文件，我们很快将需要它们。

2. HTML (2. HTML)

We will use the contact form’s template from the previous tutorial + 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代码：

• we have an HTML contact form ready written with the Bootstrap markup我们已经准备好带有Bootstrap标记HTML联系人表格
• the main 3rd party scripts & stylesheets that will be used are: jQuery, Bootstrap 4, CSS, and JavaScript将使用的主要第三方脚本和样式表是：jQuery，Bootstrap 4，CSS和JavaScript

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

这是表格的完整代码

3. PHP (3. PHP)

In the PHP, we will be using Google’s client library that will take care of the verification.

在PHP中，我们将使用Google的客户端库来处理验证。

You can use Composer to install it in your project, download it from GitHub or simply use the version I included in the Download package.

您可以使用Composer将其安装在您的项目中，可以从GitHub下载它，也可以仅使用我在Download软件包中包含的版本。

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';

• We also set the additional variables as the emails to send the email to, subject and the success/error messages我们还将其他变量设置为电子邮件，以将电子邮件发送至，主题和成功/错误消息

• 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提交的。)

4. JavaScript (4. JavaScript)

Our JavaScript file contact.js will take care of:

我们JavaScript文件contact.js将负责：

• validating the inputs with Bootstrap validator

  使用Bootstrap验证器 验证输入

• 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:

这是代码：

5.结果 (5. Result)

This is it!

就是这个！

You should have a working contact Bootstrap contact form with ReCaptcha and PHP background now.

您现在应该可以使用具有ReCaptcha和PHP背景的Bootstrap联系表单。

感谢您的50拍手？ 如果您喜欢这篇文章！ 另外，请查看我的其他B 陷阱教程或B 陷阱模板。 (Thanks for the 50 clap ? if you enjoyed this article! Also, check out my other Bootstrap tutorials or my Bootstrap templates.)

Originally published on Bootstrapious blog.

最初发布在Bootstrapious博客上 。

关于作者 (About The Author)

Ondrej Svestka is a Bootstrap and front-end enthusiast and founder of Boostrapious.

Ondrej Svestka是Bootstrap和前端爱好者，也是Boostrapious的创始人。

翻译自: https://www.freecodecamp.org/news/build-a-bootstrap-form-with-recaptcha-and-php-backend-for-emails-in-30-minutes-17964a374819/

请使用recaptcha