试水CAS-4.0.3第02节_CAS服务端登录页个性化

Posted liguangsunls

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了试水CAS-4.0.3第02节_CAS服务端登录页个性化相关的知识,希望对你有一定的参考价值。

完整版见https://jadyer.github.io/2015/07/16/sso-cas-login-diy/




/**
 * @see ------------------------------------------------------------------------------------------------------------------------
 * @see CAS个性登录页
 * @see 0.cas的页面显示控制是集中在\WEB-INF\cas.properties中的cas.viewResolver.basename属性的,它的值默认是default_views
 * @see   所以cas会去classpath中寻找default_views.properties,在default_views.properties中指定了登录登出页面等
 * @see 1.改动cas.properties文件,cas.viewResolver.basename=msxf,再拷贝default_views.properties为msxf.properties
 * @see 2.改动msxf.properties文件,/WEB-INF/view/jsp/default改为/WEB-INF/view/jsp/msxf
 * @see   当中casLoginView.url表示默认登录页,casLoginGenericSuccessView.url表示默认登录成功页
 * @see 3.复制/WEB-INF/view/jsp/default/及其子文件夹全部文件到/WEB-INF/view/jsp/msxf/中
 * @see   接下来就能够任意改动登录页面了
 * @see   注意\WEB-INF\view\jsp\msxf\ui\includes\bottom.jsp页面中引用了googleapis的一些jquery库
 * @see   能够换成百度CDN(http://cdn.code.baidu.com/)的,比方http://apps.bdimg.com/libs/jqueryui/1.10.2/jquery-ui.min.js
 * @see ------------------------------------------------------------------------------------------------------------------------
 * @create 2015-7-16 下午4:56:17
 * @author 玄玉<http://blog.csdn.net/jadyer>
 */

以下是我改动的casLoginView.jsp

<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" scope="session"/>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>CAS单点登录系统</title>
	<link rel="icon" type="image/x-icon" href="${ctx}/favicon.ico"/>
	<script type="text/javascript" src="${ctx}/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery-ui-1.10.2.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/cas.js"></script>
	<!--[if lt IE 9]>
		<script src="${ctx}/js/html5shiv-3.7.2.min.js" type="text/javascript"></script>
	<![endif]-->
</head>

<style>
body {background-color: #CBE0C9;}
#msg {padding:20px; margin-bottom:10px;}
#msg.errors {border:1px dotted #BB0000; color:#BB0000; padding-left:100px; background:url(${ctx}/images/error.gif) no-repeat 20px center;}
</style>

<body>
<c:if test="${not pageContext.request.secure}">
	<div id="msg" class="errors">
		<h2>Non-secure Connection</h2>
		<p>You are currently accessing CAS over a non-secure connection.  Single Sign On WILL NOT WORK.  In order to have single sign on work, you MUST log in over HTTPS.</p>
	</div>
</c:if>
<form:form method="post" commandName="${commandName}" htmlEscape="true">
	<!-- 
	cssClass用于指定表单元素CSS样式名,相当于HTML元素的class属性
	cssStyle用于指定表单元素样式,相当于HTML元素的style属性
	cssErrorClass用于指定表单元素错误发生时相应的样式
	path属性用于绑定表单对象的属性值,它支持级联属性,比方path="user.userName"将调用表单对象getUser.getUserName()绑定表单对象的属性值
	 -->
	<form:errors path="*" id="msg" cssClass="errors" element="div" htmlEscape="false"/>
	<input type="hidden" name="lt" value="${loginTicket}"/>
	<input type="hidden" name="execution" value="${flowExecutionKey}"/>
	<input type="hidden" name="_eventId" value="submit"/>
	<table border="9">
		<tr>
			<td>
				<c:if test="${not empty sessionScope.openIdLocalId}">
					<strong>${sessionScope.openIdLocalId}</strong>
					<input type="hidden" name="username" value="${sessionScope.openIdLocalId}"/>
				</c:if>
				<c:if test="${empty sessionScope.openIdLocalId}">
					<form:input tabindex="1" path="username" placeholder="帐号" htmlEscape="true" maxlength="16" size="25"/>
				</c:if>
			</td>
		</tr>
		<tr>
			<td>
				<form:password tabindex="2" path="password" placeholder="密码" htmlEscape="true" maxlength="16" size="25"/>
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" tabindex="3" name="warn" value="true"/>
				<label for="warn">转向其它网站前提示我</label>
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" tabindex="4" value="登录"/>
			</td>
		</tr>
	</table>
</form:form>
</body>
</html>
以下是我改动的casGenericSuccess.jsp
<%@ page pageEncoding="UTF-8"%>
<body style="background-color:#CBE0C9;">
	<span style="color:red; font-size:64px; font-weight:bold;">登录成功</span>
</body>

以下是效果图

技术分享


技术分享

技术分享












以上是关于试水CAS-4.0.3第02节_CAS服务端登录页个性化的主要内容,如果未能解决你的问题,请参考以下文章

CAS 入门实战--自定义登录页面

CAS 入门实战--自定义登录页面

CAS 5.3.1系列之使用cas overlay搭建服务端

CAS —— Mac下配置CAS到Tomcat(服务端)(转)

CAS 5.3.1系列之使用cas overlay搭建服务端

cas4.2.7实现单点登录