+
80
-

reCAPTCHA如何添加到自己的网站中进行验证?

800_auto

reCAPTCHA如何添加到自己的网站中进行验证?

网友回复

+
0
-

reCAPTCHA是google推出的人机验证插件,可以用来验证网页访问是否是机器人还是真人,原理就是Google会收集一些鼠标轨迹、网络信息、浏览器信息等等,依靠后端的神经网络判断是机器还是人,绝大多数验证会一键通过,无需像传统验证码一样。

但是reCaptcha使用了google.com的域名,这个域名在国内是被墙的,如果使用可以用Nginx配置反向代理,本文的教程无需自行配置,我们直接使用Google官方的反向代理。 获取代码(这一步需要科学上网,以后不再需要):首先要有Google账号,登录账号并进入这里:https://www.google.com/recaptcha/admin

在register a new site表单里填写验证名(随便命名)、域名(你要使用reCaptcha 的域),type选择v2,下面的钩钩打上,然后Register即可注册。

800_auto

接着打开你刚刚创建的验证,找到Keys,记住你的site-key和select

800_auto 接着可以在客户端和服务端部署了。

客户端部署代码:

需要将your_site_key换成你申请的site key

<html>

  <head>

    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>

    <script type="text/javascript">

      var verifyCallback = function(response) {

        alert(response);

      };


      varBfwOnloadCallback= function() {


        grecaptcha.render('example3', {

          'sitekey' : 'your_site_key',

          'callback' : verifyCallback,


        });

      };

    </script>

  </head>

  <body>


    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->

    <form action="?" method="POST">

      <div id="example3"></div>

      <br>

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

    </form>

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

        async defer>

    </script>

  </body>

</html>

服务端部署代码:

客户端获取验证后的响应令牌后需要提交给后端,后端可以通过请求recaptcha来验证是否通过人机验证操作

api网址:https://www.google.com/recaptcha/api/siteverify 方法:POST

每个 reCAPTCHA 用户响应令牌的有效期为两分钟,并且只能验证一次以防止重放攻击。如果您需要新的令牌,您可以重新运行 reCAPTCHA 验证。

获得响应令牌后,您需要在两分钟内使用以下 API 使用 reCAPTCHA 对其进行验证,以确保令牌有效。 POST 参数 描述

secret 必需的。您的网站和 reCAPTCHA 之间的共享密钥及secret key。

response 必需的。您站点上的 reCAPTCHA 客户端集成提供的用户响应令牌。

remoteip 可选的。用户的 IP 地址。

API响应

响应是一个 JSON 对象: { "success": true|false, "challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) "hostname": string, // the hostname of the site where the reCAPTCHA was solved "error-codes": [...] // optional

}

对于 reCAPTCHA Android: { "success": true|false, "challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) "apk_package_name": string, // the package name of the app where the reCAPTCHA was solved "error-codes": [...] // optional

}

错误码参考

错误代码 描述

800_auto

具体参考:https://developers.google.com/recaptcha/docs/verify

我知道答案,我要回答