AnqiCMS uses reCAPTCHA browser protection feature to prevent automated attacks

reCAPTCHA is a powerful robot blocking tool that can protect websites from spam, abuse, and fraudulent activities. It analyzes user behavior and other factors to determine whether an operation is performed by a human or a robot. If suspicious activity is detected, reCAPTCHA may take measures to prevent unauthorized access, such as displaying verification challenges or completely blocking interactions. This helps ensure that the website remains protected while minimizing interference to legitimate users.

The following are three key features:

Adaptive risk assessment: Analyze various factors, assess the risk of the user being a robot, and adjust the response accordingly Advanced robot detection: Use advanced technology to distinguish between humans and robots to ensure accurate identification Continuous learning: Use machine learning technology to continuously improve the accuracy of robot detection and adjust according to new threats

NoteDo not enable the server in the country, as this feature cannot be used normally in the country.

Configure it first on Google Cloud

AnQi CMS now supports configuring the use of reCAPTCHA to intercept automated attacks on website comments. Below is the operation method for AnQi CMS to connect to reCAPTCHA:

1. Accesshttps://cloud.google.com/security/products/recaptcha, Click the [Start Using] button and fill in the website information (if the website has been added, click the [Fraud Defense Console] to operate).
2. In the popped-up [Register new website] page, fill in the tags, select the reCAPTCHA type, domain, and project (if there is no project, you need to create it first), fill in the information, and click the submit button to complete the creation.
3. The creation process takes about 30 seconds, after which you will be taken to the [Add reCAPTCHA to Your Website] page, which includes the website key and communication key, please keep them safely.

Configure on the AnQiCMS management backend

Come to the management backend of the AnQiCMS website, find 【Akismet/reCAPTCHA】in the System Features under Function -> (you can also search reCAPTCHA in the top search bar)Click on the 【Akismet/reCAPTCHA】function to enter the configuration page, select Enable reCAPTCHA, fill in the Website Key and Communication Key, and click Save to make the configuration effective.

Configuration of the AnQiCMS front-end message interface

After configuring the website key and communication key in the AnQiCMS management background, the reCAPTCHA will not appear directly on the front-end interface, and interface adaptation is still needed.

In the AnQiCMS site, the front-end template can use the website key variablerecaptcha_keyto determine whether the site has enabled reCAPTCHA, if enabled, then the website keyrecaptcha_keywill exist with the correct value.

We add the corresponding judgment to the message form to use reCAPTCHA:

Operation template/default/guestbook/index.html (the same for other templates, the comment form can be used accordingly)

to<form>Element addedid="guestbook-form",

Add the following code inside the form

  <!-- 使返回值为JSON -->
  <input type="hidden" name="return" value="json">
  <p class="form-tip mt-2 hidden text-sm"></p>

{%- if recaptcha_key %}
  <!-- 启用 reCAPTCHA -->
  <script src="https://www.google.com/recaptcha/api.js?render={{recaptcha_key}}"></script>
  <script>
      (function () {
          // 供提交脚本调用：获取 reCAPTCHA token，失败时回调 null 降级为直接提交
          window.getRecaptchaToken = function (cb) {
              if (typeof grecaptcha === 'undefined') {
                  cb(null);
                  return;
              }
              grecaptcha.ready(function () {
                  grecaptcha.execute('{{recaptcha_key}}', { action: 'guestbook' }).then(function (token) {
                      cb(token);
                  }).catch(function () {
                      cb(null);
                  });
              });
          };
      })();
  </script>
{%- endif %}
<script>
    (function () {
        var form = document.getElementById('guestbook-form');
        if (!form) return;
        var tip = form.querySelector('.form-tip');
        var submitBtn = form.querySelector('button[type="submit"]');

        function showTip(text, ok) {
            if (!tip) return;
            tip.textContent = text;
            tip.classList.remove('hidden');
            tip.classList.toggle('text-green-600', ok);
            tip.classList.toggle('dark:text-green-400', ok);
            tip.classList.toggle('text-red-600', !ok);
            tip.classList.toggle('dark:text-red-400', !ok);
        }

        function doSubmit(token) {
            if (token) {
                var input = form.querySelector('input[name="recaptcha_token"]');
                if (!input) {
                    input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'recaptcha_token';
                    form.appendChild(input);
                }
                input.value = token;
            }
            if (submitBtn) submitBtn.disabled = true;
            fetch(form.action, { method: 'POST', body: new FormData(form) })
                .then(function (res) { return res.json(); })
                .then(function (res) {
                    if (res.code === 0) {
                        showTip('留言提交成功，我们会尽快与您联系！', true);
                        form.reset();
                    } else {
                        showTip(res.msg || '留言提交失败，请稍后重试。', false);
                    }
                })
                .catch(function () {
                    showTip('留言提交失败，请稍后重试。', false);
                })
                .finally(function () {
                    if (submitBtn) submitBtn.disabled = false;
                });
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (typeof window.getRecaptchaToken === 'function') {
                window.getRecaptchaToken(doSubmit);
            } else {
                doSubmit(null);
            }
        });
    })();
</script>

After saving the code, you can enable reCAPTCHA.

If you see a normal reCAPTCHA icon at the bottom right of the page, it means the configuration is completely correct