The comment section and message board of the website are important channels for user interaction with the website.However, these interactive areas are often troubled by spam and automated programs, which not only affects the cleanliness of the website but also reduces the reading and communication experience of users.The CAPTCHA (CAPTCHA) is an effective barrier against such problems, distinguishing between human users and malicious robots by requiring users to complete a task that is easy for humans but difficult for computers.
For websites built with anQi CMS, integrating captcha is not a complex matter.The Anqi CMS system provides a simple and clear path, allowing you to easily integrate captcha functionality into the front-end comment or message form, thereby enhancing the security of these interactive areas.Below, we will introduce how to implement this feature in your security CMS website.
Step 1: Enable the captcha function in the Anqi CMS backend
To enable the captcha for the front-end form, we first need to make simple configurations on the Anqi CMS backend management interface.This is like opening a gate for the captcha system, ensuring that the backend service can correctly generate and verify the captcha.
Please log in to your Anqi CMS backend, navigate to『Backend Settings』→『Content Settings』In this page, you can find a page named『Comment verification code』The options. Please select or enable this feature and make sure to save the settings. This step is crucial for activating the built-in captcha mechanism of the system, ensuring smooth interaction between the frontend code and the backend.
第二步：修改前端模板，集成验证码显示与交互
After completing the background settings, we need to modify the front-end comment or message form template so that users can see and input the captcha. Usually, these forms are located in specific files of your website theme template, such asguestbook/index.htmlUsed for comment forms, or on the article detail page,archive/detail.htmlfind the comment area.
1. Insert the HTML structure for the captcha
within the comment or message form you find,<form>Labels between, find a suitable position to insert the following HTML code snippet.Suggested to be placed below the user input comment content or contact information, above the submit button, to maintain the logical fluency of the form.
This code mainly includes a hidden input box for storing the captcha ID, a text box for users to enter the captcha, and an image display box for the captcha image.<img>Label.
<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; border-right: none;">
<img src="" id="get-captcha" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #e6e6e6; border-left: none; box-sizing: border-box;" alt="点击刷新验证码"/>
</div>
Code analysis:
input type="hidden" name="captcha_id" id="captcha_id"This hidden field is very important, it will store the unique identifier of the current captcha.Each time the captcha refreshes, this ID will also be updated. The backend uses this ID to identify and verify whether the user's input captcha matches.input type="text" name="captcha" ...This is the place where the user enters the verification code.img src="" id="get-captcha" ...This<img>The label is used to display the verification code image itself.srcThe attribute will dynamically load the verification code image through JavaScript.id="get-captcha"Is JavaScript getting the identifier of this image element.cursor: pointer;It provides a visual cue for the user to click on the image to refresh.
2. Add JavaScript code to implement the dynamic loading and refreshing of the captcha
In order for the captcha image to be dynamically loaded and refreshed, we need a simple JavaScript code.This code will make a request to the API of Anqi CMS for a verification code image and its corresponding ID, and update it to the front-end page.
方法一：使用现代JavaScript (Fetch API)
If you tend to use modern JavaScript features and your website does not introduce large JavaScript frameworks (such as jQuery), you can usefetchAPI to request captcha. Place the following code just below the HTML fragment you just added:
<script>
document.getElementById('get-captcha').addEventListener("click", function (e) {
fetch('/api/captcha')
.then(response => 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('Failed to load captcha:', res.msg || 'Unknown error');
}
})
.catch(err => console.error('Error fetching captcha:', err));
});
// 页面加载时自动请求并显示验证码
document.getElementById('get-captcha').click();
</script>
方法二：使用jQuery (if your website has jQuery included)
If your website has already included the jQuery library, using jQuery to handle it will be more convenient and concise. Similarly, place the following code immediately below the HTML snippet:
<script>
// jQuery 调用方式
$('#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('Failed to load captcha:', res.msg || 'Unknown error');
}
}, 'json').fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error fetching captcha:', textStatus, errorThrown);
});
});
// 页面加载时自动请求并显示验证码
$('#get-captcha').click();
</script>
JavaScript code parsing:
document.getElementById('get-captcha').addEventListener("click", ...)or$('#get-captcha').on("click", ...)This line of code adds a click event listener to the captcha image. When the user clicks the captcha image, this function is triggered.fetch('/api/captcha')or$.get('/api/captcha', ...)English is: This is a request sent to the AnQI CMS backend./api/captchaEnglish is: The request to the interface retrieves new verification code data.res.data.captcha_idandres.data.captchaEnglish is: The returned data from the backend contains,captcha_idEnglish is: It is the unique ID of the current verification code,captchaIs the URL of the captcha image.document.getElementById('captcha_id').setAttribute("value", ...)or$('#captcha_id').attr("value", ...)：Obtainedcaptcha_idUpdate to the hidden input box.document.getElementById('get-captcha').setAttribute("src", ...)or$('#get-captcha').attr("src", ...)：Set the obtained captcha image URL to<img>Tagssrcproperty to display the new captcha image.document.getElementById('get-captcha').click();or$('#get-captcha').click();This line of code simulates a click event, the purpose of which is to immediately request and display the first captcha upon completion of page loading, rather than waiting for the user to click.
Integration and verification
Insert the above HTML structure and the selected JavaScript code snippet appropriately into your comment or message form, ensuring that they are both included within a<form>Label inside. Save and upload the modified template file to overwrite the existing file.
Refresh your front-end page, visit the comment or message area, and you should see a captcha image and the corresponding input box.Attempt to click the captcha image, it will refresh and display a new captcha.Finally, try to submit the form (you can intentionally enter an incorrect captcha), if the captcha is incorrect, the system will prompt you to re-enter.This indicates that the captcha feature has been successfully integrated and is working normally.
By enabling the captcha feature in the Anqi CMS backend and巧妙地embedding the corresponding HTML structure and JavaScript logic in the frontend template, you can build an effective security barrier for the interactive area of the website. This