Подтвердить что ты не робот

Внедрение нового Invisible reCaptcha из Google

Я создаю сайт PHP, на котором я хотел бы поместить капчу в форму входа. Я пошел с Google new Invisible reCaptcha, но у меня возникли проблемы с его внедрением (часть 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, пожалуйста, следуйте нашему руководству по разработке для деталей реализации.

  • Пожалуйста, убедитесь, что ваш ключ сайта был включен в белый список для Invisible reCAPTCHA.

  • Чтобы включить Invisible reCAPTCHA, вместо того, чтобы поместить параметры в div, вы можете добавить их непосредственно к кнопке html.

    3a. данных обратного вызова = ". Это работает так же, как флажок captcha, но необходим для невидимого.

    3b. data-badge: позволяет переместить значок reCAPTCHA (т.е. логотип и" защищен текстом reCAPTCHA "). Действительные параметры:" снизу "(по умолчанию)," нижний "или" встроенный", который помещает значок непосредственно над кнопкой. Если вы сделаете значок встроенным, вы можете напрямую контролировать CSS значка.

  • Проверка ответа пользователей не имеет изменений.

У меня проблема с реализацией HTML (поэтому мне нужна помощь с шагом 3. 1,2 и 4 работает для меня). В остальном я работаю с нормальным reCaptcha и согласно инструкциям, это должно быть одно и то же. Я не понимаю, что такое обратный вызов данных и значок данных и как он работает. Пример кода того, как реализовать невидимую reCaptcha с настройкой моей формы, будет отличным!

4b9b3361

ОТВЕТЫ

Ответ 1

Невидимый reCAPTCHA

Реализация Google новой Invisible reCAPTCHA очень похожа на то, как мы добавляем v2 на наш сайт. Вы можете добавить его как собственный контейнер, как обычно, или новый метод добавления его в кнопку отправки формы. Я надеюсь, что это руководство поможет вам на правильном пути.

Автономный контейнер CAPTCHA

Реализация recaptcha требует нескольких вещей:

- Sitekey
- Class
- Callback
- Bind

Это будет вашей конечной целью.

<div class="g-recaptcha" data-sitekey="<sitekey>" 
   data-bind="recaptcha-submit" data-callback="submitForm"> 
</div>

При использовании автономного метода необходимо установить привязку данных к идентификатору кнопки отправки. Если у вас нет этого набора, ваша капча не будет невидимой.

Обратный вызов также должен быть использован для отправки формы. Невидимая капча отменит все события с помощью кнопки отправки, поэтому вам необходим обратный вызов, чтобы фактически передать отправку.

<script>
function submitForm() {
    var form = document.getElementById("ContactForm");
    if (validate_form(form)) {
        form.submit();
    } else {
        grecaptcha.reset();
    }
}
</script>

Обратите внимание, что в примере обратного вызова также есть проверка пользовательских форм. Очень важно, чтобы вы сбрасывали reCAPTCHA, когда проверка не удалась, иначе вы не сможете повторно отправить форму, пока не истечет срок действия CAPTCHA.

Невидимая кнопка 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>

Надеюсь, это поможет вам и будущим программистам. Я буду держать это в курсе, как технология развивается.

Ответ 2

Если вы ищете полностью настраиваемое общее решение, которое будет работать даже с несколькими формами на одной странице, я буду явно отображать виджет 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>

Ответ 3

Вот как реализовать клиент + серверную сторону (php) Невидимая функция reCaptcha:

  • Клиентская сторона
<!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>
  • Проверка на стороне сервера: создайте файл signup.php
<?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>

Ответ 4

Невидимая reCAPTCHA в ASP.NET MVC 5 Использование фильтров действий.

В этом сообщении я объясню, как включить и настроить Invisible reCAPTCHA на вашей веб-странице, и мы можем включить и настроить Invisible reCAPTCHA двумя способами. 1. Конфигурация ресурсов HTML и JavaScript API 2. Google New Invisible reCAPTCHA в MVC 5 Использование фильтров действий

Google New Invisible reCAPTCHA в MVC с использованием фильтров действий -

Шаги 1 - Перейдите к URL https://www.google.com/recaptcha/admin и войдите в систему со своими учетными данными.

Шаги 2 - Зарегистрируйте reCAPTCHA для своего сайта с помощью метки вашего сайта.

Выберите переключатель Invisible reCAPTCHA. Выбрав Invisible reCAPTCHA, нам нужно будет добавить гриву Domains, где вы хотите добавить эту Invisible reCAPTCHA, и нажмите на регистрацию с условиями обслуживания.

Например - Мой добавленный домен - localhost и сайт Label is - test. Вы можете увидеть вышеуказанные шаги для этого.

Этапы 3 - Интеграция на стороне клиента -  Добавить Script Bundle в комплекте bundles.Add(новый ScriptBundle ( "~/bundles/recaptcha", "//www.google.com/recaptcha/api.js" ).Include( "//Scripts/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 - Невидимая reCAPTCHA

Ответ 5

Вот рабочий пример:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReCAPTCHA Example</title>
</head>
<body>
<div class="container">

  <form method="post" action="/contact/" id="contact-form">
    <h3 class="title-divider">
      <span>Contact Us</span>
    </h3>
    <input type="text" name="name">
    <div class="captcha"><!-- BEGIN: ReCAPTCHA implementation example. -->
      <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY" data-callback="onSuccess" data-bind="form-submit"></div>
      <script>
          var onSuccess = function (response) {
              var errorDivs = document.getElementsByClassName("recaptcha-error");
              if (errorDivs.length) {
                  errorDivs[0].className = "";
              }
              var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
              if (errorMsgs.length) {
                  errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
              }
              document.getElementById("contact-form").submit();
          };</script><!-- END: ReCAPTCHA implementation example. -->
    </div>
    <button id="form-submit" type="submit">Submit</button>
  </form>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
</body>
</html>

Не забудьте заменить YOUR_RECAPTCHA_SITE_KEY на ключ своего сайта Google ReCAPTCHA.

Следующим шагом является проверка данных. Это делается с помощью запроса POST к конечной точке https://www.google.com/recaptcha/api/siteverify, содержащего ваш секретный ключ и данные из reCAPTCHA, которые идентифицируются с помощью g-recaptcha-response. Есть много разных способов сделать это в зависимости от вашей CMS/Framework.

Возможно, вы заметили значок reCaptcha в правом нижнем углу экрана. Это существует, чтобы пользователи знали, что форма защищена reCaptcha теперь, когда флажок проверки был удален. Однако этот значок можно скрыть, настроив его как встроенный, а затем изменив его с помощью CSS.

<style>
    .grecaptcha-badge {display: none;}
</style>

Обратите внимание, что, поскольку Google собирает информацию о пользователях, чтобы включить функцию reCaptcha, их условия обслуживания требуют, чтобы вы предупреждали пользователей о ее использовании. Если вы прячете значок, вы можете вместо этого добавить информационный абзац где-нибудь на странице.

Ответ 6

  • Войдите в свою учетную запись google

  • Перейдите по ссылке google recaptcha.

  • Затем следуйте ссылке на интеграцию кода, следуйте коду для проверки как клиента, так и сервера. https://developers.google.com/recaptcha/docs/invisible

  • Увеличьте или уменьшите уровень безопасности один раз после создания recaptcha, перейдите к настройкам предварительной настройки здесь, https://www.google.com/recaptcha/admin#list