google recaptcha-v2

最近在给公司的网页把传统的输入字符数字的验证码改google reCAPTCHA验证,就写写我学到的和一些我的理解！说得不好请勿怪！有兴趣可以的去
https://developers.google.com/recaptcha/docs/display官网看看。

一、是recaptcha密钥的申请https://developers.google.com/recaptcha。需要登录google账号哦！

申请到密钥后，就是使用了。这https://developers.google.com/recaptcha/docs/display有介绍的。不过我还是再回顾一下。

二、 div+class 的简单使用与recaptcha前端验证

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
   var recaptchaBox = doucument.getElementById("recaptchaBox");
   //验证成功回调事件，用data-callback绑定
   var verifyCallback = function (response) {
        recaptchaBox.style.border = "";
        document.getElementById("resStr").innerText = response;     //输出一下，看看这验证通过后，返回的验证码
   }
　　function btnClick() {
      var res = grecaptcha.getResponse();
      if (!res) {
        alert("请完成recaptcha验证！");
        recaptchaBox.style.border = "1px solid red";
        return;
      }
   }
</script>

<div id="recaptchaBox"><div class="g-recaptcha" data-sitekey="your_site_key" data-callback="verifyCallback"></div></div>
<span id="resStr"></span>
<button type="button" id="btn" onclick="" runat="server">button-btn</button>

google提供的grecaptcha.getResponse()方法的返回值，在验证通过时，与回调事件中response相同。验证不通过则返回值为空，该方法可用于在前台判断recaptcha验证是否通过。

二、onload事件与主题(风格)

<script type="text/javascript">
 　　var onloadCallback = function () {
　　　　grecaptcha.render('recaptchaId', {
　　　　　　'sitekey': '网站密钥',
　　　　　　'callback': '验证通过，回调事件',
　　　　　　'theme': '目前主题是dark或light，默认为light'
　　　　});
　　};
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"  async defer></script>

<div id="recaptchaBox2"><div id="recaptchaId"></div></div>

onload事件是提供id来加载recaptcha小窗口的，https://www.google.com/recaptcha/api.js 加载完成开始执行onload事件，onload是异步执行的。

在div+clas+'data-size'里，是加载完成api.js，异步查找到div+clas+'data-size',然后调用相关事件。

三、api.js的可选参数render=onload/explicit

根据google reCAPTCHA官网对render参数的介绍，翻译后：“可选的。 是否显式呈现窗口小部件。 默认为onload，这将在它找到的第一个g-recaptcha标记中呈现小部件。”

从这里可以看出，render至少在表面上时可选的，实际上却是不是如此的，看“默认为onload”就知道了，你在引用https://www.google.com/recaptcha/api.js时没有写，不代表render它就没用到，因为它的值默认为onload。就像recaptcha的主题一样，它只是在你看不到的地方调用了。

另外也要注意一下，explicit为显式呈现窗口小部件，那么onload就是非显式呈现喽。去看看英文翻译：onload负载，explicit明确的

一起来看看下面的几个区别：注意参数render的值和是否使用onload事件

<h3>The First One</h3>
<script src="https://www.google.com/recaptcha/api.js" async="async"></script>
<div class="g-recaptcha" data-sitekey="your_sitekey"></div>

<h3>The First Two</h3>
<script src="https://www.google.com/recaptcha/api.js?render=onload" async="async"></script>
<div class="g-recaptcha" data-sitekey="your_sitekey"></div>

<h3>The First Three</h3>
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async="async"></script>
<div class="g-recaptcha" data-sitekey="your_sitekey"></div>

The First One 和 The First Two 没什么区别，都能正常呈现，而The First Three。

在这里我还要提醒下哦，不能几个render参数值不同的在同一个页面一起运行，不然不能看出来是否呈现哦！
因为这样得到的结果是都正常呈现，只是呈现的有着时间上的差异。下面也一样的啦！下面的onload事件，我就省略啦。

<h3>The Second One</h3>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async="async"></script>
<div id="grecaptcha1"></div>

<h3>The Second Two</h3>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=onload" async="async"></script>
<div id="grecaptcha2"></div>

<h3>The Second Three</h3>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="async"></script>
<div id="grecaptcha3"></div>

 这一次的只有The Second Three能正常呈现，说明了有onload事件时，需满足render=explicit；而没有onload事件时，满足render=onload。

在grecaptcha.render("",{})方法中，'site-key'被配置成了，必要参数呢！
具体的是为啥，我这菜鸟不知道，我没有特别去破解过那些封包，要是哪位大神知道，麻烦给我留个言，菜鸟我在这先谢过啦。

四、直接后台验证

<script type="text/javascript">
    var onloadCallback = function () {
    　　grecaptcha.render('recaptcha', {
       　　'sitekey': 'your_site_key',
　　　　　　'callback': function () { document.getElementById("recaptchaBox").style.border = ""; }
　　　　});
　　};
　　function proxyButton() {
　　　　var res = grecaptcha.getResponse();
　　　　if (!res) {
　　　　　　alert("请完成ReCaptcha验证！");
　　　　　　document.getElementById("recaptchaBox").style.border = "1px solid red";
 　　　　　　return;
　　　　}
　　　　$("#hidd_response").val(res);
　　　　 __doPostBack('button', '');
　　}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>        

<div id="grecaptchaBox" style="width: 302px; height: 76px; padding: 1px;">
　　<div id="grecaptcha" style="width: 304px; height: 78px;"></div>
</div>
<input type="button" id="button" value="button" runat="server" onclick="return proxyButton();" onserverclick="btnClickServer" />
<asp:HiddenField ID="hidd_response" runat="server" Value="" />

 

 #region 获取返回的字符串

    [WebMethod]
    protected string VerifyCaptcha(string response)
    {
        string res = string.Empty;
        string secret = "6LcoyGoUAAAAANIlt2aFc7khDwUfBG-cabvUBihS";

        Dictionary<string, string> parameters = new Dictionary<string, string>();

        parameters.Add("secret", secret);
        parameters.Add("response", response);

        string url = "https://www.google.com/recaptcha/api/siteverify?secret=" + secret + "&response=" + response;
        return (new WebClient()).DownloadString(url);
    }
    #endregion

    #region 转换为json
    protected bool verifyPast()
    {
        string resStr = VerifyCaptcha(this.hidd_response.Value);

        Newtonsoft.Json.Linq.JObject jObject = Newtonsoft.Json.Linq.JObject.Parse(resStr);
        if (jObject["success"].ToString().ToLower() == "true")
            return true;
        else
            return false;
    }
    #endregion

在这里，我并没有将 “var res = grecaptcha.getResponse()”作为json/jsonp类型数据传值给后台，而是直接使用一个隐藏控件来存储它的值，在后台，就可以直接获取到这个值。

还有一点要注意，获取到的每一个“var res = grecaptcha.getResponse()”能且只能返回一次“success:true”，后面再用这个res去获取验证码返回的都是“success:false”

嗯，这里来点番外，据说这个https://www.google.com/recaptcha/api/siteverify验证使用什么T3技术啥的，所以这个.NET Framework2.0版本是不能访问该网站的；3.0的我不知道，没试过，4.0的是可以滴。

 要是想看 “var res = grecaptcha.getResponse()”作为json/jsonp类型数据传值给后台，可以去看看这2个：http://www.pdwzjs.com/news/731.html，https://katyusha.net/archives/391.html

(⊙o⊙)…，差点忘了一个，语言设置，只要在引入api.js是在后面加上‘hl=xx’就行了，别忘了将 xx 替换掉哦，语言库：https://developers.google.com/recaptcha/docs/language 。

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