网页版滑动验证码+短信验证码（史上最全版） |
您所在的位置：网站首页 › 移动端滑块验证怎么弄的 › 网页版滑动验证码+短信验证码（史上最全版） |
网页版滑动验证码+短信验证码（史上最全版）
|
PC版滑动验证的实现
简介
滑动验证是基于人机识别技术开发的智能验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。
使用PC版滑动验证码，需要引入以下js资源，为保证服务功能最优，官方会定期迭代升级线上js资源，因此请避免使用本地文件导入js资源，以免后端版本更新而前端资源未更新造成冲突： 其中，t字段建议设置为小时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到官方针对js的动态发布迭代。 完整接入demo var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':'); var NC_Opt = { renderTo: "#your-dom-id", appkey: "CF_APP_1", scene: "register", token: nc_token, customWidth: 300, trans:{"key1":"code0"}, elementID: ["usernameID"], is_Opt: 0, language: "cn", isEnabled: true, timeout: 3000, times:5, apimap: { // 'analyze': '//a.com/nocaptcha/analyze.jsonp', // 'get_captcha': '//b.com/get_captcha/ver3', // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3' // 'get_img': '//c.com/get_img', // 'checkcode': '//d.com/captcha/checkcode.jsonp', // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js', // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js', // 'umid_serUrl': 'https://g.com/service/um.json' }, callback: function (data) { window.console && console.log(nc_token) window.console && console.log(data.csessionid) window.console && console.log(data.sig) } } var nc = new noCaptcha(NC_Opt) nc.upLang('cn', { _startTEXT: "请按住滑块，拖动到最右边", _yesTEXT: "验证通过", _error300: "哎呀，出错了，点击刷新再来一次", _errorNetwork: "网络不给力，请点击刷新", }) 参数详细说明 参数含义是否必填renderTo声明滑动验证需要渲染的目标元素ID是appkey应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是scene场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是token滑动验证码的主键，请务必不需要写死固定值。请确保每个用户每次打开页面时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数”是customWidth滑动条的长度，建议预留300像素以上否trans业务键字段。您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否elementID通过Dom的ID属性自动填写trans业务键，您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否is_Opt是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0否isEnabled是否启用，无特殊场景请默认写true。默认为true否timeout内部网络请求的超时时间，一般不需要改，默认值为3000ms否times允许服务器超时重复次数，默认5次否apimap用于自己指定滑动验证各项请求的接口地址。如无特殊情况，请不要配置这里的apimap否callback前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调用验签是
方法详细说明 noCaptcha对象中维护了一些方法提供给您使用，您可以通过诸如var nc = new noCaptcha(NC_Opt); nc.functionName(parm);的方式来调用使用它们。 方法名参数作用reload无任何时候调用此方法，可以将滑动验证重置为初始状态(等待滑动)hide无任何时候调用此方法，可以隐藏滑动验证组件show无在调用hide方法后，任何时候调用此方法，可以展示滑动验证组件getToken无任何时候调用此方法，可以获取当前滑动验证实例的tokensetTransObject可以设置滑动验证的业务键，方便问题排查定位。详见”问题排查与错误码说明”部分upLangString,Object用于配置NC自定义文案，详见”自定义文案与多语言”部分destroy无销毁当前滑动验证实例
测试指南 (1) CF_APP_1复现验证码各个状态机 CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后，您可以通过配置前端trans字段来直接控制验证码服务接口的返回（通过or拦截），借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene，以免出现不必要的安全问题。 CF_APP_1下trans字段与验证码结果对应关系如下： trans效果{“key1”:”code0”}滑动一定会通过{“key1”:”code300”}滑动一定会被拦截
(2) 正式上线测试 正式上线之前，推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项： 请确保您使用阿里云控制台上分配的appkey和scene进行测试，不要胡乱填写请注意您当前验证码的使用场景。如果您的验证码在PCweb场景下使用，请不要用手机等移动设备进行测试在测试低版本IE浏览器时，不要用IE11浏览器的兼容模式去模拟生成低版本浏览器。请用真正低版本IE浏览器进行测试 自定义样式：HTML结构与CSS定制说明(1) HTML结构图示 滑动验证PCweb环境下的Dom结构如下图所示 (2) 颜色、图标自定义 您可以通过自定义CSS的方式来覆盖滑动验证各个UI组件的颜色、资源等，注意自定义样式需出现在滑动验证自带样式的后方，必要时可添加 !important (1) 多语言 滑动验证默认支持18国语言，您可以通过滑动验证配置项中的language字段来进行选择（默认为cn，中文） ar_SA:阿拉伯文 de_DE:德文 es_ES:西班牙文 fr_FR:法文 in_ID:印尼语 it_IT:意大利文 iw_HE:希伯来语 ja_JP:日文 ko_KR:韓文 nl_NL:荷蘭文 pt_BR:波蘭文 ru_RU:俄文 th_TH:泰文 tr_TR:土耳其文 vi_VN:越南文 cn:简体中文 tw:繁体中文 en:英文 (2) 自定义文案 您可以通过滑动验证对象维护的upLang方法来自定义您需要的文案。内置的语言有简体中文、繁体中文、英文（cn、tw、en）三种，可以选择其中一种进行更新，也可传入一个新名字以建立新语言。如果您调用upLang方法后，自定义文案没有生效，请在其之后调用reload()方法，让滑动验证重新渲染即可。 /** * @param name {string} 语言名，可选 cn、tw、en ，也可添加自定义语言 * @param detail {object} 语言详情，key/value 格式 */ nc.upLang('cn', { _startTEXT: "请按住滑块，拖动到最右边", _yesTEXT: "验证通过", _error300: "哎呀，出错了，点击刷新再来一次", _errorNetwork: "网络不给力，请点击刷新", }) 问题排查与错误码说明(1) 上传业务键 滑动验证默认不会采集您当前业务场景下的用户名、手机号等业务键，为了方便问题排查，这里强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很方便的关联到对应滑动验证的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。 您有两种方法可以上传业务键： a. 您可以在用户操作滑块前的任何时刻调用滑动验证维护的setTrans方法上传。比如您可以在用户填写完用户名（从用户名输入框失焦）时调用nc.setTrans({‘userName’:用户名输入框value})来上传用户名；也可以在页面加载完毕的时候调用nc.setTrans({‘业务会话标示’:业务会话session的值})来上传您业务上唯一的会话标示。 b. 您也可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList，配置之后在滑动结束的时刻，滑块会以elementID当中的每一个string作为ID，去获取对应dom的value值并上传。举个例子，如果您配置elementID:[“usernameID”]，则滑动结束时document.getElementById(“usernameID”).value会自动被上传至滑动验证服务端。 (2) 错误码 滑动验证发生异常的情况下，在错误信息后会附带错误码，如下图：
其中错误码含义如下： 错误码含义00analyze请求超时01uab.js加载超时02um.js加载超时04设备指纹代码加载异常08waitForUmx超出重试次数
H5版滑动验证的实现 简介 滑动验证是服役于阿里巴巴人机识别第一线的验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。 使用H5版滑动验证码，需要引入以下js资源： 其中，t字段建议设置为小时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到针对js的动态发布迭代。 完整接入demo var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':'); var nc=NoCaptcha.init({ renderTo: '#nc', appkey: 'CF_APP_1', scene: 'register', token: nc_token, trans: {"key1": "code200"}, elementID: ["usernameID"], is_Opt: 0, language: "cn", timeout: 10000, retryTimes: 5, errorTimes: 5, inline:false, apimap: { // 'analyze': '//a.com/nocaptcha/analyze.jsonp', // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js', }, bannerHidden:false, initHidden:false, callback: function (data) { window.console && console.log(nc_token) window.console && console.log(data.csessionid) window.console && console.log(data.sig) }, error: function (s) { } }); NoCaptcha.setEnabled(true); nc.reset();//请务必确保这里调用一次reset()方法 NoCaptcha.upLang('cn', { 'LOADING':"加载中...",//加载 'SLIDER_LABEL': "请向右滑动验证",//等待滑动 'CHECK_Y':"验证通过",//通过 'ERROR_TITLE':"非常抱歉，这出错了...",//拦截 'CHECK_N':"验证未通过", //准备唤醒二次验证 'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证 'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示 }); 参数详细说明 参数含义是否必填项renderTo声明滑动验证需要渲染的目标元素ID是appkey应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是scene场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是token滑动验证码的主键，请务必不需要写死固定值。请确保每个用户每次打开页面时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数”是trans业务键字段。您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否elementID通过Dom的ID属性自动填写trans业务键，您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否is_Opt是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0否language语言。H5场景默认支持简中、繁中、英文，详细配置方法请见下方”自定义文案与多语言”部分。默认为cn(中文)否timeout内部网络请求的超时时间，一般不需要改，默认值为10000ms否retryTimes允许服务器超时重复次数，默认5次否errorTimes弹出二次验证时，允许二次验证填错的最大次数，默认5次否bannerHidden验证通过后，验证码组件是否自动隐藏，默认为 true否initHidden是否默认不渲染，设置为true时，不会自动渲染，需要自行调用show方法将其渲染，默认为false否inline弹出二次验证是否为inline方式，默认为false(浮层模式)否apimap用于自己指定滑动验证各项请求的接口地址。如无特殊情况，请不要配置这里的apimap否callback前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调用验签是 方法详细说明NoCaptcha的实例化对象中维护了一些方法提供给您使用，您可以通过诸如var nc=NoCaptcha.init(NC_Opt); nc.functionName(parm);的方式来调用使用它们。 方法名参数作用reset无任何时候调用此方法，可以将滑动验证重置为初始状态(等待滑动)hide无任何时候调用此方法，可以隐藏滑动验证组件show无在调用hide方法后，任何时候调用此方法，可以展示滑动验证组件setTransObject可以设置滑动验证的业务键，方便问题排查定位。详见”问题排查与错误码说明”部分upLangString,Object用于配置NC自定义文案，详见”自定义文案与多语言”部分on事件名(String),回调函数(Function)为滑动验证状态设置监听
为滑动验证设置事件监听的具体方法： var nc=NoCaptcha.init(NC_Opt); nc.on(‘事件名’, 回调函数); 事件列表： 事件名含义beforeverify弹出验证浮层之前afterverify弹出验证浮层之后error系统或者网络错误fail用户验证失败success用户验证成功refresh点击刷新 测试指南(1) CF_APP_1复现验证码各个状态机 CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后，您可以通过配置前端trans字段来直接控制验证码服务接口的返回（通过or二次验证or拦截），借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene，以免出现不必要的安全问题。 CF_APP_1下trans字段与验证码结果对应关系如下： trans效果{“key1”:”code0”}滑动一定会通过{“key1”:”code200”}滑动一定出现二次验证{“key1”:”code300”}滑动一定会被拦截(2) 正式上线测试 正式上线之前，推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项： 请确保您使用阿里云控制台上分配的appkey和scene进行测试，不要胡乱填写请注意您当前验证码的使用场景。如果您的验证码在HTML5场景下使用，请不要用PCWeb浏览器进行测试 自定义样式：HTML结构与CSS定制说明滑动验证Html5环境下的Dom结构如下图所示,共分为3种stage状态：stage1(初始状态)、stage2(二次验证)、stage3(拦截状态)。其中 {prefix} 为前缀，值形如 nc_1、nc_2… 您可以通过自定义CSS的方式来覆盖滑动验证各个UI组件的颜色、资源等，注意自定义样式需出现在滑动验证自带样式的后方，必要时可添加 !important stage1(初始状态)： stage2(二次验证)： stage3(拦截状态)： (1) 多语言 滑动验证默认支持简体中文、繁体中文、英文三种语言，您可以通过滑动验证配置项中的language字段来进行选择（默认为cn，简体中文） cn:简体中文 tw:繁体中文 en:英文 (2) 自定义文案 您可以通过滑动验证对象维护的upLang方法来自定义您需要的文案。内置的语言有简体中文、繁体中文、英文（cn、tw、en）三种，可以选择其中一种进行更新，也可传入一个新名字以建立新语言。如果您调用upLang方法后，自定义文案没有生效，请在其之后调用reset()方法，让滑动验证重新渲染即可 /** * @param name {string} 语言名，可选 cn、tw、en ，也可添加自定义语言 * @param detail {object} 语言详情，key/value 格式 */ NoCaptcha.upLang('cn', { 'LOADING':"加载中...",//加载 'SLIDER_LABEL': "请向右滑动验证",//等待滑动 'CHECK_Y':"验证通过",//通过 'ERROR_TITLE':"非常抱歉，这出错了...",//拦截 'CHECK_N':"验证未通过", //准备唤醒二次验证 'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证 'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示 }); 问题排查与错误码说明(1) 上传业务键 滑动验证默认不会采集您当前业务场景下的用户名、手机号等业务键，为了方便问题排查，这里强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很方便的关联到对应滑动验证的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。 您有两种方法可以上传业务键： a. 您可以在用户操作滑块前的任何时刻调用滑动验证维护的setTrans方法上传。比如您可以在用户填写完用户名（从用户名输入框失焦）时调用nc.setTrans({‘userName’:用户名输入框value})来上传用户名；也可以在页面加载完毕的时候调用nc.setTrans({‘业务会话标示’:业务会话session的值})来上传您业务上唯一的会话标示。 b. 您也可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList，配置之后在滑动结束的时刻，滑块会以elementID当中的每一个string作为ID，去获取对应dom的value值并上传。举个例子，如果您配置elementID:[“usernameID”]，则滑动结束时document.getElementById(“usernameID”).value会自动被上传至滑动验证服务端。 (2) 错误码 滑动验证发生异常的情况下，在错误信息后会附带错误码，如下图： 其中错误码含义如下： 错误码含义00analyze请求超时01uab.js加载超时B0策略拦截
短信验证码的实现 简介 短信验证码是对图片验证、滑动验证一种兜底的人机验证方式，实现原理较为简单，但通常需要接入第三方短信服务商的短信验证码接口。 短信服务商接口对接开发短信验证码功能通常是采用第三方短信服务商的服务，作为短信下发渠道，以这个网站短信验证码为例： https://www.veesing.com ，获取试用验证码条数和验证码接口文档。进行接口对接前需首先进行准备工作： 短信签名报备 短信验证码需预先设置短信签名，签名会经过平台审核，审核通过后才可作为接口参数使用。
短信验证码模板报备 短信验证码需预先设置短信模板，签名会经过平台审核，审核通过后才可作为接口参数使用。
获取appId和appKey 为保障接口安全，短信验证码接口，使用多重加密的appId和appKey进行身份鉴权和校验，这两个字段作为验证码接口必填项，建议预先获取到，获取appKey时需要对注册人进行身份校验。
至此，短信服务商验证码接口已经准备完毕，接下来可以进行自身业务的开发，下面展示通用的短信验证码Demo。 短信验证码前端实现短信验证码前端较为简单，主要就是发送验证码和校验验证码两个ajax请求，结合上面的滑动验证可实现双重验证。实现效果图如下：
实现代码如下： .am-form{ padding: 10px; } ._nc .stage1 .slider{ left: 0; right: 0; } 请输入手机号 请输入验证码 提交 var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':'); var nc=NoCaptcha.init({ renderTo: '#nc', appkey: 'CF_APP_1', scene: 'register', token: nc_token, trans: {"key1": "code200"}, elementID: ["usernameID"], is_Opt: 0, language: "cn", timeout: 10000, retryTimes: 5, errorTimes: 5, inline:false, apimap: { // 'analyze': '//a.com/nocaptcha/analyze.jsonp', // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js', }, bannerHidden:false, initHidden:false, callback: function (data) { window.console && console.log(nc_token) window.console && console.log(data.csessionid) window.console && console.log(data.sig); var tel = $('#tel').val(); $.ajax({ url: "sendCode", type: "post", data: { tel:tel }, dataType: "json", success: function (result) { if (result.code == 0) { alert("验证码已发送!", "green") } else { alert("发送失败,请稍后再试！"); nc.reset() } }, error: function () { alert("系统繁忙,请稍后再试!", "red") } }) }, error: function (s) { } }); NoCaptcha.setEnabled(true); nc.reset();//请务必确保这里调用一次reset()方法 NoCaptcha.upLang('cn', { 'LOADING':"加载中...",//加载 'SLIDER_LABEL': "请向右滑动验证",//等待滑动 'CHECK_Y':"验证通过",//通过 'ERROR_TITLE':"非常抱歉，这出错了...",//拦截 'CHECK_N':"验证未通过", //准备唤醒二次验证 'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证 'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示 }); 短信验证码后端实现后端代码主要职责是两方面：1）接收生成验证码请求，生成验证码存入session中；2）接收校验验证码的请求，将存入session的验证码去除，与前端输入的验证码进行比对，比对一致则通过并进行视图转发，比对不一致则告知前端错误原因。 实现代码如下： HttpSession session = req.getSession(); // TODO 验证码有效时间 session.setMaxInactiveInterval(600); try { Integer num = RandNumber.getNum(); // TODO 发送验证码通道 Sendsms.Send(num, phone); session.setAttribute(phone, num); return R.ok(); } catch (Exception e) { e.printStackTrace(); logger.error(e.getMessage()); return R.error("fasle"); }import java.io.Exception; import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.HttpException; import org.apache.commons.httpclient.NameValuePair; import org.apache.commons.httpclienthods.PostMethod; public class Sendsms { private static String Url = "https://vip.veesing.com/smsApi/verifyCode"; // 发送短信验证码 public static void Send(Integer num, String mobile) { try { HttpClient client = new HttpClient(); PostMethod method = new PostMethod(Url); client.getParams().setContentCharset("UTF-8"); method.setRequestHeader("ContentType", "application/x-www-form-urlencoded;charset=UTF-8"); NameValuePair[] data = { new NameValuePair("appId", "*********"), new NameValuePair("appKey", "**********"), new NameValuePair("templateId", "*******"), new NameValuePair("mobile", "*******"), new NameValuePair("variables", "*******") }; method.setRequestBody(data); client.executeMethod(method); String submitResult = method.getResponseBodyAsString(); System.out.println(submitResult); } catch (Exception e) { e.printStackTrace(); } } } HttpSession session = req.getSession(); String yzm = String.valueOf(session.getAttribute(username)); logger.info(yzm); if (yzm == null) { return R.error("验证码错误"); } if (yzm != null && !verifycode.equals(yzm)) { return R.error("验证码错误"); } 以上就是Java实现网页滑动验证与短信验证码的全部实现，仔细研究此案例，可实现安全性高、用户体验好的登录注册+滑动验证+短信验证码功能。 内容来源：https://blog.csdn.net/veesing/article/details/88290441 |
【本文地址】
今日新闻 |
推荐新闻 |