使用YALE-CAS所衍生的工作（一）修改界面

项目使用了yale大学的 cas进行单点登录

但是必须要扩展登陆信息，譬如增加验证码等，需要对该页面进行修改。

本想修改源代码，将登陆的UsernamePasswordCredentials.java进行替换，增加一个属性，但是发现源代码中关联该bean的内容太多了，就想干脆修改该文件，增加属性即可。左右思量，还是放弃，验证还是在页面就直接处理了就可以了，没必要进行后台的处理。

查看了/WebRoot/WEB-INF/view/jsp/default/ui/casLoginView.jsp,用的东西真复杂。。。。使用了webflow，和各种标签。对于这些暂时没有空去处理，先加入自己的元素吧。

关于跨域访问

function verify(){
var name = $("#username").val();
var code = $("#identifyingcode").val();
var _url = "<%=authPath%>";

   if(code.length==6 && name.length>0){
   $.ajax({
    url: _url,
    type: "GET",
    dataType: "jsonp",
    jsonp: "jsonpCallback",
    crossDomain : true,
    data: {username:name,identifyingcode:code},
    success: function (data){
     var result = data.results;
     if(result){
      $("#identifyingcode").attr("disabled",true);
      $("#submitbtn").attr("disabled",false);
     }
     var msg = result?"成功":"失败,请重新输入6位令牌数字";
     $("#verify").html("动态口令验证"+msg);
    },
       error: function(xhr){
        alert("请求出错(请检查相关度网络状况.)");
    }
   });
  }
}

在DOM中加入

<div>
    <label for="password" class="fl-label">验证码</label>
    <input id="identifyingcode" name="identifyingcode" tabindex="3"onkeyup="verify()">
</div>
<div>
    <span id="verify"></span>
</div>

                   

使用onkeyup监听输入的验证码，当验证码长度为6位的时候就去访问令牌服务器，校验令牌是否准确。

OK，FF,CHROME调试木有问题，通过，

让BOSS试用，BOSS娴熟的打开360浏览器，发现出现了

娴熟的点了是，发现不需要输入验证码照样可以使用，s-h-i-t

百度了一下，发现该问题就是因为在https的访问页面中包含了http地址，所以IE8就提示了。

于是将页面中所有的引用地址都切换成https协议，IE8提示证书有问题，导入证书之后，OK，以后就不会再有类似的提示了。

悲催的是，在FF中就不行了，FF不会自动检测https的证书，没有导入，所以就不能继续验证令牌。

只能先用土办法了，区分IE和其他浏览器

function verify(){
var name = $("#username").val();
var code = $("#identifyingcode").val();
var _url = "";

var appname = navigator.appName.toLowerCase();
if(appname.indexOf("microsoft")!=-1){
  //ie浏览器需要导入证书
  _url = "<%=authPathSecurity%>";
}else{
  //非ie浏览器可以直接连接请求，若需要使用https连接，也需要导入证书，证书地址即为https的访问地址
  _url = "<%=authPath%>";
}
  if(code.length==6 && name.length>0){
   $.ajax({
    url: _url,
    type: "GET",
    dataType: "jsonp",
    jsonp: "jsonpCallback",
    crossDomain : true,
    data: {username:name,identifyingcode:code},
    success: function (data){
     var result = data.results;
     if(result){
      $("#identifyingcode").attr("disabled",true);
      $("#submitbtn").attr("disabled",false);
     }
     var msg = result?"成功":"失败,请重新输入6位令牌数字";
     $("#verify").html("动态口令验证"+msg);
    },
       error: function(xhr){
        alert("请求出错(请检查相关度网络状况.)");
    }
   });
  }
}

BOSS满意了，交差~~