谷歌 google验证码 reCAPTCHA V2 隐藏式 对接

相对于复选框式的，该插件还支持隐藏式的。

基本型

基本型是最简单的一个方式，它需要先将js文件引入，不能异步，并且要开启自动加载组件，基本就是把一个组件绑定在一个按钮元素上，而且这个隐藏式，还需要单独申请一个隐藏式的key，自行申请。

<script src="https://www.recaptcha.net/recaptcha/api.js"></script>
<script>
  function onSubmit(token) {
    console.log(token)
  }
</script>

<button class="g-recaptcha" data-sitekey="第一个key" data-callback='onSubmit'>Submit</button>

先引入，并创建好成功的回调函数，然后元素绑定，class一定不要漏写了。

回调函数返回一个token，也还是判断length。

这样的方式有一个问题，就是如果该元素的click事件被人提前截取了可能会导致这个方法无效

异步基本加载

<script>
  function onloadCallback() {
    grecaptcha.render('submit', {
      'sitekey': '第一个key',
      'callback': onSubmit
    });
  };
  function onSubmit(token) {
    console.log(token)
  }
</script>

<input id='submit' type="submit" value="Submit">

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

使用了这种方式，在不使用异步加载自己手动渲染的情况下我们没办法使用grecaptcha.getResponse()的方式去判读是否验证通过，我们可以使用grecaptcha.execute();的方式去触发一次判断，然后成功通过后触发回调函数，从而进行判断。

grecaptcha.execute();接受一个opt_widget_id参数，不写默认为第一个。