How to enable captcha for AnQiCMS comment form when submitting comments and encountering spam?

Say goodbye to spam: How to enable captcha in AnQiCMS comment form?

In the daily operation of the website, spam comments are often a headache.These comments posted by robots or malicious users not only fill up your comment section but also degrade the overall quality of the website's content, may contain malicious links, affect user experience, and even negatively impact the website's SEO performance.In order to effectively curb this phenomenon, it is particularly important to enable captcha verification for comment forms.

AnQiCMS, as a powerful and secure enterprise-level content management system, fully considers the needs of website operators in terms of content management and security protection.It comes with a flexible captcha mechanism that can help you easily resist spam comments.Next, I will introduce in detail how to enable the captcha for the comment form in AnQiCMS, so that your website's comment area returns to clarity.

Why does the comment form need captcha?

Imagine if your website did not have captcha protection, automated scripts could easily submit comments in bulk, and these comments are often unrelated to the article content, or they are plain advertisements, or even contain virus links.This not only makes real users feel frustrated because their comments may be overwhelmed, but also requires website administrators to invest a lot of time and effort to review and delete this useless information.

Captcha, as a challenge-response test to distinguish between computers and humans, can effectively prevent the vast majority of automated scripts from submitting behavior.It filters out a lot of spam by requiring users to complete a simple task (such as recognizing text in images, performing simple mathematical calculations, etc.), ensuring that the person submitting the comment is a real person.

AnQiCMS's captcha mechanism overview

AnQiCMS provides a simple and efficient captcha solution, its enabling process is mainly divided into two steps: first, enable the global captcha function in the background, and then integrate the display and interaction logic of the captcha into the front-end comment template.This design ensures that the core functions are enabled and also gives template developers a high degree of freedom, allowing them to customize the display of captcha according to the actual design style of the website.

The first step: Enable the comment captcha function in the AnQiCMS background

Enable the comment captcha function of AnQiCMS very directly. You need to log in to your AnQiCMS backend as an administrator.

1. After logging in to the backend, please find the navigation menu on the left and select “Backend settings”, click to enter.
2. In the “Backend Settings” page, there will usually be “Content settingsSubmenu, here is concentrated the various configurations of the website content.
3. After clicking Leave a comment verification codeThe option may be closed by default.
4. You just need to switch its status toenabledand then save the settings.

Complete this step, the AnQiCMS backend is already prepared to provide captcha services for the comment form. Next, we need to call and display it in the front-end template.

Step two: Integrate captcha code in the comment form

Although the function has been enabled on the back-end, the actual display and interaction of the captcha need to be implemented in the website's front-end template files.This gives you the opportunity to freely customize the appearance of the captcha according to the website style.

Generally, the comment form appears at the bottom of the article detail page, so you need to edit the template file related to the comment form. According to the AnQiCMS template design convention, this may be located in your template directory.{模型table}/detail.html(such asarchive/detail.htmlorcomment/list.htmlIn the file, it depends on how your template is organized.

Find the HTML code of your comment form, add the following HTML structure and JavaScript code snippet to the form to introduce the captcha:

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer; border: 1px solid #e6e6e6;" alt="验证码" title="点击刷新验证码"/>
</div>

<script>
  // 该函数用于从AnQiCMS后端获取验证码图片及ID
  function fetchCaptcha() {
    fetch('/api/captcha') // 访问AnQiCMS提供的验证码API接口
      .then(response => {
        return response.json(); // 解析返回的JSON数据
      })
      .then(res => {
        // 将获取到的验证码ID设置到隐藏字段中，用于表单提交时后端验证
        document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
        // 将获取到的验证码图片URL设置给<img>标签的src属性，使其显示出来
        document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
      })
      .catch(err => {
        console.error('获取验证码失败:', err);
      });
  }

  // 页面加载完成后立即获取一次验证码
  document.addEventListener('DOMContentLoaded', fetchCaptcha);

  // 为验证码图片添加点击事件，点击时刷新验证码
  document.getElementById('get-captcha').addEventListener("click", fetchCaptcha);
</script>

Code analysis:

• captcha_idHidden fieldThis is a very critical field. It stores a unique identifier generated by the AnQiCMS backend for the current captcha image.When the user submits a comment, this ID will be sent to the server along with the content of the user's entered captcha for backend matching verification.
• captchaText input boxThis is the area where users input the content of the captcha they see.
• get-captchaImage labelThis<img>The tag is used to display the captcha image. Its.srcproperty is updated dynamically through JavaScript.
• JavaScript code:
  • fetchCaptcha()The function is responsible for initiating a network request to AnQiCMS./api/captchaAn interface that returns a JSON object containingcaptcha_id(Unique identifier for the verification code) andcaptcha(Base64 encoding or URL of the captcha image).
  • After the page is loaded,fetchCaptcha()It will be called once immediately to display the initial captcha.
  • <img>A click event listener was added to the tag, which will call again every time the image is clicked.fetchCaptcha()Thus, refresh the captcha image, convenient for users to change when they cannot see it clearly.

If you use the jQuery library on the website, you can use a more concise syntax:

<script>
  // jQuery 调用方式
  function fetchCaptchaWithJquery() {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').attr("value", res.data.captcha_id);
      $('#get-captcha').attr("src", res.data.captcha);
    }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
      console.error('获取验证码失败:', textStatus, errorThrown);
    });
  }

  $(document).ready(fetchCaptchaWithJquery); // 页面加载完成后获取验证码
  $('#get-captcha').on("click", fetchCaptchaWithJquery); // 点击图片刷新验证码
</script>

Make sure to place this code in your comment form</form>before the tag or at the bottom of the page</body>before the tag, make sure the DOM element is loaded.

Effect verification and testing

After completing the above configuration, save your template file and refresh the website page.Visit any article with a comment feature, you should see a captcha image and a corresponding input box in the comment form.

Try to submit a comment:

1. Normal submission: Enter the correct verification code, the comment should be successfully submitted.
2. Enter the wrong verification code: When submitted, the system should prompt the captcha error and the comment cannot be submitted.
3. Do not enter the captcha: When submitted, it should prompt that the captcha is a required field.
4. Click the captcha image: The image should refresh and display a new captcha.

If everything is normal, congratulations to you! Your AnQiCMS comment form is now protected by captcha, which can effectively filter out most spam information.

Summary

Through AnQiCMS provided built-in captcha