不可见的google Recaptcha和ajax表单

Question

  <form id="my_form">
    <input type="text" id="field1" />
    <input type="submit" value="submit" />
  </form>

document.getElementById("my_form").onsubmit = function(e) {
  e.preventDefault();

  var xhr = new XMLHttpRequest();
  //.............. send request to a server

在文档中，它假定表单是普通表单，而不是Ajax。到底应该如何将不可见的reCaptcha集成到我的ajax表单中？例如：

  <form id="my_form">
    <input type="text" id="field1" />
    <div class="g-recaptcha" data-sitekey="12345" data-callback="????></div>
    <input type="submit" value="submit" />
  </form>

特别是，我应该为“数据回调”处理程序指定什么？同样，在文档中，it data-callback提交了一个表单，但是是一个普通的表单，而我的表单是Ajax。我需要“数据回调”吗？我不应该在处理程序中调用recaptcha吗？怎么做？

有“render”、“getresponse”和“execute”。我应该用哪一个？从文件上看不清楚。

Answer 1

我同意“看不见的”recaptcha文档不够全面。在了解如何使用它之前，我不得不花一些时间在“可见”recaptcha的代码示例和文档中挖掘。

让我们先谈谈recaptcha API：

grecaptcha.render(htmlEl,options,inherity)是在页面上呈现验证码HTML的JS API方法。默认情况下，recaptcha脚本将尝试使用class=“g-recaptcha查找任何元素，并尝试立即呈现，但是这种行为可以通过将？render=explicit查询参数追加到recaptcha脚本src URL来覆盖。当recaptcha时，您也可能希望使用此api按需呈现recaptcha html。g-recaptcha元素在脚本加载后的某个时间附加到DOM。此api返回一个ID值，该值可以传递给其他api方法，但如果不传递，则这些api的查找和引用将首先在页面上repcaptcha。

data-callback是一个属性，您可以在其中传递全局命名空间函数的名称，即可以作为窗口['name offunction']访问的某个函数。每次使用令牌值成功验证用户时，将调用此回调函数，该令牌值最终将传递给服务器。这与grecaptcha.getResponse()返回的标记相同，所以从技术上讲，您根本不需要这个函数。但它可以作为回调，让您知道用户已经通过验证，以防您需要更新UI或其他东西。

如果出于某种原因，您不希望从窗口命名空间访问此回调，可以将选项对象中的此方法传递给callback键grecaptcha.render()。注意:options.callback可以接受一个字符串值，该值相当于在HTML中传递data-callback属性，也就是说，is必须是窗口命名空间中的函数。但是options.callback也可以接受“function”值。

HTML

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>

window.onScriptLoad = function () {
    // this callback will be called by recaptcah/api.js once its loaded. If we used
   // render=explicit as param in script src, then we can explicitly render reCaptcha at this point

    // element to "render" invisible captcha in
    var htmlEl = document.querySelector('.g-recaptcha');

    // option to captcha
    var captchaOptions = {
      sitekey: '6Lck',
      size: 'invisible',
      // tell reCaptcha which callback to notify when user is successfully verified.
      // if this value is string, then it must be name of function accessible via window['nameOfFunc'], 
      // and passing string is equivalent to specifying data-callback='nameOfFunc', but it can be
      // reference to an actual function
      callback: window.onUserVerified
  };

    // Only for "invisible" type. if true, will read value from html-element's data-* attribute if its not passed via captchaOptions
    var inheritFromDataAttr = true;

    // now render
    recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};

// this is assigned from "data-callback" or render()'s "options.callback"
window.onUserVerified = function (token) {
    alert('User Is verified');
    console.log('token=', token);
};


// click handler for form's submit button
function onSubmitBtnClick () {      
  var token =   window.grecaptcha.getResponse(recaptchaId);

  // if no token, mean user is not validated yet
  if (!token) {
     // trigger validation
     window.grecaptcha.execute(recaptchaId);
     return;
  }

  var xhrData = {
    'g-recaptcha-response': token
    // more ajax body/data here
  };

  // proceed with appending more ajax call data to xhrData and then rest of ajax call process
  // var xhr = new XMLHttpRequest();
  // ... ... .... ... ... 
}