轉：http://blog.csdn.net/ae6623/article/details/8861065
SSO單點登錄系列4：cas-server登錄頁面自定義修改過程,全新DIY。
目標：
下面是正文：
打開cas的默認首頁，映入眼簾的是滿眼的中文and英文混雜體，作為一名合格的用戶，我表示很不開心。
於是，打開 Nodepad++，尋找C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui \casLoginView.jsp這個頁面，開始了我的改造之旅，作為一名合格的分享ser，我表示全程都會轉化為文檔，方便以后的兄弟更好的研究比這 個更高深的東西，這種低能的玩意，我來就行。
廢話很多，開搞。
1.找到我們要刪除的html代碼
ok 我們查到了，原來這個languages是存在於一個叫做div id = list-language 節點下
2.我們刪掉它，然后刷新一下。當然做這些改動之前記得備份好自己的jsp，俗話說嘛，寫程序，難免有失手的時候。一個備份在手，省卻N多重構。
3.下面開始干掉上面的那個HTTPS error提示，因為我的程序嫌證書太麻煩，所以使用的是改造版的http驗證，不會的去參閱我的前幾篇博客。
刪掉如下代碼
<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>
截圖：
刷新之后，
4.好干凈的說。
5.隨后，我們添加一個輪播大圖展示模塊，以顯示我們公司或個人網站的用戶體驗度。
奧對了，如果jsp里面你修改成了中文，那么可能頁面會亂碼，我的解決辦法是把此jsp用記事本打開，然后另存為UTF-8的格式刷新頁面即可無亂碼。
然后我們找到 C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\includes \bottom.jsp這個文件，由於cas使用的jquery版本是1.4而且還是調用的谷歌服務器上的js文件，我們把它屏蔽掉，加入本地的js即 可，cas頁面修改需要注意路徑問題，基本上加個標簽就ok了。
6.然后找到C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\casLoginView.jsp這個dom節點：
<div class="sidebar-content">
<div>
在這個div之后。我們添加我們自己的div就可以啦~~
記住一點：js文件引入語句和css文件引用位置的放入位置：
-
css文件放在C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\includes\top.jsp的head標簽里面
-
js文件放在top.jsp或者casLoginView.jsp下均可，但是路徑不是相對路徑而是spring標簽那種：
-
示例如下，這樣寫才行用<c:url>標簽
<span style="font-family:Microsoft YaHei;font-size:14px;"><script src="<c:url value="/js/jquery.slides.js" />"></script></span>
4.css文件這樣寫：
<span style="font-family:Microsoft YaHei;font-size:14px;"><link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" /> <link type="text/css" rel="stylesheet" href="<c:url value="/css/font-awesome.min.css" />" /></span>
ok,基本上就是這個樣子了。我是用的jquery輪播插件：http://www.slidesjs.com/
這里面有官方示例，你們自己玩吧。我把自己的代碼貼出來，對比着照葫蘆畫瓢吧。最重要的是要理解，然后下節會講cas登錄頁面的驗證碼功能。
C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\casLoginView.jsp
<span style="font-family:Microsoft YaHei;font-size:14px;"><%-- Licensed to Jasig under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Jasig licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at the following location: http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --%> <jsp:directive.include file="includes/top.jsp" /> <div class="box fl-panel" id="login"> <form:form method="post" id="fm1" cssClass="fm-v clearfix" commandName="${commandName}" htmlEscape="true"> <form:errors path="*" id="msg" cssClass="errors" element="div" /> <!-- <spring:message code="screen.welcome.welcome" /> --> <h2><spring:message code="screen.welcome.instructions" /></h2> <div class="row fl-controls-left"> <label for="username" class="fl-label"><spring:message code="screen.welcome.label.netid" /></label> <c:if test="${not empty sessionScope.openIdLocalId}"> <strong>${sessionScope.openIdLocalId}</strong> <input type="hidden" id="username" name="username" value="${sessionScope.openIdLocalId}" /> </c:if> <c:if test="${empty sessionScope.openIdLocalId}"> <spring:message code="screen.welcome.label.netid.accesskey" var="userNameAccessKey" /> <form:input cssClass="required" cssErrorClass="error" id="username" size="25" tabindex="1" accesskey="${userNameAccessKey}" path="username" autocomplete="false" htmlEscape="true" /> </c:if> </div> <div class="row fl-controls-left"> <label for="password" class="fl-label"><spring:message code="screen.welcome.label.password" /></label> <%-- NOTE: Certain browsers will offer the option of caching passwords for a user. There is a non-standard attribute, "autocomplete" that when set to "off" will tell certain browsers not to prompt to cache credentials. For more information, see the following web page: http://www.geocities.com/technofundo/tech/web/ie_autocomplete.html --%> <spring:message code="screen.welcome.label.password.accesskey" var="passwordAccessKey" /> <form:password cssClass="required" cssErrorClass="error" id="password" size="25" tabindex="2" path="password" accesskey="${passwordAccessKey}" htmlEscape="true" autocomplete="off" /> </div> <div class="row check"> <input id="warn" name="warn" value="true" tabindex="3" accesskey="<spring:message code="screen.welcome.label.warn.accesskey" />" type="checkbox" /> <label for="warn"><spring:message code="screen.welcome.label.warn" /></label> </div> <div class="row btn-row"> <input type="hidden" name="lt" value="${loginTicket}" /> <input type="hidden" name="execution" value="${flowExecutionKey}" /> <input type="hidden" name="_eventId" value="submit" /> <input class="btn-submit" name="submit" accesskey="l" value="<spring:message code="screen.welcome.button.login" />" tabindex="4" type="submit" /> <input class="btn-reset" name="reset" accesskey="c" value="<spring:message code="screen.welcome.button.clear" />" tabindex="5" type="reset" /> </div> </form:form> </div> <div id="sidebar"> <div class="sidebar-content"> <div> <!-- SlidesJS Required: Start Slides --> <!-- The container is used to define the width of the slideshow --> <div class="container"> <div id="slides"> <img src="<c:url value="/img/example-slide-1.jpg" />" > <img src="<c:url value="/img/example-slide-2.jpg" />" > <img src="<c:url value="/img/example-slide-3.jpg" />" > <img src="<c:url value="/img/example-slide-4.jpg" />" > <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a> <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a> </div> </div> <!-- End SlidesJS Required: Start Slides --> <script src="<c:url value="/js/jquery.slides.js" />"></script> <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready --> <script> $(function() { var a = $('#slides'); a.slidesjs({ width: 870, height: 480, navigation: false, pagination: { effect: "fade" }, effect: { fade: { speed: 400 } }, play: { auto: true, effect: "fade", interval: 4000, // swap: true } }); }); </script> <!-- End SlidesJS Required --> </div> </div> </div> <jsp:directive.include file="includes/bottom.jsp" /></span>
C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\includes\top.jsp
<span style="font-family:Microsoft YaHei;font-size:14px;"><%-- Licensed to Jasig under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Jasig licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at the following location: http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%@ page session="true" %> <%@ page pageEncoding="UTF-8" %> <%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <spring:theme code="mobile.custom.css.file" var="mobileCss" text="" /> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>CAS – Central Authentication Service</title> <c:if test="${not empty requestScope['isMobile'] and not empty mobileCss}"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!--<link type="text/css" rel="stylesheet" media="screen" href="<c:url value="/css/fss-framework-1.1.2.css" />" /> <link type="text/css" rel="stylesheet" href="<c:url value="/css/fss-mobile-${requestScope['browserType']}-layout.css" />" /> <link type="text/css" rel="stylesheet" href="${mobileCss}" />--> </c:if> <spring:theme code="standard.custom.css.file" var="customCssFile" /> <link type="text/css" rel="stylesheet" href="<c:url value="${customCssFile}" />" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="icon" href="<c:url value="/favicon.ico" />" type="image/x-icon" /> <script src="<c:url value="/js/jquery-1.9.1.min.js" />"></script> <!-- CSS for slidesjs.com example <link type="text/css" rel="stylesheet" href="<c:url value="/css/example.css" />" /> Central Authentication Service (CAS) <!-- End CSS for slidesjs.com example --> <link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" /> <link type="text/css" rel="stylesheet" href="<c:url value="/css/font-awesome.min.css" />" /> </head> <body id="cas" class="fl-theme-iphone"> <div class="flc-screenNavigator-view-container"> <div class="fl-screenNavigator-view"> <div id="header" class="flc-screenNavigator-navbar fl-navbar fl-table"> <h1 id="company-name">123</h1> <h1 id="app-name" class="fl-table-cell" style="background: none repeat scroll 0% 0% rgb(255, 255, 221);color:#000">落雨 </h1> </div> <div id="content" class="fl-screenNavigator-scroll-container"></span>
main.css
<span style="font-family:Microsoft YaHei;font-size:14px;"><!-- SlidesJS Optional: If you'd like to use this design --> body { } #slides, #slides2, #slides3 { display: none; margin-bottom:50px; } a{ text-decoration: none; } .slidesjs-navigation { margin-top:3px; } .slidesjs-previous { margin-right: 5px; float: left; } .slidesjs-next { margin-right: 5px; float: left; } .slidesjs-pagination { margin: 6px 0 0; float: right; list-style: none; } .slidesjs-pagination li { float: left; margin: 0 1px; } .slidesjs-pagination li a { display: block; width: 13px; height: 0; padding-top: 13px; background-image: url(../img/pagination.png); background-position: 0 0; float: left; overflow: hidden; } .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px } .slidesjs-pagination li a:hover { background-position: 0 -26px } a:link, a:visited { color: #333 } a:hover, a:active { color: #9e2020 } .navbar { overflow: hidden } <!-- End SlidesJS Optional--> <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow --> #slides { display: none } .container { margin: 0 auto } /* For tablets & smart phones */ @media (max-width: 767px) { body { padding-left: 20px; padding-right: 20px; } .container { width: auto } } /* For smartphones */ @media (max-width: 480px) { .container { width: auto } } /* For smaller displays like laptops */ @media (min-width: 768px) and (max-width: 979px) { .container { width: 724px } } /* For larger displays */ @media (min-width: 1200px) { .container { width: 1170px } }</span>
C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui\includes\bottom.jsp
<%-- Licensed to Jasig under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Jasig licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at the following location: http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> </div> <div id="footer" class="fl-panel fl-note fl-bevel-white fl-font-size-80"> <a id="jasig" href="http://www.jasig.org" title="go to Jasig home page"></a> <div id="copyright"> <p>Copyright © 2005 - 2012 Jasig, Inc. All rights reserved.</p> <p>Powered by <a href="http://www.jasig.org/cas">Jasig Central Authentication Service <%=org.jasig.cas.CasVersion.getVersion()%></a></p> </div> </div> </div> </div> <!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script > <script type="text/javascript" src="<c:url value="/js/cas.js" />"></script> </body> </html>
附 pad 預覽圖：
