The comment section and message board of the website are important channels for users to interact 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.(CAPTCHA) is an effective barrier against such problems, as it distinguishes between human users and malicious robots by requiring users to complete a task that is easy for humans but difficult for computers.
For a website built using Anqi CMS, integrating captcha is not a complex matter.The Anqi CMS system provides a concise 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 on your Anqi CMS website.
Step 1: Enable the captcha function in the Anqi CMS background
To allow the front-end form to use captcha, we first need to perform simple configuration in the Anqi CMS admin 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 and navigate to『Backend Settings』→『Content Settings』. On this page, you can find a name called『Comment Verification Code for Messages』Select the option. Make sure to check or enable the feature and save the settings. This step is crucial for activating the system's built-in captcha mechanism to ensure smooth interaction between the frontend code and the backend.
Step 2: Modify the front-end template, integrate captcha display and interaction
After completing the backend settings, we need to modify the frontend comment or message form template so that users can see and enter the captcha. Usually, these forms are located in specific files of your website theme template, such asguestbook/index.htmlUsed for the comment form, or on the article detail page.archive/detail.htmlFind the comment area.
1. Insert the HTML structure of the captcha.
Inside the comment or message form you find, i.e.<form>Between tags, find the appropriate position to insert the following HTML code snippet.Suggest placing it below the user's comment content or contact information, above the submit button, to maintain the logical flow 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 for the captcha.<img>.
<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 is refreshed, this ID will also be updated, and the backend uses this ID to identify and verify whether the captcha entered by the user matches.input type="text" name="captcha" ...: This is where the user enters the captcha.img src="" id="get-captcha" ...This<img>The label is used to display the captcha image itself.srcThe attribute will dynamically load captcha images via JavaScript.id="get-captcha"It is the identifier used by JavaScript to get this image element.cursor: pointer;It provides a visual cue that the user can click on to refresh the image.
2. Add JavaScript code to implement dynamic captcha loading and refreshing
In order for the captcha image to be dynamically loaded and refreshed, we need a simple JavaScript code.This code will request the captcha image and its corresponding ID from the Anqi CMS API and update it to the frontend page.
Method one: Use modern JavaScript (Fetch API)
If you tend to use modern JavaScript features and your website has not introduced large JavaScript frameworks (such as jQuery), you can usefetchThe API is used to request the captcha. The following code should be placed directly below the HTML snippet 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>
Method two: Use jQuery (if jQuery has been included on your website)
If your website has already introduced the jQuery library, using jQuery to handle it will be more convenient and concise. Similarly, place the following code immediately below the HTML fragment:
<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, the function will be triggered.fetch('/api/captcha')or$.get('/api/captcha', ...): This is sending to the Anqin CMS backend/api/captchaInterface sends a request to get new verification code data.res.data.captcha_idandres.data.captcha: The data returned by the backend contains,captcha_idIs 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", ...)：“Obtained the followingcaptcha_idUpdate it to the hidden input box.document.getElementById('get-captcha').setAttribute("src", ...)or$('#get-captcha').attr("src", ...)：“Set the obtained captcha image URL to<img>label'ssrcThe attribute is used to display a 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 after the page is loaded, 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 they are both included in a<form>Within the tag. Save and upload the modified template file to overwrite the original file.
Refresh your front-end page, visit the comments or message area, and you should see a captcha image and the corresponding input box.Try clicking the captcha image, it will refresh and display a new captcha.Finally, try to submit the form (you can deliberately enter an incorrect captcha), if the captcha is incorrect, the system will prompt you to re-enter.This indicates that the captcha function has been successfully integrated and is working normally.
By enabling the captcha feature on the Anqi CMS backend and cleverly embedding the corresponding HTML structure and JavaScript logic in the front-end template, you can build an effective security line for the interactive area of the website. This