Cas自定义登录页面Ajax实现-JavaScript-WEB前端-六狼论坛-IT论坛-计算机论坛

cydiay 发表于 2013-1-29 10:29:39

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";@Overrideprotected 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.JstlViewcasRedirectToRequestorView.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-state id="generateServiceTicket"><evaluate expression="generateServiceTicketAction" />    <transition on="success" to="loginResponse" />    <transition on="error" to="loginResponse" /><transition on="gateway" to="redirect" /></action-state>

再新增 loginResponse Action配置项：

<action-state id="loginResponse"><evaluate expression="ajaxLoginServiceTicketAction" /><transition on="success" to="warn" /><transition on="error" to="viewLoginForm" /><transition on="local" to="viewAjaxLoginView" /></action-state>

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

<action-state id="realSubmit"><evaluateexpression="authenticationViaFormAction.submit(flowRequestContext, flowScope.credentials, messageContext)" /><transition on="warn" to="warn" /><transition on="success" to="sendTicketGrantingTicket" />             <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.JstlViewviewAjaxLoginView.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 ticketflushLoginTicket();}else{//该处定义登录成功后需要执行的操作,比如刷新DIV等//......alert("登陆成功");}}var deleteIFrame = function (iframeName) {var iframe = $(iframeName); if (iframe) { // 删除用完的iframe，避免页面刷新或前进、后退时，重复执行该iframe的请求iframe.remove()}};// 由于一个 login ticket 只允许使用一次, 当每次登录需要调用该函数刷新 ltvar 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); $("#J_Execution").val(data); }});}</script></head><body><form action="http://localhost:8080/cas/login" method="post"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，该方法比较粗糙，但理解起来比较简单。

页: [1]

六狼论坛's Archiver

Cas自定义登录页面Ajax实现