外贸网站建设,外贸网站建设公司,跨境电商独立站

使用谷歌的reCAPTCHA ，只需要三步操作

第一步：https://www.google.com/recaptcha/admin/site/760741443/setup

上官网注册一个账号并申请密钥。我选择的是V2版本

第二步：前端代码

1：引入：JS

 <script src="https://www.recaptcha.net/recaptcha/api.js?hl=en" async defer></script>

2：添加代码：

   <div class="g-recaptcha" 
     data-sitekey="你的密钥"
     data-theme="dark" 
     data-size="normal"
     data-callback="onSuccess"
     data-expired-callback="onExpired"
     data-error-callback="onError">
</div>

       <script>
  // 1. 验证成功时触发
  function onSuccess(token) {
    console.log("用户验证成功，获得的 Token 为: " + token);
    // 这里可以把提交按钮解禁
    document.getElementById("submitBtn").disabled = false;
  }

  // 2. 验证过期时触发
  function onExpired() {
    alert("验证已过期，请重新勾选！");
    // 这里可以重新禁用提交按钮
    document.getElementById("submitBtn").disabled = true;
  }

  // 3. 发生错误时触发
  function onError() {
    alert("验证码加载失败，请检查网络或刷新页面！");
  }
</script>

第三步：后端验证

在后端的控制器中添加：

    // 留言新增
    public function index()
    {
        if ($_POST) {
            
            if ($this->config('message_status') === '0') {
                error(get_language('form_status')[0]);
            }
            
            
            // === 【新增】Google reCAPTCHA 验证逻辑 ===
            // 1. 获取前端自动生成的验证 Token
            $recaptchaResponse = post('g-recaptcha-response');
            
            if (!$recaptchaResponse) {
                alert_back('请先完成人机验证！');
            }

            // 2. 准备发送给 Google 验证接口的数据
            $secretKey = "你的KEY"; // ⚠️【必填】请替换为你 reCAPTCHA 后台的“密钥/Secret Key”（注意不是 Site Key）
            $verifyUrl = 'https://www.recaptcha.net/recaptcha/api/siteverify'; // 国内服务器建议用 .net，国外用 .google.com

            $postData = array(
                'secret' => $secretKey,
                'response' => $recaptchaResponse,
                'remoteip' => get_user_ip() // 获取当前访问用户的 IP 地址
            );

            // 3. 发起请求并解析 Google 返回的 JSON 结果
            $response = Http::post($verifyUrl, $postData);
            $responseData = json_decode($response, true);

            // 4. 判断人机验证是否通过
            if (!$responseData || !isset($responseData['success']) || !$responseData['success']) {
                alert_back('人机验证失败，请重试！');
            }
            // === 【新增结束】 ===
            
            // 读取字段 需要提前读取获取相关自定义信息
            if (! $form = $this->model->getFormField(1)) {
                alert_back(get_language('form_emptyfield')[0]);
            }

完成