美文网首页
google recaptcha使用

google recaptcha使用

作者: 杨依_1 | 来源:发表于2020-12-17 17:38 被阅读0次
  1. 申请google账号
    访问google首页
    注册账号

  2. 申请google recaptcha秘钥
    2.1. 在浏览器中登录google账号
    2.2 访问https://www.google.com/recaptcha/admin/create
    2.3 填写表单如下。填写完成并提交 【这里用web端的recaptcha V2做演示】
    更正下:填写域名不要加端口号和协议

    image.png
    2.4 提交成功后生成sitekey,该sitekey可以setting里查看
    image.png
  3. 在实践中应用
    两种方式:
    3.1. 页面上自动渲染验证码:

  • 加载recaptcha api脚本
  • 展示recaptcha的dom元素使用“g-recaptcha” class
<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
   <!-->直接使用google的api,需要翻墙<-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   <!-->不能翻墙使用下面的地址<-->
    <script src="https://www.recaptcha.net/recaptcha/api.js?oncallback=renderRecaptcha" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

3.2. 如果你是在模块化的的项目中使用。可以按需动态加载recaptcha 脚本。并手动渲染验证码

// 这里需要注意的是:
// 使用动态加载的方式recaptcha脚本。因为脚本加载是异步,所以在脚本加载完成前,是无法使用recaptcha的api
// 简单的解决方法就是使用setInterval监听recaptcha的是否需加载完成
function listenLoadRecaptcha (onloadcallback) {
  const intervalId = setInterval(() => {
    try {
      console.log('listen recaptcha load');
      const grender = grecaptcha && grecaptcha.render;
      if (grender && typeof onloadcallback === 'function') {
        onloadcallback();
        clearInterval(intervalId);
      }
    } catch (e) {
      console.log('grecaptcha not loaded');
    }
  }, 500);
}
function loadRecaptcha() {
  let script: any = document.querySelector('script[src*="/recaptcha/api.js"]');
  if (!script) {
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
    document.body.appendChild(script);
  }
  listenLoadRecaptcha(function() {
   // 脚本加载完成 渲染验证码。
  // 页面上需要有渲染验证码的dom元素。可以预先在html文档里加上要渲染的dom元素。如果没有可以通过脚本添加
   const $recaptcha = document.createElement('div');
   const recaptchaId = 'recaptcha_test';
   $recaptcha.id = recaptchaId; // 该id在render方法中使用
   document.body.appendChild($recaptcha)
   // render方法参数请参考官方文档:https://developers.google.com/recaptcha/docs/display#render_param
  // 第一个参数可以是:dom的id属性值;或者dom元素本身:$recaptcha
   grecaptcha.render(recaptchaId, {
    sitekey: 'your_site_key', //必填
    hl: 'zh-CN', //配置验证码显示的文本语言。默认是英文
    callback: function() {
      // 验证码验证通过的回调
    },
    ... //其它参数根据需要自行配置
   })
  })
}

运行结果


image.png

验证通过


image.png

遗留了一个问题:
这个验证通过客户端完全可以做了。但是我们用验证码的目的是为了防止api攻击。这里只是介绍了客户端使用google recaptcha展示验证码的功能,具体服务端提供的api如何校验,需要客户端和服务端再协商。
比如:验证码校验通过后,把验证通过的g-recaptcha-token传给服务端并保存,然后在调用api的地方把该token带上,给服务端做校验。这才能体现出验证码的作用来。【这只是我个人的建议方案。有更好的解决方案欢迎在留言里分享。感谢】

相关文章

网友评论

      本文标题:google recaptcha使用

      本文链接:https://www.haomeiwen.com/subject/hodzgktx.html