自定义单点登录页面--在自己的网站使用单点登录（2）

因最近经常有时候被一些朋友问到关于  CAS  跨全域下的 Ajax 登录方式实现，正好之前也 分析Sina微博的SSO实现 ，文中也说了 SINA 的 SSO 实际上(或机制)直接使用了 CAS 这个开源项目。于是本文中要说的CAS AJAX登录方式便参考了 SINA 的AJAX登录实现。 关于具体方案，CAS官方上好象没有提供相关说明，倒是有一文说到 Without the Login Screen  (详情参见  CAS 之自定义登录页实践 )，其具体实现方式甚是麻烦，又是改源码，又是通过JS跳转，又是一堆配置。 当然，虽然如此，但该文中所提到的获取 login tikcet 的方式还是值的参考的，因为无论什么方式登录，前提是必须获取到该ticket才允许登录验证。 
     虽然这里所说的主要是针对 CAS，其实具体的实现方式中有些还是值得参考的，如跨域设置 cookie, jsonp + iframe 跨域异步请求、P3P 及 关于 spring webflow 等其它相关的一些信息。 

思路  
     关于具体的实现思路基本上都是参考了 SINA，所以详细信息可以在  分析Sina微博的SSO实现  看到 或 自己去 firebug 一下 sina micro-blog。 


实践  
     Environment：  
        cas-server-3.4.2.1       http://www.passport.com:8080/cas/ 
        cas-client-3.1.10         http://www.portal.com:8080/login 
    以上域名是方便测试跨域，故修改本机 hosts。  

     Step 1:   在首次进入登录时(portal域中/login)，通过 JSONP 从 passport 域中获取 login ticket。 
    登录表单: 
   

Html代码  

1. <form action="http://www.passport.com:8080/cas/login" method="post" onsubmit="return loginValidate();" target="ssoLoginFrame">  
2.     <ul>  
3.         <span class="red" style="height:12px;" id="J_ErrorMsg"></span>  
4.   
5.         <li>  
6.             <em>用户名：</em>  
7.             <input name="username" id="J_Username" type="text" autocomplete="off" class="line" style="width: 180px" />  
8.         </li>  
9.         <li>  
10.             <em>密 码：</em>  
11.             <input name="password" type="password"  id="J_Password" class="line" style="width: 180px" />  
12.         </li>  
13.   
14.         <li class="mai">  
15.             <em>&nbsp;</em>  
16.             <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/>  
17.             &nbsp;自动登录  
18.             <a href="/retrieve">忘记密码？</a>  
19.         </li>  
20.         <li>  
21.             <em>&nbsp;</em>  
22.             <input type="hidden" name="isajax" value="true" />  
23.             <input type="hidden" name="isframe" value="true" />  
24.             <input type="hidden" name="lt" value="" id="J_LoginTicket">  
25.             <input type="hidden" name="_eventId" value="submit" />  
26.             <input name="" type="submit" value="登录" class="loginbanner" />  
27.         </li>  
28.     </ul>  
29. </form>  

   

Js代码  

1. $(document).ready(function(){   
2.         flushLoginTicket();  // 进入登录页，则获取login ticket，该函数在下面定义。  
3.     });  

    关于 cas-server 如何返回 lt ，在 Without the Login Screen 文章中有提到。 


     Step 2:   输入用户名密码，提交验证。将表单信息将会被POST提交至 动态的iframe中，定义该登录页面中登录后的处理逻辑。 

Js代码  

