zoukankan      html  css  js  c++  java

  • SSO单点登录系列4：cas-server登录页面自定义修改过程（jsp页面修改）

    落雨 cas 单点登录


    SSO单点登录系列4：cas-server登录页面自定义修改过程,全新DIY。


    目标：


      












































































    下面是正文：


    打开cas的默认首页，映入眼帘的是满眼的中文and英文混杂体，作为一名合格的用户，我表示很不开心。


    于是，打开Nodepad++，寻找C: omcat7webappscasServerWEB-INFviewjspdefaultuicasLoginView.jsp这个页面，开始了我的改造之旅，作为一名合格的分享ser，我表示全程都会转化为文档，方便以后的兄弟更好的研究比这个更高深的东西，这种低能的玩意，我来就行。


    废话很多，开搞。

    1.找到我们要删除的html代码






















    ok 我们查到了，原来这个languages是存在于一个叫做div id = list-language 节点下


    2.我们删掉它，然后刷新一下。当然做这些改动之前记得备份好自己的jsp，俗话说嘛，写程序，难免有失手的时候。一个备份在手，省却N多重构。





    刷新后：

    3.下面开始干掉上面的那个HTTPS error提示，因为我的程序嫌证书太麻烦，所以使用的是改造版的http验证，不会的去参阅我的前几篇博客。


    删掉如下代码


    [html] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><c:if test="${not pageContext.request.secure}">  
    2. <div id="msg" class="errors">  
    3.     <h2>Non-secure Connection</h2>  
    4.     <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>  
    5. </div>  
    6. </c:if></span>  

    截图：


    刷新之后，

    4.好干净的说。


    5.随后，我们添加一个轮播大图展示模块，以显示我们公司或个人网站的用户体验度。


    奥对了，如果jsp里面你修改成了中文，那么可能页面会乱码，我的解决办法是把此jsp用记事本打开，然后另存为UTF-8的格式刷新页面即可无乱码。


    然后我们找到C: omcat7webappscasServerWEB-INFviewjspdefaultuiincludesottom.jsp这个文件，由于cas使用的jQuery版本是1.4而且还是调用的谷歌服务器上的js文件，我们把它屏蔽掉，加入本地的js即可，cas页面修改需要注意路径问题，基本上加个标签就ok了。




    6.然后找到C: omcat7webappscasServerWEB-INFviewjspdefaultuicasLoginView.jsp这个dom节点：

    <div class="sidebar-content">

    <div>

    在这个div之后。我们添加我们自己的div就可以啦~~


    记住一点：js文件引入语句和css文件引用位置的放入位置：

    1. css文件放在C: omcat7webappscasServerWEB-INFviewjspdefaultuiincludes op.jsp的head标签里面

    2. js文件放在top.jsp或者casLoginView.jsp下均可，但是路径不是相对路径而是spring标签那种：

    3.  示例如下，这样写才行用<c:url>标签

    [html] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><script src="<c:url value="/js/jquery.slides.js" />"></script></span>  
       4.css文件这样写：
    [html] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />  
    2. <link type="text/css" rel="stylesheet" href="<c:url value="/css/font-awesome.min.css" />" /></span>  

    ok,基本上就是这个样子了。我是用的jquery轮播插件：http://www.slidesjs.com/


    这里面有官方示例，你们自己玩吧。我把自己的代码贴出来，对比着照葫芦画瓢吧。最重要的是要理解，然后下节会讲cas登录页面的验证码功能。


    C: omcat7webappscasServerWEB-INFviewjspdefaultuicasLoginView.jsp


    [html] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><%--  
    2.                            
    3.     Licensed to Jasig under one or more contributor license  
    4.     agreements. See the NOTICE file distributed with this work  
    5.     for additional information regarding copyright ownership.  
    6.     Jasig licenses this file to you under the Apache License,  
    7.     Version 2.0 (the "License"); you may not use this file  
    8.     except in compliance with the License.  You may obtain a  
    9.     copy of the License at the following location:  
    10.                            
    11.       http://www.apache.org/licenses/LICENSE-2.0  
    12.                            
    13.     Unless required by applicable law or agreed to in writing,  
    14.     software distributed under the License is distributed on an  
    15.     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY  
    16.     KIND, either express or implied.  See the License for the  
    17.     specific language governing permissions and limitations  
    18.     under the License.  
    19.                            
    20. --%>  
    21. <jsp:directive.include file="includes/top.jsp" />  
    22.                            
    23.                            
    24.                            
    25.   <div class="box fl-panel" id="login">  
    26.             <form:form method="post" id="fm1" cssClass="fm-v clearfix" commandName="${commandName}" htmlEscape="true">  
    27.                   <form:errors path="*" id="msg" cssClass="errors" element="div" />  
    28.                 <!-- <spring:message code="screen.welcome.welcome" /> -->  
    29.                     <h2><spring:message code="screen.welcome.instructions" /></h2>  
    30.                     <div class="row fl-controls-left">  
    31.                         <label for="username" class="fl-label"><spring:message code="screen.welcome.label.netid" /></label>  
    32.                         <c:if test="${not empty sessionScope.openIdLocalId}">  
    33.                         <strong>${sessionScope.openIdLocalId}</strong>  
    34.                         <input type="hidden" id="username" name="username" value="${sessionScope.openIdLocalId}" />  
    35.                         </c:if>  
    36.                            
    37.                         <c:if test="${empty sessionScope.openIdLocalId}">  
    38.                         <spring:message code="screen.welcome.label.netid.accesskey" var="userNameAccessKey" />  
    39.                         <form:input cssClass="required" cssErrorClass="error" id="username" size="25" tabindex="1" accesskey="${userNameAccessKey}" path="username" autocomplete="false" htmlEscape="true" />  
    40.                         </c:if>  
    41.                     </div>  
    42.                     <div class="row fl-controls-left">  
    43.                         <label for="password" class="fl-label"><spring:message code="screen.welcome.label.password" /></label>  
    44.                         <%--  
    45.                         NOTE: Certain browsers will offer the option of caching passwords for a user.  There is a non-standard attribute,  
    46.                         "autocomplete" that when set to "off" will tell certain browsers not to prompt to cache credentials.  For more  
    47.                         information, see the following web page:  
    48.                         http://www.geocities.com/technofundo/tech/web/ie_autocomplete.html  
    49.                         --%>  
    50.                         <spring:message code="screen.welcome.label.password.accesskey" var="passwordAccessKey" />  
    51.                         <form:password cssClass="required" cssErrorClass="error" id="password" size="25" tabindex="2" path="password"  accesskey="${passwordAccessKey}" htmlEscape="true" autocomplete="off" />  
    52.                     </div>  
    53.                     <div class="row check">  
    54.                         <input id="warn" name="warn" value="true" tabindex="3" accesskey="<spring:message code="screen.welcome.label.warn.accesskey" />" type="checkbox" />  
    55.                         <label for="warn"><spring:message code="screen.welcome.label.warn" /></label>  
    56.                     </div>  
    57.                     <div class="row btn-row">  
    58.                         <input type="hidden" name="lt" value="${loginTicket}" />  
    59.                         <input type="hidden" name="execution" value="${flowExecutionKey}" />  
    60.                         <input type="hidden" name="_eventId" value="submit" />  
    61.                            
    62.                         <input class="btn-submit" name="submit" accesskey="l" value="<spring:message code="screen.welcome.button.login" />" tabindex="4" type="submit" />  
    63.                         <input class="btn-reset" name="reset" accesskey="c" value="<spring:message code="screen.welcome.button.clear" />" tabindex="5" type="reset" />  
    64.                     </div>  
    65.             </form:form>  
    66.           </div>  
    67.             <div id="sidebar">  
    68.                 <div class="sidebar-content">  
    69.                                            
    70.                 <div>  
    71.                                            
    72.                                              <!-- SlidesJS Required: Start Slides -->  
    73.                               <!-- The container is used to define the width of the slideshow -->  
    74.                               <div class="container">  
    75.                                 <div id="slides">  
    76.                                   <img src="<c:url value="/img/example-slide-1.jpg" />" >  
    77.                                   <img src="<c:url value="/img/example-slide-2.jpg" />" >  
    78.                                   <img src="<c:url value="/img/example-slide-3.jpg" />" >  
    79.                                   <img src="<c:url value="/img/example-slide-4.jpg" />" >  
    80.                                   <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>  
    81.                                   <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>  
    82.                                 </div>  
    83.                               </div>  
    84.                               <!-- End SlidesJS Required: Start Slides -->  
    85.                            
    86.                               <script src="<c:url value="/js/jquery.slides.js" />"></script>  
    87.                            
    88.                               <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->  
    89.                               <script>  
    90.                                   $(function() {  
    91.                                   var a =  $('#slides');  
    92.                                          a.slidesjs({  
    93.                                              870,  
    94.                                             height: 480,  
    95.                                             navigation: false,  
    96.                                         pagination: {  
    97.                                           effect: "fade"  
    98.                                            },  
    99.                                         effect: {  
    100.                                           fade: {  
    101.                                             speed: 400  
    102.                                           }  
    103.                                         }, play: {  
    104.                                               auto: true,  
    105.                                               effect: "fade",  
    106.                                               interval: 4000,  
    107.                                              // swap: true  
    108.                                             }  
    109.                                           });  
    110.                                         });  
    111.                               </script>  
    112.                               <!-- End SlidesJS Required -->  
    113.                                            
    114.                 </div>  
    115.                 </div>  
    116.             </div>  
    117. <jsp:directive.include file="includes/bottom.jsp" /></span>  


    C: omcat7webappscasServerWEB-INFviewjspdefaultuiincludes op.jsp

    [html] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><%--  
    2.                            
    3.     Licensed to Jasig under one or more contributor license  
    4.     agreements. See the NOTICE file distributed with this work  
    5.     for additional information regarding copyright ownership.  
    6.     Jasig licenses this file to you under the Apache License,  
    7.     Version 2.0 (the "License"); you may not use this file  
    8.     except in compliance with the License.  You may obtain a  
    9.     copy of the License at the following location:  
    10.                            
    11.       http://www.apache.org/licenses/LICENSE-2.0  
    12.                            
    13.     Unless required by applicable law or agreed to in writing,  
    14.     software distributed under the License is distributed on an  
    15.     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY  
    16.     KIND, either express or implied.  See the License for the  
    17.     specific language governing permissions and limitations  
    18.     under the License.  
    19.                            
    20. --%>  
    21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    22. <%@ page session="true" %>  
    23. <%@ page pageEncoding="UTF-8" %>  
    24. <%@ page contentType="text/html; charset=UTF-8" %>  
    25. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    26. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
    27. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  
    28. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
    29. <spring:theme code="mobile.custom.css.file" var="mobileCss" text="" />  
    30. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
    31.     <head>  
    32.         <title>CAS – Central Authentication Service</title>  
    33.         <c:if test="${not empty requestScope['isMobile'] and not empty mobileCss}">  
    34.              <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
    35.              <meta name="apple-mobile-web-app-capable" content="yes" />  
    36.              <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    37.              <!--<link type="text/css" rel="stylesheet" media="screen" href="<c:url value="/css/fss-framework-1.1.2.css" />" />  
    38.              <link type="text/css" rel="stylesheet" href="<c:url value="/css/fss-mobile-${requestScope['browserType']}-layout.css" />" />  
    39.              <link type="text/css" rel="stylesheet" href="${mobileCss}" />-->  
    40.         </c:if>  
    41.         <spring:theme code="standard.custom.css.file" var="customCssFile" />  
    42.         <link type="text/css" rel="stylesheet" href="<c:url value="${customCssFile}" />" />  
    43.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    44.         <link rel="icon" href="<c:url value="/favicon.ico" />" type="image/x-icon" />  
    45.          <script src="<c:url value="/js/jquery-1.9.1.min.js" />"></script>  
    46.         <!-- CSS for slidesjs.com example   
    47.         <link type="text/css" rel="stylesheet" href="<c:url value="/css/example.css" />" />  
    48.                                        
    49.             Central Authentication Service (CAS)  
    50.     <!-- End CSS for slidesjs.com example -->  
    51.                                    
    52.                                
    53.         <link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />  
    54.         <link type="text/css" rel="stylesheet" href="<c:url value="/css/font-awesome.min.css" />" />  
    55.     </head>  
    56.     <body id="cas" class="fl-theme-iphone">  
    57.     <div class="flc-screenNavigator-view-container">  
    58.         <div class="fl-screenNavigator-view">  
    59.             <div id="header" class="flc-screenNavigator-navbar fl-navbar fl-table">  
    60.                 <h1 id="company-name">123</h1>  
    61.                 <h1 id="app-name" class="fl-table-cell" style="background: none repeat scroll 0% 0% rgb(255, 255, 221);color:#000">落雨 </h1>     
    62.             </div>          
    63.             <div id="content" class="fl-screenNavigator-scroll-container"></span>  

    main.css

    [css] view plain copy
    1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!-- SlidesJS Optional: If you'd like to use this design -->  
    2.                            
    3.   body {  
    4.                              
    5.   }  
    6.                            
    7.   #slides,  
    8.   #slides2,  
    9.   #slides3 {  
    10.     display: none;  
    11.     margin-bottom:50px;  
    12.   }  
    13.                            
    14.   a{  
    15.       text-decoration: none;  
    16.   }  
    17.                            
    18.   .slidesjs-navigation {  
    19.     margin-top:3px;  
    20.   }  
    21.                            
    22.   .slidesjs-previous {  
    23.     margin-right: 5px;  
    24.     float: left;  
    25.   }  
    26.                            
    27.   .slidesjs-next {  
    28.     margin-right: 5px;  
    29.     float: left;  
    30.   }  
    31.                            
    32.   .slidesjs-pagination {  
    33.     margin: 6px 0 0;  
    34.     float: right;  
    35.     list-style: none;  
    36.   }  
    37.                            
    38.   .slidesjs-pagination li {  
    39.     float: left;  
    40.     margin: 0 1px;  
    41.   }  
    42.                            
    43.   .slidesjs-pagination li a {  
    44.     display: block;  
    45.      13px;  
    46.     height: 0;  
    47.     padding-top: 13px;  
    48.     background-image: url(../img/pagination.png);  
    49.     background-position: 0 0;  
    50.     float: left;  
    51.     overflow: hidden;  
    52.   }  
    53.                            
    54.   .slidesjs-pagination li a.active,  
    55.   .slidesjs-pagination li a:hover.active {  
    56.     background-position: 0 -13px  
    57.   }  
    58.                            
    59.   .slidesjs-pagination li a:hover {  
    60.     background-position: 0 -26px  
    61.   }  
    62.                            
    63.   a:link,  
    64.   a:visited {  
    65.     color: #333  
    66.   }  
    67.                            
    68.   a:hover,  
    69.   a:active {  
    70.     color: #9e2020  
    71.   }  
    72.                            
    73.   .navbar {  
    74.     overflow: hidden  
    75.   }  
    76.                            
    77. <!-- End SlidesJS Optional-->  
    78.                            
    79. <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->  
    80.                            
    81.   #slides {  
    82.     display: none  
    83.   }  
    84.                            
    85.   .container {  
    86.     margin: 0 auto  
    87.   }  
    88.                            
    89.   /* For tablets & smart phones */  
    90.   @media (max- 767px) {  
    91.     body {  
    92.       padding-left: 20px;  
    93.       padding-right: 20px;  
    94.     }  
    95.     .container {  
    96.        auto  
    97.     }  
    98.   }  
    99.                            
    100.   /* For smartphones */  
    101.   @media (max- 480px) {  
    102.     .container {  
    103.        auto  
    104.     }  
    105.   }  
    106.                            
    107.   /* For smaller displays like laptops */  
    108.   @media (min- 768px) and (max- 979px) {  
    109.     .container {  
    110.        724px  
    111.     }  
    112.   }  
    113.                            
    114.   /* For larger displays */  
    115.   @media (min- 1200px) {  
    116.     .container {  
    117.        1170px  
    118.     }  
    119.   }</span>  

    C: omcat7webappscasServerWEB-INFviewjspdefaultuiincludesottom.jsp

    [html] view plain copy
    1. <%--  
    2.                            
    3.     Licensed to Jasig under one or more contributor license  
    4.     agreements. See the NOTICE file distributed with this work  
    5.     for additional information regarding copyright ownership.  
    6.     Jasig licenses this file to you under the Apache License,  
    7.     Version 2.0 (the "License"); you may not use this file  
    8.     except in compliance with the License.  You may obtain a  
    9.     copy of the License at the following location:  
    10.                            
    11.       http://www.apache.org/licenses/LICENSE-2.0  
    12.                            
    13.     Unless required by applicable law or agreed to in writing,  
    14.     software distributed under the License is distributed on an  
    15.     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY  
    16.     KIND, either express or implied.  See the License for the  
    17.     specific language governing permissions and limitations  
    18.     under the License.  
    19.                            
    20. --%>  
    21. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    22.                            
    23. </div>  
    24.                 <div id="footer" class="fl-panel fl-note fl-bevel-white fl-font-size-80">  
    25.                     <a id="jasig" href="http://www.jasig.org" title="go to Jasig home page"></a>  
    26.                     <div id="copyright">  
    27.                         <p>Copyright © 2005 - 2012 Jasig, Inc. All rights reserved.</p>  
    28.                         <p>Powered by <a href="http://www.jasig.org/cas">Jasig Central Authentication Service <%=org.jasig.cas.CasVersion.getVersion()%></a></p>  
    29.                     </div>  
    30.                 </div>  
    31.             </div>  
    32.         </div>  
    33.         <!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script-->  
    34.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script >  
    35.         <script type="text/javascript" src="<c:url value="/js/cas.js" />"></script>  
    36.     </body>  
    37. </html>  

    附 pad 预览图：


    2013年4月27日21:49:55
  • 相关阅读:
    【剑指Offer-循环和递归】面试题10.4：矩形覆盖
    【剑指Offer-循环和递归】面试题10.3：变态跳台阶
    【剑指Offer-面试案例】面试题66：把字符串转为整数
    【剑指Offer-发散思维能力】面试题66：构建乘积数组
    【剑指Offer-发散思维能力】面试题65：不用加减乘除做加法
    【剑指Offer-发散思维能力】面试题64：求1+2+...+n
    【剑指Offer-抽象建模能力】面试题62：圆圈中最后剩下的数字
    【剑指Offer-抽象建模能力】面试题61：扑克牌中的顺子
    【剑指Offer-知识迁移能力】面试题59：滑动窗口的最大值
    【剑指Offer-知识迁移能力】面试题58.2：左旋转字符串
  • 原文地址：https://www.cnblogs.com/austinspark-jessylu/p/6899765.html
Copyright © 2011-2022 走看看