集成前端 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

地区	Base URL
中国	https://static.tongdun.net/captcha/main/tdc.js
北美	https://static.tongdun.net/us/captcha/main/tdc.js
新加坡	https://static.tongdun.net/sg/captcha/main/tdc.js
德国	https://static.tongdun.net/fra/captcha/main/tdc.js

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

触发方式

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

参数列表

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

参数名	类型	是否必填	说明
partner	String	是	合作方标识，由同盾分配
appName	String	是	应用标识，由同盾分配
display	String	是	验证码弹窗展现形式，可选值为 popup/float/custom/bind。具体解释：popup：屏幕居中展示，并且验证码弹窗之外遮罩填充，点击遮罩可关闭验证码；float：浮动展示，验证码展现在指定的 Button 的上方；custom：验证码在 area 指定的 DOM 元素内展现；bind：对应绑定式，验证码触发方式由用户指定的 DOM 元素确定，验证码默认居中展示
container	String	是	ID、Class 或 Tag 形式的 DOM 选择器；对于绑定式，用于指定触发验证码事件的Button的DOM节点；对于触发式，用于指定'点击完成验证'按钮渲染的目标DOM节点
area	String	否	ID、Class 或 Tag 形式的 DOM 选择器；仅display为custom适用，用于指定验证码弹窗渲染的区域
width	String	否	点击完成验证按钮长度，仅对非绑定式有效。默认值 300px，最小值 200px
height	String	否	点击完成验证按钮高度，仅对非绑定式有效。默认值 40px，最小值 30px
lang	String	否	验证界面语言，目前可选语言为：zh-cn（中文简体），zh-han（中文繁体），en（英文），ja（日文），ko（韩文），默认为zh-cn
bindSucNoFed	Boolean	否	绑定式接入时，验证成功后是否返回验证成功的弹框提示；false为有弹框提示，true 为没有弹框提示，默认值为 false
env	Number	否	env 取值，1 表示线上环境，0 表示沙盒环境，不传则默认为线上；提示：正式发布时，线上环境请删除此变量或设置为 1
closeIcon	Number	否	是否显示关闭图标，0 为显示，1 为不显示，默认值 0
closeMask	Number	否	点击遮罩区域是否可关闭验证码，0 为可以，1 为不可以，默认值 0
mfaId	String	否	如果您已对接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上