前端接入

Web接入

环境要求

兼容IE9+,Chrome,Firefox,360浏览器,QQ浏览器等主流浏览器。

获取appId

请先进入控制台(或点击右上角控制台按钮)中的“应用管理”或“应用配置”模块,并下图指引位置找到appId。

appid.png

引入JS

<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

注意:
1、cdn.kgcaptcha.com应用服务域名请根据控制台获取进行填写
2、请填写在控制台获取的appid
3、由于验证码 JS 会不定期升级更新,请直接引用凯格 CDN 上的资源,以便及时获得最新安全防护。不要将 JS 文件下载到自己服务器使用。

引入js参数说明

参数 类型 必填 范围 说明
appid String 不限 在控制台应用配置模块获取
plural Number 1-20 设置验证码的对象名,如plural=1,则对象名为kg1,以此类推;不填则为默认对象名kg
sence String ON/OFF sence 无感验证强制开关,ON-开启,OFF-关闭,这将忽略控制台中的设置

示例代码

以下列举三种验证行式接入示例代码:

参数说明

参数 类型 说明
bind String 绑定验证码显示区域,默认规定填写一个id选择器(以 "#" 来定义)
button String 绑定验证码弹窗按钮,默认规定填写一个id选择器(以 "#" 来定义)
float String 触发式仅有,可填top-向上浮出;down-向下浮出

方法

方法 说明
success 验证成功的事务处理
failure 验证失败的事务处理
refresh 点击刷新按钮时触发

具体自定义样式请见应用管理-样式设置章节

验证结果说明

字段名 数据类型 描述
code String 返回code信息
msg String 验证结果信息
token String 验证成功才有:token

code说明

code 描述
0 OK,当前验证成功
1 FAIL,当前验证失败
30000 参数错误
30001 token 参数错误
30002 AppId 不合法
30003 操作超时
30004 行为验证失败
30005 行为验证失败
30006 无法获取来源
30007 域名设置错误,应用设置的域名与当前域名不匹配
30008 参数错误,没有完成前端验证
30009 当前应用授权未开始
30010 当前应用授权已结束
30011 当前应用已被禁用
30012 行为验证失败,无法获取客户端IP
30013 IP被禁用,黑名单IP
30014 IP错误,非白名单IP
30015 行为验证失败,稍候再试
30016 每小时验证次数超出限制
30017 每日验证次数超出限制
30018 每月验证次数超出限制

引入JS(同页面多次使用)

引入多个JS时,请定义 plural 参数,填写范围为数字1-20;通过该参数区分定义对象名,如plural=1,则对象名为kg1,以此类推。

示例代码

// 同时引入多个js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=1&sence=OFF" id="KgCaptcha1"></script>
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=2&sence=OFF" id="KgCaptcha2"></script>
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=3&sence=OFF" id="KgCaptcha3"></script>

<script type="text/javascript">