1. // 登录验证函数, 由 onsubmit 事件触发  
2. var loginValidate = function(){  
3.     var msg;  
4.     if ($.trim($('#J_Username').val()).length == 0 ){  
5.         msg = "用户名不能为空。";  
6.     } else if ($.trim($('#J_Password').val()).length == 0 ){  
7.         msg = "密码不能为空。";  
8.     }  
9.     if (msg && msg.length > 0) {  
10.         $('#J_ErrorMsg').fadeOut().text(msg).fadeIn();  
11.         return false;  
12.         // Can't request the login ticket.  
13.     } else if ($('#J_LoginTicket').val().length == 0){  
14.         $('#J_ErrorMsg').text('服务器正忙，请稍后再试..');  
15.         return false;  
16.     } else {  
17.         // 验证成功后，动态创建用于提交登录的 iframe  
18.         $('body').append($('<iframe/>').attr({  
19.             style: "display:none;width:0;height:0",   
20.             id: "ssoLoginFrame",  
21.             name: "ssoLoginFrame",  
22.             src: "javascript:false;"  
23.         }));  
24.         return true;  
25.     }  
26. }  
27.   
28. // 登录处理回调函数，将由 iframe 中的页同自动回调  
29. var feedBackUrlCallBack = function (result) {  
30.     customLoginCallBack(result);  
31.     deleteIFrame('#ssoLoginFrame');// 删除用完的iframe,但是一定不要在回调前删除，Firefox可能有问题的  
32. };  
33.   
34. // 自定义登录回调逻辑  
35. var customLoginCallBack = function(result){  
36.     // 登录失败，显示错误信息  
37.     if (result.login == 'fails'){  
38.         $('#J_ErrorMsg').fadeOut().text(result.msg).fadeIn();  
39.         // 重新刷新 login ticket  
40.         flushLoginTicket();  
41.     }  
42.     // do more....  
43. }  
44.   
45. var deleteIFrame = function (iframeName) {  
46.     var iframe = $(iframeName);   
47.     if (iframe) { // 删除用完的iframe，避免页面刷新或前进、后退时，重复执行该iframe的请求  
48.         iframe.remove()  
49.     }  
50. };  
51.   
52. // 由于一个 login ticket 只允许使用一次, 当每次登录需要调用该函数刷新 lt  
53. var flushLoginTicket = function(){  
54.     var _services = 'service=' + encodeURIComponent('http://www.portal.com:8080/uc/');  
55.     $.getScript('http://www.passport.com:8080/cas/login?'+_services+'&get-lt=true&n='   
56.             + new Date().getTime(),   
57.     function(){  
58.         // 将返回的 _loginTicket 变量设置到  input name="lt" 的value中。  
59.         $('#J_LoginTicket').val(_loginTicket);  
60.     });  
61.     // Response Example:  
62.     // var _loginTicket = 'e1s1';  
63. }  

    当点击登录后，则动态创建一个 iframe，并且登录表单提交至该 iframe 中。在下面截图中看以 body 中的变化: 

 

    由于原本的 CAS 登录方式是通过跳转、重定向的方式实现，所以需要对 CAS的Server端进行调整，使其同时支持 Ajax 方式登录。 


     Step 3:   调整 CAS Server端，使其适应 Iframe 方式登录，并使其支持回调。 
    打开 login-webflow.xml，找到 <action-state id="generateServiceTicket"> 的 Flow-Action 配置项:

Xml代码  

1. <!--当执行到该 action 的时候，表示已经登录成功，将生成 ST(Service Ticket)。-->    
2. <action-state id="generateServiceTicket">  
3.     <evaluate expression="generateServiceTicketAction" />  
4.         <!--当生成 ST 成功后，则进入登录成功页，新增 loginResponse Action 处理项，判断是否是 ajax/iframe 登录 -->  
5.         <!-- <transition on="success" to="warn" /> -->  
6.         <transition on="success" to="loginResponse" />  
7.         <!--<transition on="error" to="viewLoginForm" />-->  
8.         <!-- 可能生成 service ticket 失败，同样，也是进入 loginResponse -->  
9.         <transition on="error" to="loginResponse" />  
10.         <transition on="gateway" to="redirect" />  
11.     </action-state>  

    再新增 loginResponse Action配置项： 

Xml代码  

1. <action-state id="loginResponse">  
2.     <evaluate expression="ajaxLoginServiceTicketAction" />  
3.     <!--非ajax/iframe方式登录，采取原流程处理 -->  
4.     <transition on="success" to="warn" />  
5.     <transition on="error" to="viewLoginForm" />  
6.     <!-- 反之，则进入 viewAjaxLoginView 页面 -->  
7.     <transition on="local" to="viewAjaxLoginView" />  
8. </action-state>  

   再调整，当验证失败后，也需要判断是否是 iframe/ajax登录：

Xml代码  

1. <action-state id="realSubmit">  
2.     <evaluate  
3.         expression="authenticationViaFormAction.submit(flowRequestContext, flowScope.credentials, messageContext)" />  
4.     <transition on="warn" to="warn" />  
5.     <transition on="success" to="sendTicketGrantingTicket" />  
6.     <!--将 to="viewLoginForm" 修改为 to="loginResponse" -->                 
7.     <transition on="error" to="loginResponse" />  
8. </action-state>  

还需要配置 viewAjaxLoginView 的 state:   

Xml代码  

1. <end-state id="viewAjaxLoginView" view="viewAjaxLoginView" />  

    
     接着，再定义 ajaxLoginServiceTicketAction Bean 吧，直接在 cas-servlet.xml 声明该 bean: 
    

Xml代码  

1. <bean id="ajaxLoginServiceTicketAction" class="com.unknow.cas.server.web.AjaxLoginServiceTicketAction"/>  

   

Java代码  

