Web&H5

集成前端 JS

将下列代码嵌入关键业务页面的 head 标签内,如登录页、注册页、密码找回页等需要进行人机验证的页面:

<script type="text/javascript">
  (function() {
     _fmOpt = {
        partner: 'testpc', // 合作方标识
        appName: 'testpc_web', // 应用标识
        display: 'bind', // 绑定式
        container: '#captcha', // 指定触发验证码事件的DOM节点
        initialTime: new Date().getTime(),
    };
 
    var fm = document.createElement('script'); 
    fm.type = 'text/javascript';
    // 将Base URL替换为相应环境资源地址
    fm.src ='Base URL' + '?t=' + (new Date().getTime()/600000).toFixed(0);
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(fm, s);
 })();
</script>

Base URL

注意:若您已接入过同盾设备指纹产品,请先删除页面内相关接入代码

触发方式

触发方式说明
绑定式可指定触发验证码事件的Button,如登录/注册/发送短信等按钮
触发式页面会渲染一个名为 点击完成验证 的独立的Button,点击该Button触发验证

参数列表

配置参数是指 JS 接入代码中 _fmOpt 对象中的参数。除集成示例代码中参数基本设置外,您还可以结合以下参数说明做进一步配置。

参数名类型是否必填说明
partnerString合作方标识,由同盾分配
appNameString应用标识,由同盾分配
displayString验证码弹窗展现形式,可选值为 popup/float/custom/bind。具体解释:popup:屏幕居中展示,并且验证码弹窗之外遮罩填充,点击遮罩可关闭验证码;float:浮动展示,验证码展现在指定的 Button 的上方;custom:验证码在 area 指定的 DOM 元素内展现;bind:对应绑定式,验证码触发方式由用户指定的 DOM 元素确定,验证码默认居中展示
containerStringID、Class 或 Tag 形式的 DOM 选择器;对于绑定式,用于指定触发验证码事件的Button的DOM节点;对于触发式,用于指定'点击完成验证'按钮渲染的目标DOM节点
areaStringID、Class 或 Tag 形式的 DOM 选择器;仅display为custom适用,用于指定验证码弹窗渲染的区域
widthString点击完成验证按钮长度,仅对非绑定式有效。默认值 300px,最小值 200px
heightString点击完成验证按钮高度,仅对非绑定式有效。默认值 40px,最小值 30px
langString验证界面语言,目前可选语言为:zh-cn(中文简体),zh-han(中文繁体),en(英文),ja(日文),ko(韩文),默认为zh-cn
bindSucNoFedBoolean绑定式接入时,验证成功后是否返回验证成功的弹框提示;false为有弹框提示,true 为没有弹框提示,默认值为 false
envNumberenv 取值,1 表示线上环境,0 表示沙盒环境,不传则默认为线上;提示:正式发布时,线上环境请删除此变量或设置为 1
closeIconNumber是否显示关闭图标,0 为显示,1 为不显示,默认值 0
closeMaskNumber点击遮罩区域是否可关闭验证码,0 为可以,1 为不可以,默认值 0
mfaIdString如果您已对接MFA产品,请将MFA流程中接口获取的mfa_id赋值给验证码配置参数_fmOpt, 未对接可以忽略;示例: _fmOpt.mfaId = res.data.mfa_id;

方法说明

绑定方法,以下方法可根据需要定义在 _fmOpt 对象上

  • onSuccess(validateToken): 验证成功回调,返回validateToken,示例:
_fmOpt.onSuccess = function (validateToken) {
    ajax('/submit', {
        userName: '***',
        pwd: '***',
        token: validateToken,// 获取到验证成功validateToken,提交至后台进行二次校验 
        blackBox: _fmOpt.getinfo ? _fmOpt.getinfo() : '' // 调用 _fmOpt.getinfo() 获取到设备指纹blackbox,提交至后台
    })
};
  • onFail(msg): 验证码失败回调,可选。回传参数 msg 说明:
msg说明
opFail用户进行滑动或点选验证,验证失败
op2much用户尝试次数过多,需要重新激活验证界面(连续验证失败或刷新10次触发)
noNetwork网络错误
limit系统繁忙
  • beforeValidate: 针对绑定式,在点击按钮后,弹出验证码以前,如果需要相关前置校验,可定义此函数。该函数返回true,继续执行验证码逻辑,false则不再执行。可选,示例:
// 判断用户名或密码为空时,提示用户并返回false,验证码不会被触发
_fmOpt.beforeValidate = function() {
    if ($('#username').val() === '' || $('#password').val() === '') {
        alert('请输入用户名或密码');
        return false;
    }
    return true;
}
  • onReady: 验证码初始化完成回调,可选。
  • onClose: 验证码弹窗关闭回调,可选。

以下方法可根据需要选择调用

  • triggerCaptcha:验证码事件默认绑定在指定的button上,如果需要通过js直接触发,可使用该方法。
_fmOpt.triggerCaptcha(); // 主动触发验证码
  • reset: 重置验证码至初始状态。一般在已通过验证但后端校验错误,或多个验证码等场景下,需要激活验证码重新获取token,示例:
ajax('/submit', {
    userName: '***',
    pwd: '***',
    token: validateToken,
    blackBox: _fmOpt.getinfo ? _fmOpt.getinfo() : '' // 调用_fmOpt.getinfo()获取设备指纹blackbox
  
}, function(success) {
    if (!success) {
        _fmOpt.reset();// 重置验证码,用户需再次请求验证码获取验证token
    }
}
})
  • newCaptcha: 当一个页面需要展示多个验证码时,可以调用此函数初始化新验证码。此时需要传入新验证码配置参数,onSuccess等函数也需要绑定至新验证码对象。示例:
var secondCaptchaObj = {
      display: 'popup',
      container: '#area'
};
// 建议在 _fmOpt.onReady 中触发 newCaptcha 方法
var secondCaptcha = _fmOpt.newCaptcha(secondCaptchaObj);
secondCaptcha.onSuccess = function (validateToken) {
     console.log('第二验证码验证成功! 获取的token为:' + validateToken);
};

FAQ

Q:样式出现问题(例如验证码图片崩坏,布局不居中..)?

如果项目中强制设置全局样式,权重比验证码样式高,会导致样式被覆盖
例如:img {
        width:100% !important;
    }

Q:绑定式,点击按钮验证码没有反应?

1. 验证码配置是否按照对接文档放在头部加载
2. 绑定的按钮元素是否在配置加载时已存在,元素未渲染会导致验证码点击事件没有绑定

Q:验证码验证成功或失败,回调函数未触发?

onSuccess 和 onFail 和其他回调函数,需在初始化时就绑定在 _fmOpt 变量上,否则找不到回调函数,无法触发

Q:用 _fmOpt.newCaptcha创建的验证码实例,回调函数没有触发?

例:var secondCaptcha = _fmOpt.newCaptcha(secondCaptchaObj);
新的验证码回调需绑定在新建的secondCaptcha验证码实例上,不能在绑在_fmOpt上