// 第一个验证码
kg1.captcha({
    // 绑定元素,验证框显示区域
    bind: "#captchaBox1",
    // 验证成功事务处理
    success: function(e) {
        console.log(e);
    },
    // 验证失败事务处理
    failure: function(e) {
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function(e) {
        console.log(e);
    }
}); 

// 第二个验证码
kg2.captcha({
    // 绑定显示区域
    bind: "#captchaBox2",
    // 向上或向下浮出,top|down
    float: "top",
    // 验证成功事务处理
    success: function (e) {
        console.log(e);
    },
    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});

// 第三个验证码
kg3.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton3",
    // 验证成功事务处理
    success: function (e) {
    // 验证成功,直接提交表单
    // form1.submit();
        console.log(e);
    },
    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
</script>

<div id="captchaBox1"></div>
<div id="captchaBox2"></div>
<a id="captchaButton3">点击弹出验证窗口</a>

外部刷新验证码

可以使用 kg.reload() 方法,绑定外部事件刷新验证码

示例代码

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
// 初始化
kg.captcha({
    // 绑定元素,验证框显示区域
    bind: "#captchaBox",

    // 验证成功事务处理
    success: function(e) {
        console.log(e); 
    },

    // 验证失败事务处理
    failure: function(e) {
        console.log(e); 
    },

    // 点击刷新按钮时触发
    refresh: function(e) {
        console.log(e);
    }
});
</script> 

<div id="captchaBox"></div>

// 点击按钮,刷新验证码
<button onclick="javascript:kg.reload(kg.param);">刷新验证码</button>

控制台设置

应用管理-基本设置

5-jbsz.png
参数名 必填 说明
应用名称 当前应用的名称
应用图标 当前应用的应用图标
域名 当前应用的域名,只有设置的域名才可使用该应用
验证类型 当前应用采用的验证类型
验证行式 当前应用采用的样式,可选项有嵌入式(默认)、触发式、弹窗式,具体效果可参见 线上demo
预警信息是否启用 当前应用发送预警信息是否开启
预警信息接收邮箱 当前应用发送预警信息的接收邮箱
预警信息接收手机 当前应用发送预警信息的接收手机
预警数量 当前应用发送预警信息的数量
5-jbsz2.png
参数名 必填 说明
应用服务域名 应用服务域名,由系统自动分配
AppId 当前应用的唯一标识
AppSecret 当前应用的AppSecret
应用状态 当前应用的状态,默认正常状态
有效期 当前应用使用的有效期
demo实例 当前引用的demo实例
接入代码 当前应用的接入代码,可下载SDK文件

应用管理-安全策略

5-aqcl.png
参数名 必填 说明
无感验证 开启:当用户通过验证后,再次访问时,无需验证,直接通过
关闭:用户每次都需手动验证
IP限制 黑名单模式:禁止以下IP访问
白名单模式:只允许以下IP访问
IP列表 限制IP的地址范围或指定IP
风控等级 一级:适用于开发调试及对安全要求一般的应用
二级:标准模式,适用于大部分应用
三级:适用于对安全要求极高的应用
分控异常设置 指定时间内错误记录数超过指定条数时拒绝操作

应用管理-样式设置

5-yssz.png
参数名 必填 说明
图片宽度 必须与滑动框同步宽度、同步修改,单位 px
图片高度 设置底图高度,单位 px
图片圆角边框 设置底图边框圆角,单位 px
间距 设置底图与滑动框之间的间距,单位 px
小方块旋转角度 正角旋转:45|90|180|360 度旋转,图案比较美观,体验度好
随机角度:随机旋转,体验一般,防御力较强
小方块透明度 设置拼图小方块透明度,范围0-1
拼图容错值 设置拼图容错范围,单位 px
水印Logo透明度 设置水印Logo透明度
水印Logo透明度 图片水印Logo
水印Logo位置 设置水印Logo位置
滑动框宽度 设置滑动框宽度,单位 px
滑动框高度 设置滑动框高度,单位 px
滑动框边框样式 依次设置滑动框边框粗细、颜色、线型
滑动框背景颜色 依次设置滑动框边框粗细、颜色、线型
滑动框文字颜色 设置滑动框文字颜色
滑动框文字大小 设置滑动框文字大小,单位 px
边框圆角 设置滑动框边框圆角,单位 px
提示文字 设置操作提示文字
验证成功 设置验证成功提示文字
浏览器不支持 设置浏览器不支持文字
滑动小箭头图标 设置滑动小箭头图标
错误小图标 设置错误小图标
正确小图标 设置正确小图标
正确小图标 设置正确小图标
拖动小箭头图标 设置拖动过程中小箭头图标

应用管理-素材管理

上传图片或从素材库中选择图片作为拼图背景

scgl.png scgl2.png

应用管理-数据监控

通过直观的数据图表查看今日/昨日/近7日/近30日/自定义时间的验证数据

sjjk.png