如何实现拖动认证登录?
--- 基于在线资源,也可以本地脚本或者自己搭建阿里云服务上传资源脚本。---
一,浏览器加载服务器脚本
创建并添加script标签
var p = document.getElementsByTagName('head').item(0); var sc = document.createElement('script') sc.setAttribute('type', 'text/javascript'); sc.onload = sc.onreadystatechange = function () { if (sc.readyState == 'loaded' || sc.readyState == 'complete') { sc.onload = null; sc.onreadystatechange = null; sc.parentNode.removeChild(sc); } } sc.setAttribute('src', 'https://code.jquery.com/jquery-3.4.1.js'); p.appendChild(sc); // script 资源标签请求下载完成之后,删除标签后资源一直都在~
二,访问阿里云站点,从服务器上获取可以操作dom实现滑动认证的功能。
// 疑问,1,下载完成后removeChild资源还在吗,2,写成迭代的好处是什么 // 下载完成后资源已经在本地缓存中,移除script标签不会删除资源 // 迭代的好处是加载的资源路径可以用一个数组保存 function seriesLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [scripts]; const HEAD = document.getElementsByTagName("head").item(0) || document.documentElement; const s = new Array(), last = scripts.length - 1, recursiveLoad = i => { //递归 s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //兼容不同浏览器,onload Chrome Safari Firefox浏览器 , if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback(); } } s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); }; recursiveLoad(0); } export const VerrifyCode = (ops) => { if (browser.versions.mobile) { mob(ops); } else { pc(ops); } }; // 下载的资源会立即执行,所以在回调函数中可以调用返回资源中定义的函数 // 执行对应的函数,传参可以写在一个option中,包括使用js进行dom操作渲染dom节点,滑动事件滑动操作操作执行好之后的callback等。 export const pc = (option) => { const __date = new Date(), timestamp = `${__date.getFullYear()}${__date.getMonth()}${__date.getDay()}`; seriesLoadScripts('http://g.alicdn.com/sd/ncpc/nc.js?t=${timestamp}', () => { const nc_token = ["DZ_PC", (new Date()).getTime(), Math.random().toString(16)].join(':'); const NC_Opt = { renderTo:option.id, appkey: option.appkey || "FFFF0N1N000000006DC1", scene: option.scene || "nc_login", token: nc_token, customWidth: option.width, trans:{"position": "sign-sms"}, elementID: ["sign-sms"], is_Opt: 0, language: "cn", isEnabled: true, timeout: 3000, times:5, apimap: { }, callback(data) { if(typeof(option.callback)=="function"){ option.callback(data) } } }; const nc = new noCaptcha(NC_Opt); nc.upLang('cn', { _startTEXT: "请按住滑块,拖动到最右边", _yesTEXT: "验证通过", _error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次", _errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>", }) }); }; // 区分移动端兼容问题(样式、点击事件、触摸事件等) export const mob = (option) => { const __date = new Date(), timestamp = `${__date.getFullYear()}${__date.getMonth()}${__date.getDay()}`; seriesLoadScripts(`//g.alicdn.com/sd/nch5/index.js?t=${timestamp}`, () => { const nc_token = ["DZ_H5", (new Date()).getTime(), Math.random().toString(16)].join(':'); const nc = NoCaptcha.init({ renderTo:option.id, appkey: option.appkey || "FFFF0N1N000000006DC1", scene: "nc_login_h5", token: nc_token, customWidth: option.width, trans:{"position": "sign-h5"}, elementID: ["sign-h5"], is_Opt: 0, language: "cn", timeout: 10000, retryTimes: 5, errorTimes: 5, inline:false, apimap: { }, bannerHidden:false, initHidden:false, callback(data) { if(typeof(option.callback)=="function"){ let DATA=data DATA.nc_token=nc_token option.callback(DATA) } }, error(s) { } }); NoCaptcha.setEnabled(true); nc.reset();//请务必确保这里调用一次reset()方法 NoCaptcha.upLang('cn', { 'LOADING':"加载中...",//加载 'SLIDER_LABEL': "请向右滑动验证",//等待滑动 'CHECK_Y':"验证通过",//通过 'CHECK_N':"验证未通过", //准备唤醒二次验证 }); }); }; // option 结构 { id: "#slide-verify" } export const codeReset = (option) => { VerrifyCode(option) }