Как установить на сайт Google reCAPTCHA V2, jQuery Validate V1.16, Bootstrap 4. Пример. Форма оформления подписки на email рассылку.

Как установить на сайт Google reCAPTCHA V2, jQuery Validate, Bootstrap 4. Пример. Форма оформления подписки на email рассылку.

==========

>Google reCAPTCHA эффективная защита от спама - она проста и понятна для человека и практически непонятна для робота.

Регистрация на сайте Google reCAPTCHA

----------

Для начала необходимо зарегистрироваться на сайте reCAPTCHA, для этого переходим по ссылке на сайт https://www.google.com/recaptcha/admin

После регистрации выбираем вид reCAPTCHA (пример reCAPTCHA V2) для каждой из ни генерируется своя пара ключей Секретный ключ (приватный - для доступа к API) и Ключ (открытый - размещается на странице).

Указываем домен Вашего сайта, принимаем соглашение (Под принимаем, мы имеем ввиду - читаем и принимаем).

Далее в пункте 1.Ключи копируем оба ключа в блокнот (советую Notepad++ https://notepad-plus-plus.org).

Подключаем Bootstrap 4

----------

>Bootstrap - это CSS фреймворк, который изначально создавался для внутреннего использования компанией «Twitter» с рабочим названием «Twitter Blueprint», но в итоге был опубликован в открытый доступ и стал хорошим набором инструментов для front-end разработки под названием «Bootstrap».

>Свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Для подключения Bootstrap на Ваш сайт есть несколько вариантов, рассмотрим два из них:

1. - скачать дистрибутив на свой сайт (подойдет для разработчиков при написании и отладке сайта в оффлайн);

2. - подключить через CDN (англ. Content Delivery Network или Content Distribution Network - сеть доставки (и дистрибуции) содержимого) - проще говоря, установить ссылку на внешние скрипты и CSS файлы (это подойдет для рабочего сайта, так как вы сэкономите трафик и увеличите скорости загрузки страницы).

Переходим на официальный сайт https://v4-alpha.getbootstrap.com/getting-started/download/. Дальше или качаем дистрибутив (под заголовком Bootstrap CSS and JS) или копируем ссылки CDN (под заголовком).

CDN:

```

```

В разделе Examples https://v4-alpha.getbootstrap.com/examples/ можно выбрать пример страницы и скопировать его код. Пример ниже уже с Bootstrap.

Подключаем jQuery V3.2.1

----------

Для этого переходим на официальный сайт jQuery http://jquery.com/download/.

Уже пресловутые "два путя" из нескольких: скачать или CDN. На странице вы найдете несколько вариантов, я выбрал CDNJS CDN:

```

```

Подключаем jQuery Validate V1.16

----------

Поучить jQuery Validate V1.16 можно несколькими способами, рассмотрим два из них:

1. Скачать с официального сайта https://jqueryvalidation.org или

2. Подключить через CDN (ссылки CDN также указаны на главной странице):

`https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js`

Преобразовав получим

```

```

Настройка сайта. HTML, PHP.

----------

###Создаем HTML файл, например subscribe.html

Копируем шаблон страницы на Ваш сайт (Обращаем внимание на кодировку файла, в шаблоне указан `utf-8`. Если Вы сохраняете в кодировке Windows, то необходимо `utf-8` на `windows-1251`)

```

<!DOCTYPE html>

<head>

<title>Как установить на сайт Google reCAPTCHA V2, jQuery Validate V1.16, Bootstrap 4. Пример. Форма оформления подписки на email рассылку.</title>

<style>

/* Show it is fixed to the top */

body {

min-height: 75rem;

padding-top: 4.5rem;

}

</style>

</head>

<body>

</button>

<a class="navbar-brand" href="#">Project Name</a>

</li>

</li>

</ul>

</div>

</nav>

<h2>Как установить на сайт <br/>Google reCAPTCHA V2, <br/>jQuery Validate V1.16, <br/>Bootstrap 4.</h2>

<p class="lead text-muted">Пример. Форма оформления подписки на email рассылку.</p>

</div>

<h3 class="form-title">Подписка на email рассылку</h3><br>

</div>

Введите email: </label>

<input

name="email"

id="email"

type="email"

class="form-control"

placeholder="[email protected]"

required

autofocus />

</div>

Подтвердите email: </label>

<input

name="confirm_email"

id="confirm_email"

type="email"

class="form-control"

placeholder="[email protected]"

required />

</div>

<label class="col-sm-3 col-md-3 col-lg-3 col-xl-2">Соглашения: </label>

<input

type="checkbox"

class="form-check-input"

id="agree_privacy_policy"

name="agree_privacy_policy"

value="agree"

required />

Я согласен(-на) с <a href="privacy_policy.html"/>Политикой конфиденциальности</a>.

</label>

</div>

<input

type="checkbox"

class="form-check-input"

id="agree_user_agreement"

name="agree_user_agreement"

value="agree"

required />

Я согласен(-на) с <a href="user_agreement.html"/>условиями Пользовательского соглашения.</a>.

</label>

</div>

</div>

</div>

<button

name="btn_subscribe"

value="subscribe"

class="btn btn-primary"

type="submit"

id="btn_subscribe">

</button>

</div>

</form>

</div>

</div>

$(document).ready(function () {

$( "#subscribe_form" ).validate( {

ignore: ".ignore",

onkeyup: false,

onclick: false,

nfocusout: false,

rules: {

email: {

required: true,

email: true

confirm_email: {

required: true,

email: true,

equalTo: "#email"

agree_privacy_policy: "required",

agree_user_agreement: "required",

hiddenRecaptcha: {

required: function () {

if (grecaptcha.getResponse() == '') {

return true;

} else {

return false;

}

messages: {

hiddenRecaptcha: "Вы не прошли reCAPTCHA!",

confirm_email: {

required: "Пожалуйста, введите адрес электронной почты",

equalTo: "Пожалуйста, введите тот же email, что и выше"

email: "Пожалуйста, введите действительный адрес электронной почты",

agree_privacy_policy: "Пожалуйста, примите нашу Политику конфиденциальности",

agree_user_agreement: "Пожалуйста, примите наше Пользовательское соглашение"

errorElement: "em",

errorPlacement: function ( error, element ) {

error.addClass( "form-control-feedback" );

element.parents( ".col-sm-5" ).addClass( "has-feedback" );

if ( element.prop( "type" ) === "checkbox" ) {

error.insertAfter( element.parent( "label" ) );

} else {

error.insertAfter( element );

}

if ( !element.next( "span" )[ 0 ] ) {

$( "<span class='fa fa-times form-control-feedback '></span>" ).insertAfter( element );

}

success: function ( label, element ) {

if ( !$( element ).next( "span" )[ 0 ] ) {

$( "<span class='fa fa-check form-control-feedback '></span>" ).insertAfter( $( element ) );

}

highlight: function ( element, errorClass, validClass ) {

$( element ).parents( ".col-sm-5" ).addClass( "form-control-danger" ).removeClass( "form-control-success" );

$( element ).next( "span" ).addClass( "fa-times" ).removeClass( "fa-check" );

unhighlight: function ( element, errorClass, validClass ) {

$( element ).parents( ".col-sm-5" ).addClass( "form-control-success" ).removeClass( "form-control-danger" );

$( element ).next( "span" ).addClass( "fa-check" ).removeClass( "fa-times" );

}

});

</script>

</body>

</html>

```

Заменяем в шаблоне `reCAPTCHA_Key` на Ключ который Вы получили на сайте reCAPTCHA.

###Создаем файл PHP subscribe.php

Файл subscribe.php нам необходим я обработки значений посылаемых после заполнения формы подписки, а также для проверки прошел ли подписчик reCAPTCHA.

```

<?php

/**

* Sample PHP code to use reCAPTCHA V2.

* @link http://www.google.com/recaptcha

* Permission is hereby granted, free of charge, to any person obtaining a copy

* of this software and associated documentation files (the "Software"), to deal

* in the Software without restriction, including without limitation the rights

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

* copies of the Software, and to permit persons to whom the Software is

* furnished to do so, subject to the following conditions:

* The above copyright notice and this permission notice shall be included in

* all copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

* THE SOFTWARE.

require_once "recaptchalib.php";

// Register API keys at https://www.google.com/recaptcha/admin

$siteKey = "reCAPTCHA_Key";

$secret = "reCAPTCHA_Private_Key";

// reCAPTCHA supported 40+ languages listed here: https://developers.google.com/recaptcha/docs/language

$lang = "ru";

// The response from reCAPTCHA

$resp = null;

// The error code from reCAPTCHA, if any

$error = null;

$reCaptcha = new ReCaptcha($secret);

// Was there a reCAPTCHA response?

if ($_POST["g-recaptcha-response"]) {

$resp = $reCaptcha->verifyResponse(

$_SERVER["REMOTE_ADDR"],

$_POST["g-recaptcha-response"]

);

}

<html>

<head><title>reCAPTCHA Example</title></head>

<body>

<?php

if ($resp != null && $resp->success) {

echo "You got it!";

}

src="https://www.google.com/recaptcha/api.js?hl=<?php echo $lang;?>">

</script>

<br/>

</form>

</body>

</html>

```

Заменяем в шаблоне `reCAPTCHA_Key` на Ключ, `reCAPTCHA_Private_Key` на Секретный ключ которые Вы получили на сайте reCAPTCHA.

Заключение

----------

Для быстрого теста достаточно зарегистрироваться на сайте reCAPTCHA, создать два файла subscribe.html и subscribe.php заменив значения `reCAPTCHA_Key` на Ключ, `reCAPTCHA_Private_Key` на Секретный ключ .