As website operators, we often encounter a troublesome problem: spam information.Whether it is a message board or a comment section, unsolicited advertisements, malicious links, and meaningless content not only harm the image of the website and increase management burdens, but may also affect the SEO performance of the website.The AnQi CMS was designed with these security needs in mind, incorporating captcha functionality to help us easily meet these challenges.
Today, let's talk about how to integrate this powerful captcha feature into the comment or review form of your CMS website, keeping your site fresh and secure.
English translation: Enable one-click captcha verification feature on the background
The first step in integrating captcha functionality is naturally to perform a simple configuration in the Anqi CMS backend. The entire process is very intuitive and does not require complex settings.
You only need to log in to your security CMS backend, find the left menu item“Function Management”. Here, you can choose to enter according to your needs“Website Message Management”orContent Comment Management. After entering the corresponding management interface, you will see one namedEnable comment/validation code functionThe options. Usually, it is just a simple switch button that can be clicked to set it to the "ON" state.
After completing this step, the backend of Anqi CMS is ready to provide captcha service for your form.Next, we will add the display and interaction logic of the captcha into the front-end template.
Front-end template captcha code integration
Turn on the background feature, and then we need to modify the front-end message or comment form template file, embedding the captcha display element and interaction script into it.The template system of AnQi CMS is flexible and easy to use, even for beginners, it can be mastered quickly.
We need to add several key elements to the form: one for displaying the captcha image:<img>a label, and one for the user to enter the captcha:<input type="text">Label, as well as a hidden field for backend validation.<input type="hidden">.
You can place the following code snippet in your comment form or comment (usually)guestbook/index.htmltemplate file related to comments or comments.<form>Tags inside, make sure they can be submitted with the form:
<div style="display: flex; clear: both">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
<img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" alt="验证码" />
<script>
// 原生JavaScript方式获取验证码
document.getElementById('get-captcha').addEventListener("click", function (e) {
fetch('/api/captcha') // 向安企CMS内置的API接口请求验证码数据
.then(response => {
return response.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.getElementById('get-captcha').click();
</script>
</div>
If your website template uses the jQuery library, you can also use the following more concise JavaScript code:
<div style="display: flex; clear: both">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
<img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" alt="验证码" />
<script>
// jQuery方式获取验证码
$('#get-captcha').on("click", function () {
$.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);
});
});
// 页面加载时自动触发一次点击，显示初始验证码
$('#get-captcha').click();
</script>
</div>
The core logic of this code is:
- Page loads for the first time, JavaScript will send
fetch(or}$.get）to the built-in/api/captchainterface. - The interface will return a containing
captcha_id(The unique identifier of the captcha) andcaptchaThe JSON data of the Base64 encoding or URL of the captcha image. - JavaScript will receive the data after that,
captcha_idfill it into the hidden<input type="hidden">field, and at the same time,captchaImage display in<img>the tag. - If the user finds the captcha unclear, they can click on the image, and JavaScript will request a new captcha again, realizing the refresh function.
- When the user submits the form,
captcha_idand the value entered by thecaptchathe value will be sent to the backend for verification.
Test and verify
After completing the code integration, make sure to conduct detailed testing. You can:
- Visit your website's留言 or 评论 page, check if the captcha image is displayed normally.
- Try clicking on the captcha image to see if it can refresh with a new captcha.
- Try entering an incorrect verification code to submit and see if the system can correctly intercept it.
- Enter the correct verification code to submit to ensure that messages or comments can be published normally.
By following these simple steps, you have provided a robust security layer for the留言 or comment feature of your CMS website, effectively resisting spam intrusion and making your website content environment cleaner and more controllable.
Common Questions (FAQ)
1. How do I solve the problem that the captcha image does not display or refresh fails?
Firstly, please make sure that you have enabled the corresponding captcha function in the "Function Management" -> "Website Message Management" or "Content Comment Management/api/captchaIs the interface request successful (return status code 200)? Common errors may include incorrect interface address spelling, network connection issues, or server-side incorrect response.
2. Can I customize the captcha style?
Of course. The captcha image is usually generated by the security CMS backend, but its external container (for example, the one in our example)<div>and<img>Label style is completely controlled by your frontend CSS. You can modify the example code<div>and<img>on the label,styleproperties, or add custom ones for themclassThen write the corresponding style rules in your CSS file to match the overall design style of your website.
3. Can this captcha feature only be used for message forms? Can I use it on other custom forms?
The captcha feature built into Anqi CMS is designed to be generic, not only applicable to comment and feedback forms, but theoretically also integrable into any custom form that requires user input and prevents spam. As long as you can obtain the HTML template of the form and correctly embed the captcha element and the request script into your custom form according to the HTML structure and JavaScript logic introduced in our article, while ensuring that the form will be submittedcaptcha_idandcaptchaThe field is sent to the backend for verification, and it can be implemented.The specific implementation may require you to have a deeper understanding of the backend verification logic of the Anqi CMS, or to write corresponding backend processing logic for your custom form to call the captcha module.