图形验证码服务接入（二）防水墙接入

业务流程时序图

防水墙业务时序图

1）客户端完成初始化
2）用户完成验证
3）获取验证结果（ticket/randstr）
4）回传服务端对票据进行合法性校验

接入方法

服务端

服务端接入，可参考 官方文档

服务端仅需要对前端验证完成后获取的参数，进行校验即可。

票据校验接口：GET https://ssl.captcha.qq.com/ticket/verify

下面是使用 superagent 请求库封装的的验证方法。

  public async verify(params:VerifyParams) {
    const response = await superagent
      .get(this.base_URL)
      .query({
        aid: this.aid,
        AppSecretKey: this.secret_key,
        Ticket: params.ticket,
        Randstr: params.randstr,
        UserIP: params.user_ip,
      })
      .send();

      const result = JSON.parse(response.text);

      const res_code = +(result.response);

      let is_pass = false;
      switch (res_code) {
        case 0:
          is_pass = false;
          break;

        case 1:
          is_pass = true;
          break;
      
        default:
          is_pass = false;
          break;
      }

      return is_pass;
  }

Web端接入

防水墙客户端接入方式比较丰富。

主要有两种，第一种是通过生成验证码对象，进行验证码的操作；第二种是自动注入事件到DOM节点。

对于有特殊需求的场景（比如，需要控制验证码的显示与隐藏）建议使用第一种。

首先引入防水墙的 JS SDK 文件。

方式一 操作验证码对象

1）初始化对象

// 初始化对象 方法1
const captcha1 = new TencentCaptcha('appId', function(res) {/* callback */});

// 初始化对象 方法2
const captcha1 = new TencentCaptcha(
    document.getElementById('TencentCaptcha'),
    'appId',
    function(res) {/* callback */},
    { bizState: '自定义透传参数' }
);

// 初始化对象 方法3
// 绑定一个元素并自动识别场景id和回调
// 验证码会读取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可选)自动初始化
const captcha1 = new TencentCaptcha(document.getElementById('TencentCaptcha'));

当初始化对象时，传入DOM节点时，Captcha 对象会给当前节点注册 click 事件，点击DOM节点时，会显示验证码。

2）显示验证码

captcha1.show(); // 显示验证码

方式二 自动注入事件

1）注册节点

验证

2）将 data-cbfn 中命名的回调注册到全局中（侵入性真大 (╯°□°）╯︵┻━┻）

    window.callback = function (res) {
      console.log(res)
      // res（未通过验证）= {ret: 1, ticket: null}
      // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
      if (res.ret === 0) {
        console.log('验证成功');
        const { ticket, randstr } = res;

        $.ajax({
          type: 'get',
          url: 'http://localhost:4000/waterproof-wall/validate',
          data: {
            ticket,
            randstr,
          },
          success: (res) => {
            console.log('验证成功', res);
          },
        });

      } else if (res.ret == 1) {
        console.log('验证失败');
      }
    };

需要注意的地方

本地接入测试时，极容易被防水墙的安全策略误伤，导致无法完成验证。因此，在本地开发时，可以将「恶意安全等级」调成「体验优先」。

配置路径：
后台 -> 配置中心 -> 安全配置 -> 恶意拦截等级

安全配置

总结

防水墙的接入文档非常详细、接入方式也较为简单，而且免费。
缺点是，防水墙处于推广阶段，每小时只有2000次安全防护。而且验证码服务出现问题时，不能快速联系到客服人员进行排查问题。
对于个人网站而言，防水墙已能满足需求。但是对于商业用户还是推荐服务较为稳定的商业付费服务。

相关系列文章

• 图形验证码服务接入（一）极验接入
• 图形验证码服务接入（二）防水墙接入
• 图形验证码服务接入（三）腾讯天御接入
• 图形验证码服务接入（四）阿里云盾接入

参考资料

• Web前端接入
• Node 接入指引