In website operation, the message and comment features are important channels for interacting with users, but they are also often hotbeds of spam and malicious flooding.In order to maintain a clean and high-quality communication environment, it is particularly important to add captcha verification to these interactive features.Auto CMS knows this and provides a convenient solution.

How can you display a captcha in the留言 or comment feature of the 安企CMS, effectively resisting spam information?This mainly consists of two core steps: first, enable the captcha feature in the background, and then integrate the captcha elements into the frontend template.

Step 1: Enable the captcha function in the Anqi CMS backend

The foundation of all functions starts with the configuration on the back end.To enable captcha for comments or messages, you need to go to the admin interface of AnQi CMS to set it up.通常，您可以在左侧菜单栏找到“功能管理”或“后台设置”这类选项。

In these function modules, there will be a dedicated setting for comments and reviews.The CMS usually provides a clear switch, such as 'Turn on the verification code function for comment留言 comments.'You just need to find and click on this switch, and change its state from 'disabled' to 'enabled'.Once enabled, the system backend will be ready to receive and verify captcha for your留言 and 评论 features.This operation is very intuitive, no complex parameter configuration is required, ensuring the implementation of the backend security mechanism.

Step 2: Integrate the captcha element into the front-end template

After enabling the background work, the next step is to make the captcha truly appear in front of the users. This requires you to make corresponding modifications to the website front-end message or comment form template.

For website messages, you usually modify likeguestbook/index.htmlSuch a template file; while for the comment function of articles or product detail pages, the captcha form may be located in the template of the article detail page, or it may be an independent comment form fragment (for example, throughincludeLabel introduction template).

You need to add several key HTML elements and a small JavaScript code snippet to the form to implement the display and interaction of the captcha. These elements include a hidden input box for storing the captcha ID, a text input box for users to fill in the captcha, and an image display for the captcha.<img>Label.

You can refer to the following code snippet and insert it into the appropriate position in your comment or message form:

<div style="display: flex; clear: both; align-items: center; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #ddd; background-color: #f5f5f5;" alt="验证码" title="点击刷新验证码"/>
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                // 确保响应是JSON格式，并检查是否有错误
                if (!response.ok) {
                    throw new Error('网络请求失败或验证码API返回错误');
                }
                return response.json();
              })
              .then(res => {
                if (res.code === 0 && res.data) {
                    document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                    document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                } else {
                    console.error("获取验证码失败:", res.msg || "未知错误");
                    // 可以在这里更新图片为错误提示或占位符
                }
              })
              .catch(err => {
                console.error("获取验证码过程中发生错误:", err);
                // 可以在这里更新图片为错误提示或占位符
              });
    });
    // 页面加载时自动获取验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

The function of this code is:

  • captcha_idHidden field：It will be used to store the unique identifier for each generated captcha, and this ID will be sent along with the captcha filled in by the user to the backend for verification.
  • captchaText Input Box：This is the place where the characters seen in the user input image are displayed.
  • get-captchaImage Label：This label will display the verification code image generated by the backend.
  • JavaScript section:
    • It first adds a click event listener to the captcha image. When the user clicks the image, it willfetchrequest/api/captchaan interface from the backend to get a new captcha image URL and the correspondingcaptcha_id.
    • Get the data after it updates<img>TagssrcAttribute to display the new captcha image and update the hidden input boxcaptcha_idthe value.
    • document.getElementById('get-captcha').click();This line of code ensures that a click event is triggered immediately when the page is first loaded, thereby automatically loading and displaying the first captcha image.

If you are accustomed to using jQuery, the JavaScript part can also be written like this: 

<script>
  // jQuery 调用方式
  $(document).ready(function() {
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) {
          $('#captcha_id').attr("value", res.data.captcha_id);
          $('#get-captcha').attr("src", res.data.captcha);
        } else {
          console.error("获取验证码失败:", res.msg || "未知错误");
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error("获取验证码过程中发生错误:", textStatus, errorThrown);
      });
    });
    // 页面加载时自动获取验证码
    $('#get-captcha').click();
  });
</script>

Please ensure that the above code snippet is placed in the comment or message form on your website.<form>Label inside, and the corresponding JavaScript library has been introduced in the page (if using jQuery version).After completing these modifications, your message and comment features will have captcha protection.

Through these two simple steps, your security CMS website will effectively filter out a large amount of automated spam information, providing your users with a cleaner and more friendly interactive space.

Common Questions (FAQ)

  1. Q: Why does the captcha image not display after I follow the steps?A: If the captcha image is not displayed correctly, first check if the "Turn on comment captcha feature" is enabled on the back end. Next, check the console (Console) in the browser developer tools (usually opened by pressing F12) for any JavaScript errors, or in the "Network" tab./api/captchaRequest whether the image data has been successfully returnedcaptcha_id. Also, make sure that the HTML structure and JavaScript code are pasted correctly in your template file, especiallyidProperty matching is correct.

  2. Q: What types of captcha are supported by AnQi CMS? Can it be changed to advanced verification methods like sliding verification?A: Currently, the captcha function built into the security CMS provides basic captcha based on image character recognition.This verification method is simple to deploy and reliable.If you need more advanced verification methods, such as sliding verification, image verification, or SMS verification code, it may require secondary development or integration with third-party verification services to achieve this, which will involve deeper code modifications.

  3. Q: Will enabling captcha have an impact on the website's SEO?A: Generally speaking, adding a captcha to the comment or message function has a negligible impact on the SEO of the website.Search engine crawlers will not interact directly with captcha when crawling web content.The main impact of the captcha is on the behavior of users submitting forms.If the captcha design is too complex or difficult to recognize, it may slightly affect the user experience and indirectly affect user activity, but for the vast majority of legitimate users, it is acceptable for the cleanliness of the website environment.