How to integrate image captcha functionality into the comment or message form to improve security?

When a website's message board or comment section is flooded with spam, the graphic captcha is undoubtedly a simple and effective defense measure.It can effectively identify whether it is a human user or an automated program, thus preventing malicious screen scraping or spam comments.AnQi CMS knows the importance of website security, so it has integrated the graphic captcha function into the system, allowing us to easily add this layer of protection to the form and enhance the overall security of the website.

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

To add a graphic captcha to the comment or feedback form, we first need to activate this feature in the Anqi CMS backend management interface. This process is very intuitive.

Log in to your AnQi CMS backend, and you will find a menu item named "Function Management" in the left navigation bar.After clicking in, among the many listed features, you will see the options of 'Website Message Management' and 'Content Comments'.The graphic captcha is usually found in the settings of these two functions.Enter the corresponding settings page, you will see a clear option, such as 'Enable留言评论验证码function', select this option and save your changes.This, the system level has already enabled the captcha service.

Second step: Integrate captcha display in the front-end template

The background enables captcha verification, but to truly display and activate it, we still need to make some minor modifications to the website's frontend template files, telling the system where to display the captcha and how to obtain new captcha images.This requires us to understand the template structure of Anq CMS.

Generally speaking, template files involving message functions might beguestbook/index.html(Used for independent message pages) or in the article detail pagearchive/detail.htmlThe comment area contained. The specific file path may vary depending on the template you use, but the core logic is the same, that is, to find the form submitted by the user.<form>Inside the tag.

We need to add HTML elements and JavaScript code related to the captcha at the appropriate position on the form, such as below the username, email, and comment content fields.This code creates a hidden field to store the captcha session ID, a text box for the user to enter the captcha, and an image tag to display the captcha image.

The code can be directly copied and pasted into your form template at any suitable position:

<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="form-control" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #ccc; background-color: #f5f5f5;" alt="验证码" />
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                // 确保响应是JSON格式，即使HTTP状态码不是200
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
              })
              .then(res => {
                if (res.code === 0 && res.data) { // 检查API返回的业务逻辑状态
                    document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                    document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                } else {
                    console.error('Failed to get captcha:', res.msg || 'Unknown error');
                }
              })
              .catch(err => {
                console.error('Error fetching captcha:', err);
              });
    });
    // 页面加载后立即获取一次验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

If your website template integrates the jQuery library, you can also use a more concise jQuery syntax to handle the JavaScript part:

<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="form-control" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #ccc; background-color: #f5f5f5;" alt="验证码" />
  <script>
    // jQuery 调用方式
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) { // 检查API返回的业务逻辑状态
          $('#captcha_id').attr("value", res.data.captcha_id);
          $('#get-captcha').attr("src", res.data.captcha);
        } else {
            console.error('Failed to get captcha:', res.msg || 'Unknown error');
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
          console.error('Error fetching captcha:', textStatus, errorThrown);
      });
    });
    // 页面加载后立即获取一次验证码
    $('#get-captcha').click();
  </script>
</div>

The purpose of this code is:

• captcha_id(Hidden field):This is an invisible field used to store the unique identifier for each generated captcha.When the user submits the form, this ID will be sent to the server along with the user's entered captcha, so that the server knows which captcha challenge the user submitted.
• captcha(Text input box):This is where the user enters the captcha seen from the picture.requiredThe attribute ensures that the user must fill in this field.
• get-captcha(Image label):This<img>The label will display the captcha. InitiallysrcIt is empty, loaded through JavaScript. When the image is clicked, JavaScript will request a new captcha image and updatesrcthe property to refresh the image.
• JavaScript code:Responsible for communicating with the Anqi CMS backend's/api/captchaThe interface interacts. When the page loads, it will automatically request a captcha; when the user clicks on the captcha image, it will request a new captcha again to prevent the user from not being able to see it clearly.

After completing these modifications, save your template file. If you have used a cache, remember to clear the relevant cache to ensure that the changes take effect in a timely manner.

Step 3: Verify the integration effect

After all modifications are complete, refresh your website's frontend page, and visit the page that contains a message or comment form.You should be able to clearly see a captcha image and its corresponding input box in the form.

Try to submit a comment or message.If the captcha is entered incorrectly, the system will provide the corresponding prompt indicating that the captcha function is working normally.If the input is correct, the message will be submitted normally.This means that you have successfully integrated the graphic captcha function on your Anqí CMS website, effectively enhancing the security of the form.

Frequently Asked Questions (FAQ)

1. **Q: Why is my page still not working after following the steps?