H5 网页 API

最近更新时间:2019-02-27 17:18:04

开发步骤

  1. 页面头部引入 JS
    <script type="text/javascript" src="xxx"></script>
    JS地址获取,请参见 获取 JS地址 文档。
  2. 添加验证码展示控件
    <div id="TCaptcha" style="" ></div>
  3. 初始化并显示验证码
    <script type="text/javascript">
     var capOption = {callback:cbfn, showHeader:true};
     capInit(document.getElementById("TCaptcha"), capOption);
     //回调函数:验证码页面关闭时回调
     function cbfn(retJson) {
         if (retJson.ret == 0) {
         // 用户验证成功
         }
         else {
             //用户关闭验证码页面,没有验证
         }
     }
    </script>

完整页面代码示例

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="xxx"></script>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    </head>

    <body>
        <form action="xxx" id="myform" method="post">
            <input type="hidden" id="ticket" name="ticket" value="">
            <div id="TCaptcha" style="" ></div>
        </form>
        <script type="text/javascript">
            var capOption = {callback:cbfn, showHeader:true};
            capInit(document.getElementById("TCaptcha"), capOption);
            //回调函数:验证码页面关闭时回调
            function cbfn(retJson) {
                if (retJson.ret == 0) {
                    // 用户验证成功
                    document.getElementById("ticket").value = retJson.ticket;
                    document.getElementById("myform").submit();
                }
                else {
                    //用户关闭验证码页面,没有验证
                }
            }
        </script>
    </body>
</html>

JavaScript 接口说明

函数名 描述
capInit(iframe_div, options) 初始化并显示验证码,参数如下:
1. iframe_div(必填):嵌入验证码 iframe 的元素。
2. options: {callback:xxx,showheader:xxx, themeColor:xxxxxx,type:"embed"},json 格式对象
callback: 验证码页面关闭回调函数。用户验证之后,会调用该函数,传入json格式验证参数。
{ret:xxx,ticket:"xxx"}
ret=0 表示用户验证完成,业务可以校验 ticket;
ret=1 表示用户未验证验证码,此时没有 ticket 参数。
参数 ticket 需要提交给业务后台,具体填哪个字段参考后面后台 server 开发部分。
themeColor:设置页面的主题色彩,值为 16 进制色彩,比如 ff572d。设置后页面里的按钮和图标会变成设置的颜色
showHeader:显示验证码页面的 header (返回和帮助,只对手机页面有效)
false:不显示
type:PC 端可选选项,配置验证码的样式。具体样式表现可以查看验证码官网
"point":触发式(默认)
"embed":嵌入式
"popup":弹窗式
pos:设置弹框验证码的位置属性,该参数只对 PC 弹框验证码有效
absolute: 绝对定位
fixed:相对于浏览器窗口的绝对定位
static:静态定位
relative:相对定位
keepOpen:设置验证通过页面属性
false:验证通过刷新(默认)
true:保持显示,不刷新
lang:设置验证码语言类型
简体中文:2052(默认)
繁体中文:1028
英文:1033
capGetTicket() 获取验证码验证结果
返回 Josn 格式数据{ret: 0, randstr: "xxx"}其中 ticket 是验证码验证成功票据,如果票据为空表示验证码验证没通过
capRefresh() 刷新验证码
要求用户重新验证当票据验证失败时也可调用该接口刷新验证码
capDestroy() 无参数,当 dom 被销毁需要重新使用 capInit 的时候,在 capInit 之前调用

接入规范

手机验证码页面要全屏显示,否则验证码页面会显示异常,影响用户使用。