Cas自定义登录页面Ajax实现

本文是基于CAS 之自定义登录页实践及CAS 之 跨域 Ajax 登录实践而实现的,主要是针对最新的Cas实现自定义登录页的Ajax跨域实现.

环境：
        cas-server-3.5.1-release
        cas地址:  http://localhost:8080/cas/
        client地址:  http://localhost/web

从CAS服务端生成lt及execution，在cas的 login flow 中加入 ProvideLoginTicketAction 的流，主要用于判断该请求是否是来获取 lt，在cas-server端声明获取 login ticket action 类:

org.jasig.cas.web.flow.ProvideLoginTicketAction

import javax.servlet.http.HttpServletRequest;

import org.jasig.cas.util.UniqueTicketIdGenerator;
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;

/**
 * Opens up the CAS web flow to allow external retrieval of a login ticket.
 * 
 * @author cydiay
 */
public class ProvideLoginTicketAction extends AbstractAction{

	private static final String PREFIX = "LT";
	
	@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")) {
			final String loginTicket = this.ticketIdGenerator.getNewTicketId(PREFIX);
			WebUtils.putLoginTicket(context, loginTicket);
			return result("loginTicketRequested");
		}
		return result("continue");
	}
	
    private UniqueTicketIdGenerator ticketIdGenerator;
    
    public void setTicketIdGenerator(final UniqueTicketIdGenerator generator) {
        this.ticketIdGenerator = generator;
    }
}

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

<bean id="provideLoginTicketAction" class="org.jasig.cas.web.flow.ProvideLoginTicketAction" 
      	p:ticketIdGenerator-ref="loginTicketUniqueIdGenerator"/>

还需要定义 loginTicket 的生成页也就是当返回 loginTicketRequested 的 view：
位置/WEB-INF/view/jsp/default/ui

viewRedirectToRequestor.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String ajax = request.getParameter("n");
	//当执行Ajax自定义页面时执行以下操作
	if(ajax!=null && ajax.length()>0){
		response.getWriter().print(request.getAttribute("loginTicket")+"&"+request.getAttribute("flowExecutionKey"));
	} else {
	
	//正常cas执行
%>	 	
	 <script>window.location.href = "/cas/login";</script>
<%		
	}
%>

并且需要将该 jsp 声明在 default._views.properites 中：

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

接下来要做的就是将该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">
        <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 != null" then="hasServiceCheck" else="gatewayRequestCheck" />
    </decision-state>

调整 CAS Server端，使其适应 Iframe 方式登录，并使其支持回调。
打开 login-webflow.xml，找到 <action-state id="generateServiceTicket"> 的 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="com.unknow.cas.server.web.AjaxLoginServiceTicketAction"/>

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/custom/ui/ajaxLogin.jsp

再是 ajaxLogin.jsp 的代码，从 request attributes 中获取到  ST, Service 等参数信息:

<%@ 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"': '"false"'}, 'msg': ${isLogin ? '""': '"用户名或密码错误！"'}})
		</script>
	</body>
</html>

然后客户端登录页面login.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cas登录</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
		flushLoginTicket();  // 进入登录页，则获取login ticket，该函数在下面定义。
	});

	// 登录验证函数, 由 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($('<iframe/>').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 == 'false'){
			$('#J_ErrorMsg').fadeOut().text(result.msg).fadeIn();
			// 重新刷新 login ticket
			flushLoginTicket();
		}else{
			//该处定义登录成功后需要执行的操作,比如刷新DIV等
			//......
			alert("登陆成功");
		}
	}

	var deleteIFrame = function (iframeName) {
		var iframe = $(iframeName); 
		if (iframe) { // 删除用完的iframe，避免页面刷新或前进、后退时，重复执行该iframe的请求
			iframe.remove()
		}
	};

	// 由于一个 login ticket 只允许使用一次, 当每次登录需要调用该函数刷新 lt
	var flushLoginTicket = function(){
		var _services = 'service=' + encodeURIComponent('http://localhost/web/login.jsp');
		var casUrl = 'http://localhost:8080/cas/login?'+_services+'&get-lt=true&n=' + new Date().getTime();
		$.ajax({
		    type: "GET",
		    url: casUrl,
		    success: function(data){
		    	var data = data.split('&');
		    	$('#J_LoginTicket').val(data[0]);
		    	$("#J_Execution").val(data[1]);
		    }
		});
	}
</script>
</head>
<body>
	<form action="http://localhost:8080/cas/login" method="post" onsubmit="return loginValidate();" target="ssoLoginFrame">
	<ul>
		<li><span class="red" style="height:12px;" id="J_ErrorMsg"></span></li>

		<li>
			<em>用户名：</em>
			<input name="username" id="J_Username" type="text" style="width: 180px" />
		</li>
		<li>
			<em>密　码：</em>
			<input name="password" type="password"  id="J_Password" 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="text" name="callback" value="feedBackUrlCallBack" />
			<input type="text" name="lt" value="1" id="J_LoginTicket">
			<input type="text" name="execution" id="J_Execution" value="" />
			<input type="hidden" name="_eventId" value="submit" />
			<input name="" type="submit" value="登录" />
		</li>
	</ul>
</form>
</body>
</html>

Url中的service参数为登录成功后返回的页面,因为我在ajaxLogin.jsp页面并没有设置使用iframe时跳转，所以看到的结果是页面没跳转,但是设置该参数还是很有必要的。比如当使用spring security时，service=http://localhost/web/j_spring_cas_security_check ， 当登录成功时就会通过该URL对用户进行授权认证。

至此，整个开发就算完成， 本人也是才开始学cas，该方法比较粗糙，但理解起来比较简单。

评论

2 楼 leyou 2013-10-11  

nano 写道

请教：按照楼主做法，前端页面ajax没法取得loginTicket，初步怀疑login-webflow配置错误了，楼主能否把webflow内容贴出来看看

我也不能取到loginTicket，我的客户端采用了Spring Security 3，按照博主的方法，response.getWriter().print(request.getAttribute("loginTicket")+"&"+request.getAttribute("flowExecutionKey"));
这一步已经把loginTicket响应回去，但是客户端怎么获取不到呢？客户端接受到的响应为空，难道是因为SpringSecurity吗？

1 楼 nano 2013-02-28  

请教：按照楼主做法，前端页面ajax没法取得loginTicket，初步怀疑login-webflow配置错误了，楼主能否把webflow内容贴出来看看