CAS自定义登录页面

 

参考文档：http://denger.iteye.com/blog/809170

         http://denger.iteye.com/blog/1119233

 

    首先，在我们的子系统中应该有一个登录页面，通过输入用户名和密码提交至cas认证中心。不过前提是先要获取到 login tickt id. 也就是说当用户第一次进入子系统的登录页面时，在该页面中会通过js跳转到 cas/login 中的获取login ticket. 在 cas/login 的 flow 中先会判断请求的参数中是否包含了 get-lt 的参数。
 (1) 在cas的 login flow 中加入 ProvideLoginTicketAction 的流，主要用于判断该请求是否是来获取 lt，在cas-server端声明获取 login ticket action 类:
org.jasig.cas.util.ProvideLoginTicketAction

 

public class ProvideLoginTicketAction extends AbstractAction{

 @Override
 protected Event doExecute(RequestContext context) throws Exception {
  final HttpServletRequest request = WebUtils.getHttpServletRequest(context);

  if (request.getParameter("get-lt") != null && request.getParameter("get-lt").equalsIgnoreCase("true")) {
   return result("loginTicketRequested");
  }
  return result("continue");
 }
 
}

(2) 并且将该 action 声明在 cas-servlet.xml 中：

 

<bean id="provideLoginTicketAction" class="com.denger.sso.web.ProvideLoginTicketAction" /> 
    

(3) 还需要定义 loginTicket 的生成页也就是当返回 loginTicketRequested 的 view：
viewRedirectToRequestor.jsp

var _loginTicket = '${flowExecutionKey}';

 

(4) 并且需要将该 jsp 声明在 default_views.properites 中：

 

### Redirect with login ticket view
casRedirectToRequestorView.(class)=org.springframework.web.servlet.view.JstlView
casRedirectToRequestorView.url=/WEB-INF/view/jsp/default/ui/viewRedirectToRequestor.jsp

 

(5) 接下来要做的就是将该action 的处理加入到 login-webflow.xml 请求流中:

 

 <on-start>
        <evaluate expression="initialFlowSetupAction" />
    </on-start>
   <!-- 添加如下配置 :-->
    <action-state id="provideLoginTicket">
     <evaluate expression="provideLoginTicketAction"/>
     <transition on="loginTicketRequested" to ="viewRedirectToRequestor" />
  <transition on="continue" to="ticketGrantingTicketExistsCheck" />
    </action-state>

 <view-state id="viewRedirectToRequestor" view="casRedirectToRequestorView" model="credentials">
  <var name="credentials" class="org.jasig.cas.authentication.principal.UsernamePasswordCredentials" />
        <binder>
            <binding property="username" />
            <binding property="password" />
        </binder>
        <on-entry>
            <set name="viewScope.commandName" value="'credentials'" />
        </on-entry>
  <transition on="submit" bind="true" validate="true" to="realSubmit">
            <set name="flowScope.credentials" value="credentials" />
            <evaluate expression="authenticationViaFormAction.doBind(flowRequestContext, flowScope.credentials)" />
        </transition>
 </view-state>
       <!---添加结束处 --->
 <decision-state id="ticketGrantingTicketExistsCheck">
  <if test="flowScope.ticketGrantingTicketId neq null" then="hasServiceCheck" else="gatewayRequestCheck" />
 </decision-state>

(6)登录表单:

 

     <form action="http://www.passport.com:8080/cas/login" method="post" onsubmit="return loginValidate();" target="ssoLoginFrame">
      <ul>
       <span class="red" style="height:12px;" id="J_ErrorMsg"></span>

       <li>
        <em>用户名：</em>
        <input name="username" id="J_Username" type="text" class="line" style="width: 180px" />
       </li>
       <li>
        <em>密码：</em>
        <input name="password" type="password"  id="J_Password" class="line" style="width: 180px" />
       </li>

       <li class="mai">
        <em>&nbsp;</em>
        <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/>
        &nbsp;自动登录
        <a href="/retrieve">忘记密码？</a>
       </li>
       <li>
        <em>&nbsp;</em>
        <input type="hidden" name="isajax" value="true" />
        <input type="hidden" name="isframe" value="true" />
        <input type="hidden" name="lt" value="" id="J_LoginTicket">
        <input type="hidden" name="_eventId" value="submit" />
        <input name="" type="submit" value="登录" class="loginbanner" />
       </li>
      </ul>
     </form> 

 

