Skip to content

Latest commit

 

History

History
78 lines (74 loc) · 4.88 KB

PC 网页 API.md

File metadata and controls

78 lines (74 loc) · 4.88 KB
Raw

开发步骤

  1. 页面头部引入 JS（获取 JS 地址）。
<script type="text/javascript" src="xxx"></script>
  1. 添加验证码展示控件（不同样式体验入口）。
<!--显示验证码的地方预留的最小空间，小于该值会导致显示异常-->
<!--触发式：300px*40px（宽*高）-->
<!--嵌入式：300px*270px-->
<!--弹窗式：300px*310px-->
<!--通过width和height设置验证码初始宽高，未设置会导致显示异常，默认触发式-->
<div id="TCaptcha" style="width:300px;height:40px;" ></div>
  1. 初始化并显示验证码
<script type="text/javascript">
    var capOption={callback :cbfn};
    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>
    </head>

    <body>
        <form action="xxx" id="myform" method="post">
            <input type="hidden" id="ticket" name="ticket" value="">
            <div id="TCaptcha" style="width:310px;height:40px;" ></div>
        </form>
        <script type="text/javascript">
            var capOption = {callback:cbfn, themeColor:"a11bbb"};
            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 之前调用

接入规范

  1. 请不要使用 iframe 页面嵌入验证码。验证码弹出的 iframe 框大小会变化，如果业务使用 iframe 会导致验证码 iframe 页面显示不全。
  2. PC 预留给验证码展示的地方尺寸不能小于 300px（宽）* 310px（高），否则会导致验证码显示异常而影响用户使用。
  3. PC 页面必须设置验证码显示页面初始宽高。