网站验证码WEB前端接入实例

以网易云易盾验证码为参考案例:

兼容性

IE7+、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android上的内嵌Webview

开始使用

引入初始化JS

 

调用初始化函数

initNECaptcha(config, onload, onerror)
// initNECaptcha为全局函数,可直接调用
initNECaptcha({
    // config对象,参数配置
    captchaId: '从易盾申请的captchaId',
    element: '#captcha',
    mode: 'float',
    width: '320px'
}, function (instance) {
    // 初始化成功后得到验证实例instance,可以调用实例的方法
}, function (err) {
    // 初始化失败后触发该函数,err对象描述当前错误信息
})

参数配置

这里指初始化时传入的config对象,即调用初始化函数initNECaptcha时传入的第一个参数。智能验证码设置参数有些不同,详见表格下方特别说明。

参数 参数类型 必填 默认 说明
captchaId string 验证码id
element string HTMLElement *
mode string PC端默认"float",移动端默认"popup" 验证码模式,三种模式可选:"float""embed""popup",即触发式、嵌入式、弹出式。
protocol string 与用户网站的网络协议一致 验证码传输数据使用的网络协议,可选:"http""https"
width number string "auto"
lang string "zh-CN" 验证码语言选项。支持"zh-CN""en",即简体中文和英文
onReady function NECaptcha所有工作准备就绪,用户可以使用验证码时触发该回调。具体使用见完整示例
onVerify function 验证码验证结束回调函数。具体使用见完整示例

特别注意

对于智能无感知验证码,参数modewidth的设置均无效。验证按钮宽度与容器宽度一致,容器宽度最小240px。

实例方法

这里指initNECaptcha初始化成功,onload触发时传入的实例的方法。

  • refresh:刷新验证码,获取新的验证信息

  • destroy:销毁当前实例

  • popUp:当验证码是常规验证码并且mode为"popup"时,可调用该实例方法弹出验证码进行验证

示例:

initNECaptcha(config, function onload (instance) {
    // 可在此处调用实例方法
}, onerror)

完整示例

使用form表单




   
   
   
验证码示例


   

你可能感兴趣的:(网站验证码WEB前端接入实例)