zoukankan      html  css  js  c++  java
  • 扫码授权登陆

    手机授权扫码登陆

    首先输入账号密码,进行验证,验证成功后显示手机授权二维码

    这个是扫码授权的代码实现

    var numT;
    var token;
    var t1;
    	<%--获取二维码--%>
    	function getCode(){
    		numT=0;
    		$.ajax(
    				{
    					type:"post",
    					dataType:"json",
    					url:"获取二维码的接口地址",
    					success:function(result)
    					{
    						<%--返回二维码图片地址--%>
    						$("img").attr('src',result.data.url); 
    					    <%--同时得到具有时效的token--%>
    						 token = {"token":result.data.token.toString()};
    	                   <%--规定二维码时效性--%>
    						 numT=0;
    						<%--3s请求一次 确认一次状态--%>
    						 t1 = setInterval(sureStuts,3000);
    					}
    				});
    	}
    	/* 定时状态确认
    	确认手机授权情况
    	*/
    	function sureStuts(){
    		$.ajax(
    				{
    			type:"post",
    			dataType:"json",
    			url:"状态确认地址,获取传输token",
    			data:token,
    			success:function(result)
    			{
    				<%--成功授权--%>
    				if(result.flag.toString()=="true"){
    						numT=0;//请求次数清零
    						window.clearInterval(t1); //定时任务销毁
    						helpDirect(result.key);//登陆成功,传输个人key,进入个人的系统后台界面,跳转页面
    					}else{	numT++;	}//次数+1
    	            //超时操作
    	           //当请求次数大于MAXnum,次数清零,停止定时任务,重新获取授权二维码
    				if(numT>=MAXnum){
    					window.clearInterval(t1);
    					$("#bt").show();
    	  				numT=0;
    $("#tishi").html("二维码已失效点击刷新").css("color","rgb(254,0,0)").click(function(){getCode();$(this).html('请使用云之家扫一扫').css("color","#666")})
    				}
    			}
    	  });
    }
    

     登陆的js 通用

    /**
     * Created by GT on 2017/12/10.
     */
    var login={
       basePath:"",
       URL:{
           //登陆地址
           managerLogin:function () {
               return login.basePath+'login';
           },
           //首页地址
           index:function () {
               return login.basePath+'index';
           }
       },
       initView:function(param){
               login.basePath=param['basePath'];
               // 切换图形验证码
               $("#codeImage").click(function () {
                   $(this).attr("src",$(this).attr("src")+'?'+Math.random());
               });
               //登陆操作
               $("#loginBtn").click(function () {
                   login.managerLogin();
               });
               //警告框隐藏
               $("#errorTip").hide();
       },
        // 切换图形验证码
        getCodeImage:function () {
            var verify=document.getElementById('codeImage');
            verify.setAttribute('src',login.basePath+'vcode?'+Math.random());
        },
        //管理员登陆操作
        managerLogin:function () {
            //首先判断用户是否输入用户名及密码及验证码
            $("#errorTip").hide();
            var enterValue = $("#patchaNum").val();
    $.post(login.URL.managerLogin(),{userId:$("#managername").val(),userKey:$("#managerpassword").val(),vcode:enterValue},function (result) {
                if(result){
                    if(result['success']){
                        /*获取授权二维码*/
                        getCode();
                        $("#errorTip").hide();
                    }else{
                        $("#errorTip").html('<strong>错误提示:</strong>'+result['message']).show();
                        /*重新刷新二维码*/
                        $(".code_image").click();
                        //清空表单
                        $("#form").reset();
                        login.getCodeImage();
                    }
                }else{
                    $("#errorTip").html('未知异常,请联系管理解决');
                }
            });
        }
    }
    

      效果展示

      请求超时 

  • 相关阅读:
    select、poll和epoll
    Linux 常用命令之文件和目录
    SmartPlant Review 帮助文档机翻做培训手册
    SmartPlant Foundation 基础教程 3.4 菜单栏
    SmartPlant Foundation 基础教程 3.3 标题栏
    SmartPlant Foundation 基础教程 3.2 界面布局
    SmartPlant Foundation 基础教程 3.1 DTC登陆界面
    SmartPlant Foundation 基础教程 1.4 SPF架构
    SmartPlant Foundation 基础教程 1.3 SPF其他功能
    SmartPlant Foundation 基础教程 1.2 SPF集成设计功能
  • 原文地址:https://www.cnblogs.com/GoTing/p/7993727.html
Copyright © 2011-2022 走看看