网站验证码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时传入的第一个参数。智能验证码
<https://www.163yun.com/product/captcha>设置参数有些不同，详见表格下方特别说明。

参数参数类型必填默认说明
captchaIdstring是无验证码id
elementstringHTMLElement*无
modestring否PC端默认"float"，移动端默认"popup"验证码模式，三种模式可选："float"、"embed"、"popup"
，即触发式、嵌入式、弹出式。
protocolstring否与用户网站的网络协议一致验证码传输数据使用的网络协议，可选："http"、"https"
widthnumberstring否"auto"
langstring否"zh-CN"验证码语言选项。支持"zh-CN"、"en"，即简体中文和英文
onReadyfunction否无NECaptcha所有工作准备就绪，用户可以使用验证码时触发该回调。具体使用见完整示例
onVerifyfunction否无验证码验证结束回调函数。具体使用见完整示例
特别注意

对于智能无感知验证码，参数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> <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> <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只触发一次。
*

文章来自：网易云 <http://www.163yun.com>

相关导读：

滑动验证码的原理是什么？ <https://www.zhihu.com/question/32027538/answer/400089430>
如何评价 12306 的图片型验证码？ <https://www.zhihu.com/question/28795373/answer/400117340>

热门工具换一换