H5客户端接入

接入步骤

1. 下载SDK：登录号码认证产品控制台，在概览页面右侧API&SDK区域，单击立即下载，进入API&SDK页面，选择图形验证码 > 网页端 > h5，下载并解压得到SDK，网页端SDK即为文件夹内的ct4.js。

2. 资源引入：将网页端SDK上传到您的静态资源服务器上，获取能够访问到网页端SDK的URL，通过script标签的方式引入。

   <script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/ct4.js"></script>

3. 创建认证方案：您使用SDK时，会用到密钥参数信息，请在图形认证方案管理控制台，新增图形认证方案，获取密钥参数（包括appId、appKey）信息。

示例

initAlicom4({
    captchaId: "<YOUR_APP_ID>", // 请填入appId
    product: "bind",
  },
  function(captchaObj) {
    captchaObj
      .onNextReady(function() {
        //验证码ready之后才能调⽤showCaptcha方法显示验证码
      })
      .onSuccess(function() {
        //your code,结合您的业务逻辑重置验证码
        captchaObj.reset();
      })
      .onError(function() {
        //your code
      });
    // 按钮提交事件
    $("#btn").click(function() {
      // some code
      // 检测验证码是否ready后调起验证码
      captchaObj.showCaptcha(); //显示验证码
      // some code
    });
  }
);

完整Demo示例，您可在下载的SDK文件夹中查看，下载文件中同时包含Vue、React等Demo示例。

方法说明

初始化

调用initAlicom4方法，并传入配置参数与回调函数进行初始化。

initAlicom4({
    captchaId: "<YOUR_APP_ID>", // 请填入控制台创建方案后生成的appId
    product: "bind",
  },
  function(captchaObj) {
    // 配置回调
  }
);

配置参数

配置回调

必选：

• onSuccess(callback)：验证成功。

• getValidate：进行服务端二次校验。

• showCaptcha： 调起验证码。

可选：

• onReady(callback)：按钮DOM生成完毕。

• onNextReady(callback)：验证码下一步资源加载完毕。

• onFail(callback)：验证失败。

• onError(callback)：验证出错。

• onClose(callback)：验证被用户关闭。

• reset：重置验证状态。

• destroy：移除验证实例。

onSuccess(callback)

监听验证成功事件，参数callback为函数类型。

initAlicom4({
  // 省略配置参数
  product: 'bind'
}, function(captchaObj) {
  // 省略其他方法的调用
  document.getElementById('btn').addEventListener('click', function() {
    if (check()) { // 检查是否可以进⾏提交
      captchaObj.showCaptcha();
    }
  })
}; captchaObj.onSuccess(function() {
  // 用户验证成功后，进⾏实际的提交⾏为
  // todo
}));

getValidate

获取用户进行成功验证onSuccess所得到的结果，该结果用于进行服务端SDK进行二次验证。返回对象包含以下字段：

其他情况返回false，您可根据该返回值决定是否需要进行下⼀步操作，提交表单或ajax进行⼆次验证。

captchaObj.onSuccess(function () {
  var result = captchaObj.getValidate();
  // ajax伪代码
  $.ajax({
    url: "服务端",
    data: result,
    dataType: "json",
    success: function (res) {
      console.log(res.result);
    },
  });
});

showCaptcha

调起验证码，请对用户所填写的数据进行检查，确认无问题后再调用验证接口。

  document.getElementById('btn').addEventListener('click', function() {
    if (check()) { // 检查是否可以进行提交
      captchaObj.showCaptcha();
    }
  });

onReady(callback)

监听验证按钮的DOM生成完毕事件，参数callback为函数类型。您可根据onReady事件，隐藏“加载验证中”的提示语。

captchaObj.onReady(function () {
  // DOM准备好后，隐藏 #loading-tip元素
  // 仅作示例用，用您适合的方式隐藏即可
  document.getElementById("loading-tip").style.display = "none";
});

onNextReady(callback)

监听验证下一步资源的加载完毕事件，参数callback为函数类型。您可调用本方法，防止因为网络问题导致验证码资源还没有加载完毕时，调用 showCaptcha无法拉起弹窗。

captchaObj.onNextReady(function() {});

onFail(callback)

监听验证失败事件，参数callback为函数类型。failObj操作失败对象包含：

• captcha_id：验证ID，即在控制台创建认证方案后生成的appId。

• captcha_type：验证形式，包括图标点选(icon)、文字点选(word)、字序点选(phrase)、滑动拼图(slide)、九宫格(nine)五种验证形式。

• lotNumber：验证流水号。

captchaObj.onFail(function (failObj) {
  // 对错误信息做⼀些统计
})

onError(callback)

监听验证出错事件，参数callback为函数类型。静态资源加载失败、网络不佳等验证码能捕获到的错误，都会触发onError回调。 该错误对象包含三部分：

• code：错误码。

• msg：提示信息。

• desc：该对象包含detail属性，描述具体的错误信息。

captchaObj.onError(function (error) {
  // 出错啦，可以提醒用户稍后进行重试
  // error 包含code、msg、desc
  // {code: '60000',msg:"用户配置错误"，desc:{ detail: "用户id缺少"} }
});

onClose(callback)

当用户关闭弹出来的验证时，会触发该回调。

captchaObj.onClose(function () {
  // 用户把验证关闭了，这时您可以提示用户需要把验证通过后才能进行后续流程
});

reset

重置验证回到初始状态。当用户验证成功但其他信息不对的时候，如用户名/密码错误或验证出现错误的情况时使用此接口。

captchaObj.onSuccess(function() {
  var result = captchaObj.getValidate();
  // ajax 伪代码
  ajax(
    "/login", {
      lot_number: result.lot_number,
      captcha_output: result.captcha_output,
      pass_token: result.pass_token,
      gen_time: result.gen_time,
      username: "xxx",
      password: "xxx",
      // 其他服务端需要的数据，比如登录时的用户名和密码
    },
    function(data) {
      // 根据服务端⼆次验证的结果进⾏跳转等操作
      if (data.status === "fail") {
        alert("⽤⼾名或密码错误，请重新输⼊并完成验证");
        captchaObj.reset(); // 调⽤该接口进行重置
      }
    }
  );
});

destroy

销毁验证实例，验证相关UI以及验证注册的事件监听器都会被移除。

captchaObj.onSuccess(function() {
  var result = captchaObj.getValidate();
  // ajax 伪代码
  ajax('/login', {
    lot_number: result.lot_number,
    captcha_output: result.captcha_output,
    pass_token: result.pass_token,
    gen_time: result.gen_time,
    username: 'xxx',
    password: 'xxx'
    // 其他服务端需要的数据，比如登录时的用户名和密码
  }, function(data) {
    // 根据服务端⼆次验证的结果进行跳转等操作
    if (data.status === 'fail') {
      alert('⽤⼾名或密码错误，请重新输入并完成验证');
      captchaObj.reset(); // 调用该接口进行重置
    } else if (data.status === 'success') {
      // 结合业务逻辑，判断是否需要移除验证
      captchaObj.destroy();
      captchaObj = null;
    }
  });
});

错误码