网站的评论区和留言板是用户与网站互动的重要渠道。然而，这些互动区域也常常受到垃圾信息和自动化程序的困扰，不仅影响了网站的清洁度，也降低了用户的阅读和交流体验。验证码（CAPTCHA）正是抵御这类问题的有效屏障，它通过要求用户完成一项人类容易但计算机难以完成的任务，从而区分人类用户和恶意机器人。

对于使用安企CMS搭建的网站而言，集成验证码并非复杂之事。安企CMS系统提供了简洁明了的路径，让您可以轻松地在前端评论或留言表单中集成验证码功能，从而强化这些互动区域的安全性。下面，我们将详细介绍如何在您的安企CMS网站中实现这一功能。

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

要让前端表单能够使用验证码，我们首先需要在安企CMS的后台管理界面进行简单的配置。这如同为验证码系统开启一道闸门，确保后端服务能够正确生成和验证验证码。

请登录您的安企CMS后台，导航至『后台设置』→『内容设置』。在此页面，您可以找到一个名为『留言评论验证码』的选项。请勾选或开启该功能，并务必保存设置。这一步是激活系统内置验证码机制的关键，确保后续前端代码能顺利与后端交互。

第二步：修改前端模板，集成验证码显示与交互

完成后台设置后，接下来我们需要修改前端的评论或留言表单模板，以便用户能够看到并输入验证码。通常，这些表单位于您网站主题模板的特定文件内，例如guestbook/index.html用于留言表单，或者在文章详情页面的archive/detail.html中找到评论区域。

1. 插入验证码的HTML结构

在您找到的评论或留言表单内部，即<form>标签之间，寻找合适的位置插入以下HTML代码片段。建议放置在用户输入评论内容或联系方式的下方，提交按钮的上方，以保持表单的逻辑流畅性。

这段代码主要包含一个用于存储验证码ID的隐藏输入框、一个供用户输入验证码的文本框，以及一个用于显示验证码图片的<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>

代码解析：

  • input type="hidden" name="captcha_id" id="captcha_id"：这个隐藏字段非常重要，它会存储当前验证码的唯一标识符。每次验证码刷新，这个ID也会更新，后端通过这个ID来识别并验证用户输入的验证码是否匹配。
  • input type="text" name="captcha" ...：这是用户输入验证码的地方。
  • img src="" id="get-captcha" ...：这个<img>标签是用来显示验证码图片本身的。src属性会通过JavaScript动态加载验证码图片。id="get-captcha"是JavaScript获取这个图片元素的标识。cursor: pointer;则提供了用户可点击图片刷新的视觉提示。

2. 添加JavaScript代码，实现验证码的动态加载与刷新

为了让验证码图片能够动态加载和刷新，我们需要一段简单的JavaScript代码。这段代码会向安企CMS的API请求验证码图片及其对应的ID，并更新到前端页面。

方法一：使用现代JavaScript (Fetch API)

如果您倾向于使用现代JavaScript特性，并且您的网站没有引入大型的JavaScript框架（如jQuery），可以使用fetch API来请求验证码。将以下代码紧跟在您刚才添加的HTML片段下方：

<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 (如果您的网站已引入jQuery)

如果您的网站已经引入了jQuery库，那么使用jQuery来处理会更加便捷和简洁。同样，将以下代码紧跟在HTML片段下方：

<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代码解析：

  • document.getElementById('get-captcha').addEventListener("click", ...) 或 $('#get-captcha').on("click", ...)：这行代码为验证码图片添加了一个点击事件监听器。当用户点击验证码图片时，就会触发这个函数。
  • fetch('/api/captcha') 或 $.get('/api/captcha', ...)：这是向安企CMS后端/api/captcha接口发送请求，获取新的验证码数据。
  • res.data.captcha_id 和 res.data.captcha：后端返回的数据中，captcha_id是当前验证码的唯一ID，captcha是验证码图片的URL。
  • document.getElementById('captcha_id').setAttribute("value", ...) 或 $('#captcha_id').attr("value", ...)：将获取到的captcha_id更新到隐藏的输入框中。
  • document.getElementById('get-captcha').setAttribute("src", ...) 或 $('#get-captcha').attr("src", ...)：将获取到的验证码图片URL设置给<img>标签的src属性，从而显示新的验证码图片。
  • document.getElementById('get-captcha').click(); 或 $('#get-captcha').click();：这行代码模拟了一次点击事件，目的是在页面加载完成后，立即请求并显示第一张验证码，而不是等待用户点击。

整合与验证

将上述HTML结构和选择的JavaScript代码片段适当地插入到您的评论或留言表单中，确保它们都被包含在一个<form>标签内。保存并上传修改后的模板文件，覆盖原有的文件。

刷新您的前端页面，访问评论或留言区域，您应该能看到一个验证码图片和对应的输入框。尝试点击验证码图片，它会刷新显示新的验证码。最后，尝试提交表单（可以故意输入错误的验证码），如果验证码不正确，系统会提示您重新输入。这表明验证码功能已成功集成并正常工作。

通过在安企CMS后台开启验证码功能，并在前端模板中巧妙地嵌入相应的HTML结构和JavaScript逻辑，您就能为网站的互动区域构建起一道有效的安全防线。这