1. package com.haha.cas.server.web;  
2.   
3. import javax.servlet.http.HttpServletRequest;  
4.   
5. import org.apache.commons.lang.BooleanUtils;  
6. import org.apache.commons.lang.StringUtils;  
7. import org.jasig.cas.authentication.principal.Service;  
8. import org.jasig.cas.web.support.WebUtils;  
9. import org.springframework.webflow.action.AbstractAction;  
10. import org.springframework.webflow.execution.Event;  
11. import org.springframework.webflow.execution.RequestContext;  
12.   
13. public final class AjaxLoginServiceTicketAction extends AbstractAction {  
14.       
15.     // The default call back function name.  
16.     protected static final String J_CALLBACK = "feedBackUrlCallBack";  
17.   
18.     protected Event doExecute(final RequestContext context) {  
19.         HttpServletRequest request = WebUtils.getHttpServletRequest(context);  
20.         Event event = context.getCurrentEvent();  
21.         boolean isAjax = BooleanUtils.toBoolean(request.getParameter("isajax"));  
22.           
23.         if (!isAjax){  // 非 ajax/iframe 方式登录，返回当前 event.  
24.             return event;  
25.         }  
26.         boolean isLoginSuccess;  
27.         // Login Successful.  
28.         if ("success".equals(event.getId())){ //是否登录成功  
29.             final Service service = WebUtils.getService(context);  
30.             final String serviceTicket = WebUtils.getServiceTicketFromRequestScope(context);  
31.             if (service != null){  //设置登录成功之后 跳转的地址  
32.                 request.setAttribute("service", service.getId());  
33.             }  
34.             request.setAttribute("ticket", serviceTicket);  
35.             isLoginSuccess = true;  
36.         } else { // Login Fails..  
37.             isLoginSuccess = false;  
38.         }  
39.   
40.         boolean isFrame = BooleanUtils.toBoolean(request.getParameter("isframe"));  
41.         String callback = request.getParameter("callback");  
42.         if(StringUtils.isEmpty(callback)){ // 如果未转入 callback 参数，则采用默认 callback 函数名  
43.             callback = J_CALLBACK;  
44.         }  
45.         if(isFrame){ // 如果采用了 iframe ，则 concat 其 parent 。  
46.             callback = "parent.".concat(callback);  
47.         }  
48.         request.setAttribute("isFrame", isFrame);  
49.         request.setAttribute("callback", callback);  
50.         request.setAttribute("isLogin", isLoginSuccess);  
51.           
52.         return new Event(this, "local"); // 转入 ajaxLogin.jsp 页面  
53.     }  
54. }  

最后，再定义一下 view 的页面地址吧，修改 default_views.properties，添加: 

Properties代码  

1. viewAjaxLoginView.(class)=org.springframework.web.servlet.view.JstlView  
2. viewAjaxLoginView.url=/WEB-INF/view/jsp/custom/ui/ajaxLogin.jsp  

    可见，spring webflow 的可扩展性是相当的强，在 login flow 中增加一个业务逻辑，极其方便。 
    OK，再是 ajaxLogin.jsp 的代码，从 request attributes 中获取到  ST, Service 等参数信息: 
   

Html代码  

1. <%@ page contentType="text/html; charset=UTF-8"%>  
2. <html>  
3.     <head>  
4.         <title>正在登录....</title>  
5.     </head>  
6.     <body>  
7.         <script type="text/javascript">  
8.             <%  
9.                 Boolean isFrame = (Boolean)request.getAttribute("isFrame");  
10.                 Boolean isLogin = (Boolean)request.getAttribute("isLogin");  
11.                 // 登录成功  
12.                 if(isLogin){  
13.                     if(isFrame){%>  
14.                         parent.location.replace('${service}?ticket=${ticket}')  
15.                     <%} else{%>  
16.                         location.replace('${service}?ticket=${ticket}')  
17.                     <%}  
18.                 }  
19.             %>  
20.             // 回调  
21.             ${callback}({'login':${isLogin ? '"success"': '"fails"'}, 'msg': ${isLogin ? '""': '"用户名或密码错误！"'}})  
22.         </script>  
23.     </body>  
24. </html>  

    以上 jsp 将是在 iframe 中执行，看到这个 JSP 后，再回头看看 最上面 login 页面中 js 就很清楚了。 
    OK，至此，已经完成所有工作，下面测试一把，通过使用 Firbug 看看其处理情况。 


     Step 4:   测试，当登录失败后，是否在 www.portal.com:8080/login 页中显示www.passport.com:8080/cas/ 中返回过来的 error message; 当登录成功后，是否能进入登录成功后跳转的地址(www.portal.com:8080/uc/index)： 
    进入 http://www.portal.com:8080/login页： 
      
    可以看到，马上就会去向 passport 中请求 login ticket，也就是调用上面定义的函数  flushLoginTicket() : 
 
    OK,  随便输入用户名密码，提交登录，测试时，我先把删除 iframe 代码注释： 
    

可以看到，该 iframe 中输入出一段 js ，用于 callback  portal/login 页中的 feedBackUrlCallBack 函数，并且将错误信息页给该函数，从而实现登录结果的传递。最终效果如下： 
 
另外，上面说到 login ticket 只能使用一次，所以当登录失败后，会马上再次获取 login ticket. 

接下来，再测试一下登录OK的情况： 


可以看到，后面的 callback 实际上调用不调用已经没什么关系了，因为在之前已经进行了跳转。