如何实现拖动认证登录？

 --- 基于在线资源，也可以本地脚本或者自己搭建阿里云服务上传资源脚本。---

一，浏览器加载服务器脚本

创建并添加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)
}