H5客户端接入

本文为您介绍如何在H5页面通过集成网页端SDK,使用图形认证。

接入步骤

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

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

    <script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/ct4.js"></script>
  3. 创建认证方案:您使用SDK时,会用到密钥参数信息,请在图形认证方案管理控制台,新增图形认证方案,获取密钥参数(包括appIdappKey)信息。

示例

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、ReactDemo示例。

image

方法说明

初始化

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

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

配置参数

参数

是否必填

类型

说明

captchaId

string

验证ID,请传入在控制台创建认证方案后生成的appId

product

string

默认值bind,无需修改。

language

string

设置语言。默认跟随浏览器语言自适应。支持的语言及短码请参见语言及其短码

配置回调

必选:

可选:

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进行二次验证。返回对象包含以下字段:

参数名

类型

说明

lot_number

String

验证流水号。

captcha_output

String

验证输出信息。

pass_token

String

验证通过标识。

gen_time

String

验证通过时间戳。

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

通过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;
    }
  });
});

语言及其短码

语言

Language

语言短码

简体中文

Chinese(Simplified)

zho

繁体中文(hk)

Chinese(Hong Kong)

zho-hk

繁体中文(tw)

Chinese(Taiwan)

zho-tw

美式英文

English

eng

英式英文

English

eng-gb

日语

Japanese

jpn

印尼

Indonesian

ind

韩语

Korean

kor

俄语

Russian

rus

阿拉伯语

Arabic

ara

西班牙语

Spanish

spa

法语

French

fra

德语

German

deu

维吾尔语

Uyghur

udm

巴西葡语

Portuguese(Brazil)

pon

欧洲葡语

Portuguese(Europe)

por

错误码

错误码

描述

60001

配置参数captcha_id有误。请检查初始化时传入的配置参数captcha_id。

60100

内部请求报错。建议:

  • 请保持网络畅通。

  • 检查初始化时传入的配置参数captchaId。

60101

内部请求报错,请保持网络畅通。

60200

皮肤加载失败,请保持网络畅通。

60201

语⾔包加载失败,请保持网络畅通。

60202

验证图片加载失败,请保持网络畅通。

60204

资源加载超时,请保持网络畅通。

60205

ct4.js资源加载超时,请保持网络畅通。

60500

服务端forbidden。