CAPTCHA_CHECK_FAILED：重新验证失败 - SITE_MISMATCH

Question

我正在尝试在我的 ASP.NET MVC 项目之一中实现验证电话号码功能。

在成功生成并验证谷歌重新验证码后，在代码中添加以下内容，在用户的手机号码上发送验证码。

using (var httpClient = new HttpClient())
{
      var data = new { phoneNumber, recaptchaToken };
      var content = new StringContent(JsonConvert.SerializeObject(data), Encoding.UTF8, "application/json");
      var url = $"https://www.googleapis.com/identitytoolkit/v3/relyingparty/sendVerificationCode?key={_configuration["Firebase:WebApiKey]}"";
      var response = await httpClient.PostAsync(url, content);
      var responseContent = await response.Content.ReadAsStringAsync();

      response.EnsureSuccessStatusCode();

      return JsonConvert.DeserializeObject<VerificationResponse>(responseContent) ?? throw new InvalidOperationException();
}

我从

sendVerificationCode

API 请求收到此错误响应，但未在用户的手机号码上收到短信 OTP：

{
"error": {
"code": 400,
"message": "CAPTCHA_CHECK_FAILED : Recaptcha verification failed - SITE_MISMATCH",
"errors": [
 {
"message": "CAPTCHA_CHECK_FAILED : Recaptcha verification failed - SITE_MISMATCH",
"domain": "global",
"reason": "invalid"
  }
 ]
}
}

从 Firebase 复制的 Web API 密钥、站点密钥和站点密钥已在我的 ASP.NET MVC 代码中正确配置。

不确定此错误的根本原因是什么。我正在使用 recaptcha Version3。

有人可以帮忙吗？

Answer 1

根据 Google Cloud 文档 sendVerificationCode 端点期望并适用于使用 getRecaptchaParams Web API 端点生成的 recaptcha 令牌，它不适用于通过任何其他方式生成的 recaptcha 令牌。

以下是我解决上述问题所遵循的步骤。

1. 我创建了一个返回重新捕获参数的 Action 方法。

   public async Task<ActionResult> GetRecaptchaTokenParam()
   {
    using (var httpClient = new HttpClient())
    {
     var apiKey = "Paste your API Key Here";
     var url = $"https://identitytoolkit.googleapis.com/v1/recaptchaParams?key={apiKey}";
     var response =await httpClient.GetAsync(url);
     var responseContent = await response.Content.ReadAsStringAsync();
     response.EnsureSuccessStatusCode();
     var str = JsonConvert.DeserializeObject<TestModel>(responseContent);
     return Json(str, JsonRequestBehavior.AllowGet);
     }
    }
   

2. 在您的 HTML 页面上添加以下 HTML 标签

    <div id="recaptcha-container"></div>
   

3. 这是获取 recaptcha 令牌参数并在用户选中 recaptcha 复选框后生成令牌的 javascript 代码。一旦通过以下代码生成了 recaptcha 令牌，请将其传递给 sendVerification Api 端点以及手机号码。

     function GetRecaptchaToken() {
     return fetch(../MFA/GetRecapatchaParams, {
     method: 'GET'
      })
     .then(response => response.json())
     .then(data => {
     console.log(data.recaptchaSiteKey);
     return data.RecaptchaSiteKey;
    });
   }
   
     GetRecaptchaToken().then(recaptchaSiteKey => {
     grecaptcha.render('recaptcha-container', {
     'sitekey': recaptchaSiteKey,
     'callback': function (response) {
     var recaptchaToken = response;
     // Pass this recaptchaToken parameter to sendVerificationCode API
   
     },
    'expired-callback': function () {
     console.log('Recaptcha response expired.');
     $('.div-recaptcha-container').show();
     $('.div-verification-form-fields').hide();
     }
    });
    });