As an expert who has been deeply involved in website operation for many years, I know that captcha plays a subtle and crucial role in maintaining website security and user experience.Today, let's delve deeply into the API interface address and calling method of the comment captcha in AnQiCMS (AnQiCMS), so that your website can maintain user operation fluency while ensuring security protection.

Captcha: The invisible guardian in website operation

In the digital age, websites are facing various malicious attacks, among which spam comments and messages are common problems.This not only affects the quality of the website content, increases the burden of manual review, but may also damage the professional image of the website and user trust.Aq Enterprise CMS as a content management system that focuses on security and efficiency naturally also provides a strong captcha function to cope with these challenges.It is like an invisible guardian, silently identifying and preventing malicious behavior, ensuring a pure and healthy user interaction environment on your website.

AnQiCMS API address parsing for comment captcha: fixed and flexible

Many website operators may be curious: 'Is the API interface address of Anqi CMS message verification code fixed? Can I customize it?' The answer is: The core interface address is fixed, but the way it is called and the data returned is flexible.

In Anqi CMS, the API interface address used to obtain the captcha image and its unique identifier is:/api/captcha

This is a standardGETMake a request to the API, when you send a request to this address, it will return two key pieces of information:

  1. captcha_id: The unique identifier for the current captcha image. This ID is different each time a new captcha is obtained and is used by the backend to verify whether the entered captcha is correct.
  2. captcha: Base64 encoded captcha image data, can be used directly as<img>label'ssrcattribute value to display.

This design makes the process of obtaining the captcha standardized and easy to integrate, regardless of how the front-end page changes, the entry point for calling the captcha is always this fixed API.

How to elegantly call the captcha on the front-end page

After understanding the API address, the next step is to cleverly integrate and call this captcha on your safe CMS website front page. The entire process can be divided into several core steps:

1. Enable background feature: the first step of security strategy

Before starting the front-end integration, please make sure that your security CMS backend has enabled the captcha function for comments or reviews. You can do this in the backend'sfunction managementorContent settingsFind and enable it in the relevant modules. This is the prerequisite for the normal operation of the captcha. Otherwise, even if the front-end code is correct, the back-end will not perform verification.

2. Template integration: layout of core elements

In the comment or review form where a captcha needs to be added, we need to place several HTML elements:

  • One<img>Label: Used to display the captcha image.
  • A hidden<input type="hidden">Field: Used to store the backend returned data.captcha_id.
  • One<input type="text">Field: For the user to enter the captcha text they see.

These three work together to form the basic framework of the captcha function. To maintain the neatness and responsiveness of the page layout, some CSS styles are usually used to wrap it.

<div style="display: flex; align-items: center; margin-bottom: 15px;">
  <!-- 隐藏字段，存储验证码ID -->
  <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: 120px; height: 40px; cursor: pointer; border: 1px solid #ddd;" alt="验证码">
</div>

3. Get and update the captcha: The Power of JavaScript

With a skeleton, it needs to inject soul - interact with the API through JavaScript code, dynamically obtain and display the captcha.We hope that users can see the captcha when the page loads and can refresh the image by clicking on it.

Using the native JavaScript calling method: 

<script>
  // 获取验证码图片和隐藏输入框的DOM元素
  const captchaImage = document.getElementById('get-captcha');
  const captchaIdField = document.getElementById('captcha_id');

  // 定义获取并更新验证码的函数
  function fetchCaptcha() {
    fetch('/api/captcha') // 向固定的API地址发起GET请求
      .then(response => response.json()) // 解析JSON响应
      .then(res => {
        if (res.code === 0 && res.data) { // 检查响应是否成功
          captchaIdField.value = res.data.captcha_id; // 更新隐藏字段的captcha_id
          captchaImage.src = res.data.captcha;       // 更新图片src，显示验证码
        } else {
          console.error('获取验证码失败:', res.msg);
          // 可以根据需要添加错误提示
        }
      })
      .catch(err => {
        console.error('请求验证码接口出错:', err);
        // 可以根据需要添加网络错误提示
      });
  }

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

  // 点击验证码图片时刷新
  captchaImage.addEventListener('click', fetchCaptcha);
</script>

If you are used to using jQuery, you can also call it this way:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    const captchaImage = $('#get-captcha');
    const captchaIdField = $('#captcha_id');

    function fetchCaptcha() {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) {
          captchaIdField.val(res.data.captcha_id);
          captchaImage.attr("src", res.data.captcha);
        } else {
          console.error('获取验证码失败:', res.msg);
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error('请求验证码接口出错:', textStatus, errorThrown);
      });
    }

    // 页面加载时和点击图片时获取验证码
    fetchCaptcha(); // 首次加载
    captchaImage.on("click", fetchCaptcha); // 点击刷新
  });
</script>

This JavaScript code is the core of the captcha function, ensuring that the captcha can be dynamically presented to the user and that the unique identifier behind it is passed to the form for subsequent backend verification.

4. Form Submission: The Final Phase of Security Verification

When the user fills out the message content and captcha and clicks the submit button, the form willcaptcha_id(Hidden field) and the user's input of thecaptcha(Text field) sent to the backend simultaneously. The backend program of AnQi CMS will receive this data and process it according tocaptcha_idMatch the stored correct captcha, compare it with the user input to complete the final verification. If the captcha is correct, the message will be processed; otherwise, the user will be prompted with a captcha error.

The perspective of content operators: optimizing user experience

As content operation experts, we must not only pay attention to technical implementation, but also consider user experience.The introduction of captcha is for security, but too much verification and unreadable captcha will greatly reduce the willingness of users to submit comments.

  • Maintain the clarity of the captcha:Ensure that your captcha image is clear and easy to read, avoid blurry or overly complex graphics.
  • Provide a refresh option:As shown in the above code, it allows users to click on the captcha image to get a new one, which can solve the problem of users not being able to see the captcha clearly.
  • Appropriate verification strategy:Not all interactions require captcha. In Anqi CMS, you can flexibly configure which forms require captcha and which can be exempted to balance security and convenience.
  • Clear error message:Provide a friendly and clear error message when the user enters an error, and guide the user to re-enter.

By these meticulous optimizations, we can ensure website security while providing a smooth and friendly interactive environment.The modular and flexible template mechanism of AnQi CMS provides a solid foundation for us to achieve these goals.

Frequently Asked Questions (FAQ)

  1. Q: Where is the API address for the留言验证码 of 安企CMS?/api/captchaIs it universal for all installations?

    • A:Yes,/api/captchaIs the fixed verification code API interface address built-in to Anqicms, and it is universal in all Anqicms systems deployed based on the official version.You do not need to worry about the inconsistency of interface addresses between different installation versions.

  2. Q: Besides comments and messages, can other forms of Anqi CMS (such as Contact Us) also use this captcha API?

    • A:Theoretically, it can be.The Anqi CMS verification code API is an independent mechanism to obtain verification codes.captcha_idand the input of the usercaptchaPerform verification, then you can reuse this API interface. It is recommended to consult the official documentation or backend configuration options for specific form functions to confirm.

  3. **Q: If the user enters verification repeatedly