Я создаю PHP-сайт, на котором я хотел бы поместить captcha в форму входа. Я пошел с новым Invisible reCaptcha Google, но у меня возникли проблемы с его внедрением (часть HTML, PHP работает).
Код, который у меня есть для «нормального» reCaptcha, следующий (как указано в инструкциях Google reCaptcha, и это работает):
<form action=test.php method="POST"> <input type="text" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <!-- <Google reCaptcha> --> <div class="g-recaptcha" data-sitekey="<sitekey>"></div> <!-- </Google reCaptcha> --> <input type="submit" name="login" class="loginmodal-submit" value="Login"> </form> Были некоторые инструкции, отправленные в электронном письме с подтверждением, когда я зарегистрировался (потребовалось около 24 часов, чтобы получить подтверждение). Это говорит следующее:
Невидимая интеграция reCAPTCHA
Если вы не интегрировали свой сайт с reCAPTCHA v2, пожалуйста, следуйте нашим инструкциям для разработчиков для деталей реализации.
Убедитесь, что ваш ключ сайта включен в список невидимых reCAPTCHA.
Чтобы включить Invisible reCAPTCHA, вместо того, чтобы поместить параметры в div, вы можете добавить их непосредственно к кнопке html.
3a. данных обратного вызова =»». Это работает так же, как флажок captcha, но необходим для невидимости.
3b. data-badge: позволяет переместить значок reCAPTCHA (то есть логотип и «защищено текстом reCAPTCHA»). Допустимые параметры: «rightright» (по умолчанию), «bottomleft» или «inline», которые помещают значок непосредственно над кнопкой. Если вы сделаете значок встроенным, вы можете напрямую контролировать CSS значка.
При проверке ответа пользователя изменений нет.
У меня проблема с реализацией HTML (поэтому мне нужна помощь с шагом 3. 1,2 и 4 работает для меня). В остальном я работаю с нормальным reCaptcha и согласно инструкциям, это должно быть одно и то же. Я не понимаю, что такое обратный вызов данных и значок данных и как он работает. Пример кода, как реализовать невидимую reCaptcha с настройкой моей формы, будет замечательным!
Внедрение новой невидимой reCAPTCHA Google очень похоже на то, как мы добавляем v2 на наш сайт. Вы можете добавить его как свой собственный контейнер, как обычный, или новый метод добавления его в кнопку отправки формы. Я надеюсь, что это руководство поможет вам по правильному пути.
Реализация recaptcha требует нескольких вещей:
- Sitekey - Class - Callback - Bind
Это будет вашей конечной целью.
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
При использовании автономного метода необходимо установить привязку данных к идентификатору вашей кнопки отправки. Если у вас нет этого набора, ваш captcha не будет невидим.
Обратный вызов также должен использоваться для отправки формы. Невидимая captcha отменит все события из кнопки отправки, так что вам потребуется обратный вызов для фактического прохождения заявки.
<script> function submitForm() { var form = document.getElementById("ContactForm"); if (validate_form(form)) { form.submit(); } else { grecaptcha.reset(); } } </script>
Обратите внимание, что в обратном вызове примера есть также выборочная проверка формы. Очень важно, чтобы вы сбросили reCAPTCHA, когда проверка не удалась, иначе вы не сможете повторно отправить форму до истечения срока действия CAPTCHA.
Многие из них аналогичны автономному CAPTCHA выше, но вместо контейнера все помещается на кнопку отправки.
Это будет вашей целью.
<button class="g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit">Submit</button>
Здесь есть что-то новое, значок данных. Это div, который вставляется в DOM, который содержит входы, необходимые для функции reCAPTCHA. Он имеет три параметра: нижний, прямой, встроенный. Inline отобразит его непосредственно над кнопкой отправки и позволит вам управлять тем, как вы хотите, чтобы стиль был стилизован.
<form action="test.php" method="POST" id="theForm"> <script> function submitForm() { document.getElementById("theForm").submit(); } </script> <input type="text" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div> <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login"> </form>
Или
<form action="test.php" method="POST" id="theForm"> <script> function submitForm() { document.getElementById("theForm").submit(); } </script> <input type="text" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button> </form>
Надеюсь, это поможет вам и будущим кодерам. Я буду держать это в курсе, как технология развивается.
Если вы ищете полностью настраиваемое общее решение, которое будет работать даже с несколькими формами на одной странице, я буду явно отображать виджет reCaptcha с помощью параметров render = explicit и onload = aFunctionCallback .
Вот простой пример:
<!DOCTYPE html> <html> <body> <form action="" method="post"> <input type="text" name="first-name-1"> <br /> <input type="text" name="last-name-1"> <br /> <div class="recaptcha-holder"></div> <input type="submit" value="Submit"> </form> <br /><br /> <form action="" method="post"> <input type="text" name="first-name-2"> <br /> <input type="text" name="last-name-2"> <br /> <div class="recaptcha-holder"></div> <input type="submit" value="Submit"> </form> <script type="text/javascript"> var renderGoogleInvisibleRecaptcha = function() { for (var i = 0; i < document.forms.length; ++i) { var form = document.forms[i]; var holder = form.querySelector('.recaptcha-holder'); if (null === holder){ continue; } (function(frm){ var holderId = grecaptcha.render(holder,{ 'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY', 'size': 'invisible', 'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline 'callback' : function (recaptchaToken) { HTMLFormElement.prototype.submit.call(frm); } }); frm.onsubmit = function (evt){ evt.preventDefault(); grecaptcha.execute(holderId); }; })(form); } }; </script> <script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script> </body> </html>
Вот как реализовать функциональность невидимой reCaptcha клиент + сервер (php) :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>reCaptcha</title> <!--api link--> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <!--call back function--> <script> function onSubmit(token) { document.getElementById('reCaptchaForm').submit(); } </script> </head> <body> <div class="container"> <form id="reCaptchaForm" action="signup.php" method="POST"> <input type="text" placeholder="type anything"> <!--Invisible reCaptcha configuration--> <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button> <br/> </form> </div> </body> </html>
<?php //only run when form is submitted if(isset($_POST['g-recaptcha-response'])) { $secretKey = '<your secret key>'; $response = $_POST['g-recaptcha-response']; $remoteIp = $_SERVER['REMOTE_ADDR']; $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp"); $result = json_decode($reCaptchaValidationUrl, TRUE); //get response along side with all results print_r($result); if($result['success'] == 1) { //True - What happens when user is verified $userMessage = '<div>Success: you\'ve made it :)</div>'; } else { //False - What happens when user is not verified $userMessage = '<div>Fail: please try again :(</div>'; } } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>reCAPTCHA Response</title> </head> <body> <?php if(!empty($userMessage)) { echo $userMessage; } ?> </body> </html>
Invisible reCAPTCHA в ASP.NET MVC 5 Использование фильтров действий.
В этом посте я объясню, как включить и настроить Invisible reCAPTCHA на вашей веб-странице, и мы можем включить и настроить Invisible reCAPTCHA двумя способами. 1. Конфигурация ресурсов HTML и JavaScript API 2. Новая невидимая reCAPTCHA от Google в MVC 5 Использование фильтров действий
Новая невидимая reCAPTCHA от Google в MVC с использованием фильтров действий –
Шаги 1 – Перейдите по адресу https://www.google.com/recaptcha/admin и войдите в свой аккаунт.
Шаги 2 – Зарегистрируйте reCAPTCHA для своего сайта с помощью метки вашего сайта.
Выберите переключатель Invisible reCAPTCHA. Выбрав Invisible reCAPTCHA, нам нужно будет добавить гриву Domains, где вы хотите добавить эту Invisible reCAPTCHA, и нажмите на регистрацию с условиями предоставления услуг.
Например, мой добавленный домен – localhost и сайт Label is – test. Вы можете увидеть вышеуказанные шаги для этого.
Шаги 3 – Интеграция с клиентской стороной – добавьте пакет сценариев в пакеты Bundle.Add (новый ScriptBundle ("~ / bundles / recaptcha", "//www.google.com/recaptcha/api.js").Include("~/ Сценарии / ReCaptcha-api.js "));
HTML-страница-
@model LoginViewModel @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "", role = "form", id = "LoginForm" })) { <div class="form-group" id="loginSection"> @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email", id = "txtEmail", autofocus = "autofocus" }) @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" }) </div> <div class="clr_10"></div> <button class="g-recaptcha btn btn-default" data-sitekey="@Model.RecaptchaPublicKey" data-callback="OnSubmit"> Generate Pass Code </button> }
И загрузить JavaScript API
@section Scripts { @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/recaptcha") <script> function OnSubmit(token) { document.getElementById("LoginForm").submit(); } </script> }
А ТАКЖЕ
public class LoginViewModel { [Required] [Display(Name = "Email")] [EmailAddress] public string Email { get; set; } //[Required] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [Display(Name = "Remember me?")] public bool RememberMe { get; set; } public string RecaptchaPublicKey { get; } public LoginViewModel() { } public LoginViewModel(string recaptchaPublicKey) { RecaptchaPublicKey = recaptchaPublicKey; } }
Этапы 4 – установите Autofac и Autofac.MVC5 с помощью диспетчера пакетов Nuget в приложении портала.
Шаги 5 – Создать невидимую службу проверки reCAPTCHA
Интерфейс –
public interface ICaptchaValidationService { bool Validate(string response); }
Интерфейсная реализация –
public class InvisibleRecaptchaValidationService : ICaptchaValidationService { private const string API_URL = "https://www.google.com/recaptcha/api/siteverify"; private readonly string _secretKey; public InvisibleRecaptchaValidationService(string secretKey) { _secretKey = secretKey; } public bool Validate(string response) { if (!string.IsNullOrWhiteSpace(response)) { using (var client = new WebClient()) { var result = client.DownloadString($"{API_URL}?secret={_secretKey}&response={response}"); return ParseValidationResult(result); } } return false; } private bool ParseValidationResult(string validationResult) => (bool)JObject.Parse(validationResult).SelectToken("success"); }
Шаги 6 – Создайте подтверждение reCAPTCHA на сервере с помощью этого настраиваемого атрибута
public class ValidateRecaptchaAttribute : ActionFilterAttribute { private const string RECAPTCHA_RESPONSE_KEY = "g-recaptcha-response"; public ICaptchaValidationService CaptchaService { get; set; } public override void OnActionExecuting(ActionExecutingContext filterContext) { var isValidate = new InvisibleRecaptchaValidationService(ConfigurationManager.AppSettings["RecaptchaSecretKey"]).Validate(filterContext.HttpContext.Request[RECAPTCHA_RESPONSE_KEY]); if (!isValidate) filterContext.Controller.ViewData.ModelState.AddModelError("Recaptcha", "Captcha validation failed."); } } Steps 7 - //GET: /Account/Login [AllowAnonymous] public ActionResult Login(string returnUrl) { if (System.Web.HttpContext.Current.User.Identity.IsAuthenticated) { return RedirectToAction("Index", "Home"); } return View(new LoginViewModel(ConfigurationManager.AppSettings["RecaptchaPublicKey"])); }
Шаги 8 –
//POST: /Account/Login [HttpPost] [AllowAnonymous] [ValidateRecaptcha] public ActionResult Login(LoginViewModel model, string returnUrl) { if (ModelState.IsValid) { } return View("Login"); }
Шаги 9 – Добавьте код ниже в файл конфигурации.
<add key="RecaptchaSecretKey" value="6Lcf****AAAEJN**EPRU***" /> <add key="RecaptchaPublicKey" value="****b27MgXmNmu2****OocE" />
А ТАКЖЕ
<dependentAssembly> <assemblyIdentity name="Autofac" publicKeyToken="17863af14b0044da" culture="neutral" /> <bindingRedirect oldVersion="0.0.0.0-4.6.1.0" newVersion="4.6.1.0" /> </dependentAssembly> </assemblyBinding>
Результаты Live – Invisible reCAPTCHA
Войдите в свою учетную запись google
Перейдите по ссылке google recaptcha.
Затем следуйте ссылке на интеграцию кода, следуйте коду для проверки как клиента, так и сервера. https://developers.google.com/recaptcha/docs/invisible
Увеличьте или уменьшите уровень безопасности один раз после создания recaptcha, перейдите к настройкам предварительного доступа здесь, https://www.google.com/recaptcha/admin#list