当网站的留言板或评论区被大量垃圾信息侵扰时，图形验证码无疑是一种简单而有效的防御手段。它能有效识别出是人类用户还是自动化程序，从而阻止恶意刷屏或垃圾评论。安企CMS深知网站安全的重要性，因此在系统中集成了图形验证码功能，让我们可以轻松地为表单添加这一层保护，提升网站的整体安全性。

第一步：在安企CMS后台启用验证码功能

要为留言或评论表单添加图形验证码，我们首先需要在安企CMS的后台管理界面中激活这项功能。这个过程非常直观。

登录您的安企CMS后台，您会发现左侧导航栏中有一个名为“功能管理”的菜单项。点击进入后，在列出的众多功能中，您会看到“网站留言管理”和“内容评论”这两个选项。图形验证码通常可以在这两个功能的设置中找到。进入相应的设置页面，您会看到一个明确的选项，例如“开启留言评论验证码功能”，勾选这个选项并保存您的更改。这样，系统层面就已经启用了验证码服务。

第二步：在前端模板中集成验证码显示

后台启用验证码只是第一步，要让验证码真正显示并发挥作用，我们还需要在网站的前端模板文件中进行一些小小的修改，告诉系统在哪里显示验证码，以及如何获取新的验证码图片。这需要我们对安企CMS的模板结构有所了解。

通常来说，涉及到留言功能的模板文件可能是 guestbook/index.html（用于独立留言页）或者在文章详情页 archive/detail.html 中包含的评论区域。具体的文件路径可能因您使用的模板而异，但核心逻辑是相同的，即找到用户提交表单的 <form> 标签内部。

我们需要在表单的适当位置，比如用户名、邮箱和评论内容等字段下方，添加验证码相关的HTML元素和JavaScript代码。这些代码会创建一个隐藏字段用于存储验证码会话ID，一个文本输入框供用户输入验证码，以及一个图片标签用于显示验证码图形。

下面这段代码可以直接复制粘贴到您的表单模板中，放置在您认为合适的位置：

<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>

如果您网站的模板集成了jQuery库，也可以使用更简洁的jQuery写法来处理JavaScript部分：

<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>

这段代码的作用是：

  • captcha_id (隐藏字段): 这是一个不可见的字段，用于存储每次生成的验证码的唯一标识。当用户提交表单时，这个ID会连同用户输入的验证码一起发送到服务器，让服务器知道用户提交的是哪个验证码挑战。
  • captcha (文本输入框): 这是用户输入从图片中看到的验证码的地方。required 属性确保用户必须填写此字段。
  • get-captcha (图片标签): 这个 <img> 标签会显示图形验证码。初始时 src 是空的，通过JavaScript加载。点击图片时，JavaScript会请求一个新的验证码图片，并更新 src 属性，让图片刷新。
  • JavaScript 代码: 负责与安企CMS后台的 /api/captcha 接口进行交互。当页面加载时，它会自动请求一个验证码；当用户点击验证码图片时，它会再次请求一个新的验证码，以防用户看不清。

完成这些修改后，保存您的模板文件。如果您使用了缓存，请记得清除相关缓存，以确保修改能及时生效。

第三步：验证集成效果

所有修改完成后，刷新您的网站前端页面，访问包含留言或评论表单的页面。您应该能清晰地在表单中看到一个图形验证码图片和对应的输入框。

尝试提交一次留言或评论。如果验证码输入错误，系统会给出相应的提示，表明验证码功能已正常工作。如果输入正确，则留言会正常提交。这意味着您已成功为您的安企CMS网站集成了图形验证码功能，有效提升了表单的安全性。

常见问题 (FAQ)

  1. **Q: 为什么按照步骤操作后，我的页面上还是不