How to enable captcha for the AnQiCMS comment form when encountering spam information during comment submission?

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

In the daily operation of a website, spam comments are often a headache.These comments published by robots or malicious users not only will flood your comment section and degrade the overall quality of the website's content, but may also contain malicious links, affecting user experience and even negatively impacting the website's SEO performance.It is particularly important to enable captcha verification mechanism for comment form to effectively curb this phenomenon.

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 how to enable captcha for the comment form in AnQiCMS, so that your website's comment section can return to clarity.

Why does the comment form need captcha?

Imagine if your website didn't have captcha protection, automated scripts could easily submit comments in bulk. These comments are often unrelated to the article content, or they are plain advertisements, even containing virus links.This not only frustrates real users, as their comments may be overwhelmed, but also requires website administrators to invest a lot of time and effort in reviewing and deleting this useless information.

AnQiCMS captcha mechanism overview

AnQiCMS provides a simple and efficient captcha solution. The enabling process mainly consists of two steps: first, enable the global captcha function in the background, and then integrate the captcha display and interaction logic into the front-end comment template.This design ensures the activation of core functions while also granting template developers a high degree of freedom, allowing them to customize the presentation of captcha in accordance with the actual design style of the website.

Step 1: Enable the comment captcha function in AnQiCMS backend

Enable the AnQiCMS comment captcha feature is very direct. You need to log in to your AnQiCMS admin panel as an administrator.

1. Log in to the backend, then find the “” option in the left navigation menu.Backend settingsClick to enter.
2. On the “Backend Settings” page, there is usually a “Content SettingsSubmenu, here are the various configurations of the website content.
3. After clicking "Content Settings", you will see a name called "Comment captcha verificationThe option of “” is available. By default, this option may be turned off.
4. You just need to switch its status toEnabled, and then save the settings.

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

Second step: Integrate captcha code in the comment form

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

Generally, comment forms appear at the bottom of article detail pages, so you need to edit the template files related to the comment form. According to AnQiCMS's template design conventions, this may be located in your template directory under{模型table}/detail.html(such asarchive/detail.html) orcomment/list.htmlIn the file, it depends on how your template is organized.

Find the HTML code for 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 user's input captcha content for backend matching verification.
• captchaText Input BoxThis is the area where users input the captcha content they see.
• get-captchaImage LabelThis<img>A label is used to display the captcha image. It'ssrcThe property will be dynamically updated through JavaScript.
• JavaScript code:
  • fetchCaptcha()The function is responsible for initiating network requests to AnQiCMS./api/captchaThe interface returns a JSON object containing.captcha_id(The unique identifier of the captcha) andcaptcha(The Base64 encoding of the captcha image or the URL).
  • When the page is loaded,fetchCaptcha()it will be called immediately once to display the initial captcha.
  • <img>an event listener for a click is added to the tag, and it will be called again every time the image is clicked.fetchCaptcha()Therefore, refresh the captcha image for convenience, allowing users to replace it 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 label, or at the bottom of the page</body>before the label, ensure that the DOM element has been loaded.

Effect verification and testing

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

Try to submit a comment:

1. Normal submissionEnter the correct verification code, the comment should be submitted successfully.
2. Incorrect verification codeThe system should prompt 'captcha error' when submitting, and the comment cannot be submitted.
3. No captcha enteredThe system should prompt that the captcha is a required field when submitting.
4. Click on the captcha imageThe image should refresh and display a new captcha.

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

Summary

Through the built-in captcha provided by AnQiCMS