Js代码

 

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

 

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

 

 // 登录验证函数, 由 onsubmit 事件触发
 var loginValidate = function(){
  var msg;
  if ($.trim($('#J_Username').val()).length == 0 ){
   msg = "用户名不能为空。";
  } else if ($.trim($('#J_Password').val()).length == 0 ){
   msg = "密码不能为空。";
  }
  if (msg && msg.length > 0) {
   $('#J_ErrorMsg').fadeOut().text(msg).fadeIn();
   return false;
   // Can't request the login ticket.
  } else if ($('#J_LoginTicket').val().length == 0){
   $('#J_ErrorMsg').text('服务器正忙，请稍后再试..');
   return false;
  } else {
   // 验证成功后，动态创建用于提交登录的 iframe
      $('body').append($('').attr({
       style: "display:none;width:0;height:0",
       id: "ssoLoginFrame",
       name: "ssoLoginFrame",
       src: "javascript:false;"
      }));
   return true;
  }
 }
 
 // 登录处理回调函数，将由 iframe 中的页同自动回调
 var feedBackUrlCallBack = function (result) {
  customLoginCallBack(result);
  deleteIFrame('#ssoLoginFrame');// 删除用完的iframe,但是一定不要在回调前删除，Firefox可能有问题的
 };

 // 自定义登录回调逻辑
 var customLoginCallBack = function(result){
  // 登录失败，显示错误信息
  if (result.login == 'fails'){
   $('#J_ErrorMsg').fadeOut().text(result.msg).fadeIn();
   // 重新刷新 login ticket
   flushLoginTicket();
  }
  // do more....
 }

 var deleteIFrame = function (iframeName) {
  var iframe = $(iframeName);
  if (iframe) { // 删除用完的iframe，避免页面刷新或前进、后退时，重复执行该iframe的请求
   iframe.remove()
  }
 };
 
 // 由于一个 login ticket 只允许使用一次, 当每次登录需要调用该函数刷新 lt
 var flushLoginTicket = function(){
  var _services = 'service=' + encodeURIComponent('http://www.portal.com:8080/uc/');
  $.getScript('http://www.passport.com:8080/cas/login?'+_services+'&get-lt=true&n='
    + new Date().getTime(),
  function(){
   // 将返回的 _loginTicket 变量设置到  input name="lt" 的value中。
   $('#J_LoginTicket').val(_loginTicket);
  });
  // Response Example:
  // var _loginTicket = 'e1s1';
 }
 

 

(8)  调整 CAS Server端，使其适应 Iframe 方式登录，并使其支持回调。
打开 login-webflow.xml，找到 的 Flow-Action 配置项:

 

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

 

再新增 loginResponse Action配置项：

 

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

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

 

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

  
 

还需要配置 viewAjaxLoginView 的 state:

 

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

 

 

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

 

<bean id="ajaxLoginServiceTicketAction" class="org.jasig.cas.util.AjaxLoginServiceTicketAction"/>

 

Java代码:

 

package org.jasig.cas.util;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang.BooleanUtils;
import org.apache.commons.lang.StringUtils;
import org.jasig.cas.authentication.principal.Service;
import org.jasig.cas.web.support.WebUtils;
import org.springframework.webflow.action.AbstractAction;
import org.springframework.webflow.execution.Event;
import org.springframework.webflow.execution.RequestContext;

public final class AjaxLoginServiceTicketAction extends AbstractAction {
 
 // The default call back function name.
 protected static final String J_CALLBACK = "feedBackUrlCallBack";

    protected Event doExecute(final RequestContext context) {
        HttpServletRequest request = WebUtils.getHttpServletRequest(context);
        Event event = context.getCurrentEvent();
        boolean isAjax = BooleanUtils.toBoolean(request.getParameter("isajax"));
       
        if (!isAjax){  // 非 ajax/iframe 方式登录，返回当前 event.
         return event;
        }
     boolean isLoginSuccess;
     // Login Successful.
     if ("success".equals(event.getId())){ //是否登录成功
      final Service service = WebUtils.getService(context);
            final String serviceTicket = WebUtils.getServiceTicketFromRequestScope(context);
            if (service != null){  //设置登录成功之后 跳转的地址
             request.setAttribute("service", service.getId());
            }
            request.setAttribute("ticket", serviceTicket);
            isLoginSuccess = true;
     } else { // Login Fails..
      isLoginSuccess = false;
     }

        boolean isFrame = BooleanUtils.toBoolean(request.getParameter("isframe"));
        String callback = request.getParameter("callback");
        if(StringUtils.isEmpty(callback)){ // 如果未转入 callback 参数，则采用默认 callback 函数名
         callback = J_CALLBACK;
        }
        if(isFrame){ // 如果采用了 iframe ，则 concat 其 parent 。
         callback = "parent.".concat(callback);
        }
        request.setAttribute("isFrame", isFrame);
        request.setAttribute("callback", callback);
        request.setAttribute("isLogin", isLoginSuccess);
       
        return new Event(this, "local"); // 转入 ajaxLogin.jsp 页面
    }
}

 

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

 

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

 

Html代码:

 

 

<%@ page contentType="text/html; charset=UTF-8"%>
<html>
 <head>
  <title>正在登录....</title>
 </head>
 <body>
  <script type="text/javascript">
   <%
    Boolean isFrame = (Boolean)request.getAttribute("isFrame");
    Boolean isLogin = (Boolean)request.getAttribute("isLogin");
    // 登录成功
    if(isLogin){
     if(isFrame){%>
      parent.location.replace('${service}?ticket=${ticket}')
     <%} else{%>
      location.replace('${service}?ticket=${ticket}')
     <%}
    }
   %>
   // 回调
   ${callback}({'login':${isLogin ? '"success"': '"fails"'}, 'msg': ${isLogin ? '""': '"用户名或密码错误！"'}})
  </script>
 </body>
</html>