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

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

兼容性

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

开始使用

引入初始化JS

 <script src="//cstaticdun.126.net/load.min.js"></script>

调用初始化函数

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	否	无	验证码验证结束回调函数。具体使用见完整示例

特别注意

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

实例方法

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

refresh：刷新验证码，获取新的验证信息
destroy：销毁当前实例
popUp：当验证码是常规验证码并且mode为"popup"时，可调用该实例方法弹出验证码进行验证

示例：

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

完整示例

使用form表单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta  name="viewport" content="width=device-width, initial-scale=1.0">
   <meta  http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码示例</title>
</head>
<body>
   <form action="/login" method="post">
   <input  type="text" name="username" placeholder="用户名">
   <input  type="password" name="password" placeholder="密码">
   <input  type="hidden" name="captchaId" value="从易盾申请的captchaId">
    <div id="captcha"></div> <!-- 验证码容器元素 -->
       <button type="submit">登录</button>
     </form>
  <script src="//cstaticdun.126.net/load.min.js"></script><!-- 初始化JS -->
   <script>
    initNECaptcha({
      captchaId: '从易盾申请的captchaId',
      element: '#captcha',
      mode: 'float',
      width: 320
    }, function onload (instance) {
      // 初始化成功后，用户输入对应用户名和密码，以及完成验证后，直接点击登录按钮即可
    }, function onerror (err) {
      // 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
    })
    
</body>
</html>

使用onVerify

<!DOCTYPE html>
<html lang="en">
<head>
   <meta  charset="UTF-8">
   <meta  name="viewport" content="width=device-width, initial-scale=1.0">
   <meta  http-equiv="X-UA-Compatible" content="ie=edge">
  验证码示例
</head>
<body>
  <div class="form-container">
    <input  type="text" name="username" id="username" placeholder="用户名">
    <input  type="password" name="password" id="password" placeholder="密码">
    <div id="captcha"></div> <!-- 验证码容器元素 -->
    登录
  </div>
  <script src="//cstaticdun.126.net/load.min.js"></script><!-- 初始化JS -->
  <script>
    initNECaptcha({
      captchaId: '从易盾申请的captchaId',
      element: '#captcha',
      mode: 'float',
      width: 320,
      onReady: function (instance) {
        // 验证码一切准备就绪，此时可正常使用验证码的相关功能
      },
      onVerify: function (err, data) {
        /**
         * 第一个参数是err（Error的实例），验证失败才有err对象
         * 第二个参数是data对象，验证成功后的相关信息，data数据结构为key-value，如下：
         * {
         *   validate: 'xxxxx' // 二次验证信息
         * }
         */
        // 点击登录按钮后可调用服务端接口，以下为伪代码，仅作示例用
        ajax('/login', {
          captchaId: '从易盾申请的captchaId',
          username: $('#username').val(),
          password: $('#password').val(),
          validate: data.validate
        }, function onsuccess (data) {
          // 登录成功后，相关处理逻辑
        })
      }
    }, function onload (instance) {
      // 初始化成功
    }, function onerror (err) {
      // 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
    })
    
</body>
</html>

使用popup模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta  charset="UTF-8">
   <meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <meta  http-equiv="X-UA-Compatible" content="ie=edge">
  <title>验证码示例-popup模式</title>
</head>
<body>
<button id="j-popup">点击弹出验证码</button>
<div id="captcha"></div>
<script  charset="UTF-8" type="text/javascript" src="http://cstaticdun.126.net/load.min.js"></script>
<script>
  var captchaIns;
  initNECaptcha({
    element: '#captcha',
    captchaId: '从易盾申请的captchaId',
    mode: 'popup',
    width: '320px'
  }, function (instance) {
    // 初始化成功后得到验证实例instance，可以调用实例的方法
    captchaIns = instance
  }, function (err) {
    // 初始化失败后触发该函数，err对象描述当前错误信息
  })

  // 监听button的点击事件，弹出验证码
  document.getElementById('j-popup').addEventListener('click', function () {
    captchaIns.popUp()
  })

</body>
</html>

特别说明

onload和onReady的区别：
onload和onReady触发时，均会返回验证码的实例，即传入的第一个参数。二者触发时机有所不同，onload触发时，初始化函数结束和完成实例的生成，注意这并不代表验证码是可用的（比如验证码相关背景图片和信息并没有加载），此方法只触发一次。onReady触发时，说明验证码准备就绪（比如背景图片等信息均已加载），在popup模式下，每次弹出均会触发onReady，其他模式下onReady只触发一次。

文章来自：网易云