README

将 Google Recaptcha v3 添加到 Statamic 表单。此包受 aryehraber/statamic-captcha 启发。

安装

composer require haugen86/statamic-recaptcha

发布配置文件

 php please vendor:publish --tag=recaptcha-config

一旦配置文件就位，请务必记住更新您的密钥和 sitekey，以使用 Google recaptcha 控制台中的那些。还要记住指定哪些表单应使用 recaptcha。

您还可以指定 recaptcha 应使用的阈值。1 是最严格的，而 0.1 是最宽松的。

<?php

return [
    'forms'           => ['contact'],
    'sitekey'         => env('RECAPTCHA_SITEKEY', ''),
    'secret'          => env('RCAPTCHA_SECRET', ''),
    'score_threshold' => 0.5
];

用法

<head>
    <title>My Awesome Site</title>

    {{ recaptcha:head }}
</head>
<body>
    {{ form:contact }}

        <!-- Add your fields like normal -->

        {{ recaptcha }}

        {{ if error:recaptcha }}
          <p>{{ error:recaptcha }}</p>
        {{ /if }}

    {{ /form:contact }}
</body>

这将在页面上自动渲染 Captcha 元素。表单提交后，插件将暂时阻止表单保存，同时 Captcha 服务验证请求是否有效。如果没有问题，表单将正常保存，否则将在 {{ errors }} 对象中添加错误。

请记住，您需要一些本地 JavaScript 来使用 recaptcha 的响应更新表单数据。

 <script>
      function onClick(e) {
        e.preventDefault();
       
        grecaptcha.ready(() => {
            grecaptcha.execute(siteKey, {action: 'submit'}).then(async (tok) => {
                await document.querySelectorAll('form input[name="recaptcha_response"]').forEach((item) => {
                    item.value = tok;
                });
    
               // you can now trigger your form, and submit it.
        });
      }
  </script>

haugen86 / statamic-recaptcha

维护者

详细信息

README

安装

用法