Implement SSO (6) using Yale CAS +. Net Client)

• Part 1: install and configure Tomcat
• Part 2: install and configure cas
• Part 3: Implement ASP. NET webform Client
• Part 4: Implement database-based Identity Authentication
• Part 5: extended database-based authentication

Part 6: custom logon page

1. Offline login page definition

The CAS logon page is stored in the "% tomcat_home % \ webapps \ CAS \ WEB-INF \ view \ JSP \ Default \ UI" folder, which contains multiple JSP files, including:

Page	Function
Casconfirmview. jsp	If a warning is reported before the browser jumps to the page you want to access, the page is displayed.
Casgenericsuccess. jsp	This page is generally not displayed unless we directly access the verification page of the verification server.
Casloginview. jsp	Key Modification page. This is the interface for entering verification information.
Caslogoutview. jsp	Logout interface.
Serviceerrorview. jsp	If the service you want to access does not use cas, this page is displayed. NOTE: If CAS is used in all our business systems, this interface will not work.

The vast majority of pages listed in the Table above do not need to be modified. They are mainly "casloginview. jsp" and "Top. jsp" and "bottom. jsp" files under the "endpoints" directory.

Complex JSP filesCode, Often do not know where to start. Therefore, we recommend that you use the following method to define the logon page.

(1) Open the CAS logon page in the browser and deliberately enter the wrong password to display the error warning information. Next, select "save current page" and select "webpage, all (*. HTM; *. html)" as the Save format )".

(2) Use the browser debugging tool (IE browser uses the F12 key) to view the Page Structure and prepare for subsequent CSS file definition. The main structure of the logon page is displayed:

The document consists of three parts: Header, content, and footer. The content contains two parts: Login and siderbar. If you need to adjust the webpage structure when defining the login page, remember to modify the CSS style hierarchy.

(3) use the Web Editor to edit and save the offline web page. Modify the CSS style to adjust the logon page without modifying the page content.

I made several small changes to the offline file, mainly adding a few empty Divs, in order to have more CSS styles to play the space, in addition, the jquery watermark plug-in script is added, and other content is not moved. More is to complete the logon page settings with CSS styles and images. After some effort, the offline page was changed to the following:

 

2. Modify the JSP login page

After the offline file is ready, you can start the JSP file of CAS. However, we strongly recommend that you do not modify the content in the original file. You 'd better create a new theme. The specific method is as follows:

(1) Stop Tomcat service, go to the "% tomcat_home % \ webapps \ CAS \ WEB-INF \ view \ jsp" folder, copy the default folder in this directory, the name is "Custom ".

(2) go to the "% tomcat_home % \ webapps \ CAS \ themes" folder, copy the default folder to this directory, and name it "Custom ".

(3) go to the "% tomcat_home % \ webapps \ CAS \ WEB-INF \ Classes" folder, copy the "default_views.properties" file and rename it "custom_views.properties ".

(4)copy the completed cas.css file on the off-line webpage to the newly created "% tomcat_home % \ webapps \ CAS \ themes \ custom" folder; copy the image used in the style file to the "% tomcat_home % \ webapps \ CAS \ images" folder. (Note: Do not make a mistake in the relative path of the referenced image in the CSS file .)

(5) next is to modify "% tomcat_home % \ webapps \ CAS \ WEB-INF \ view \ JSP \ custom \ UI" under the casloginview. the JSP file and the "top. JSP and bottom. JSP. With experience in modifying offline files, it is easier to modify these three files. (Note: Do not touch any fileProgramCode .)

You can modify these files as needed. However, the Reference Path of the jquery file is shown at the bottom of the bottom. jsp file:

<ScriptType= "Text/JavaScript"SRC= "Https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </Script><ScriptType= "Text/JavaScript"SRC= "Https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"> </Script>
 

We strongly recommend that you change to the local path. After all, once CAS is placed on the Intranet, jquery file exceptions will occur.

Copy the jquery script file and other script files to the "% tomcat_home % \ webapps \ CAS \ JS" folder and modify the references in the bottom. jsp file. The modified content is as follows:

 
<SCRIPT type = "text/JavaScript" src = "<C: URL value ="/JS/jquery. min. JS "/>"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "<C: URL value = "/JS/jquery-ui.min.js"/> "> </SCRIPT> <SCRIPT type =" text/JavaScript "src =" <C: URL value = "/JS/CAS. JS "/>"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "<C: URL value ="/JS/jquery. watermark. min. JS "/>"> </SCRIPT> <script language = "JavaScript" type = "text/JavaScript">$ (Function() {$ ("# Username"). Watermark ("\ u7528 \ u6237 \ u540d \ u002f \ u90ae \ u7bb1 \ u002f \ u624b \ u673a \ u53f7", "watermark");});</SCRIPT>
 

(6) Start the text editor as an administrator and open "% atat_home %\ Webapps \ CAS \ WEB-INF \ Classes \ cas-theme-default.propertiesThe following code points the “standard.custom.css. File Attribute to our own CSS file:

 
Standard.custom.css. File =/themes/custom/cas.css
 

(7) Start the text editor as an administrator and open the file "% atat_home % \ webapps \ CAS \ WEB-INF \ Classes \ custom_views.properties, replace "/default/" with "/custom /".

(8) Start the text editor as administrator and open "% atat_home % \ webapps \ CAS \ WEB-INF \ CAS. properties file, set CAS. viewresolver. modify basename = default_views to CAS. viewresolver. basename = custom_views.

(9) Save all changes. Start the Tomcat service and test the effect. The original interface may be displayed. You can try to clear the folder in the "% tomcat_home % \ work \ Catalina" directory and try again.

Is the processed CAS login page:

Other notes:

(1) "% atat_home % \ webapps \ CAS \ JS \ CAS. JS "file" $ (document ). the ready method contains some JavaScript scripts for displaying error messages in animations, which can be adjusted based on the page style (mainly color ).

(2) There are many messages _ *. properties files in the "% tomcat_home % \ webapps \ CAS \ WEB-INF \ Classes" folder, mainly for internationalization. If you modify the text displayed on the page, you can modify the information in the "messages_zh_cn.properties" file.

(3) The Chinese characters in the "messages_zh_cn.properties" file are Unicode escape characters, which are inconvenient to process. The following C # code (found online) can help solve the problem:

 Using  System;  Using  System. text;  Using  System. Text. regularexpressions;  Using  System. Globalization; Public   Class  Gb2312unicodeconverter {  Public   Static   Void  Main () {console. writeline (tounicode (  "  Username/email/mobile phone number  "  ); Console. writeline (togb2312 (  @"  \ U4f60 \ u597d  "  ); Console. writeline ( "  \ U4f60 \ u597d  "  );}  ///   <Summary>      ///  Convert Chinese characters to unicode encoding  ///   </Summary>      ///   <Param name = "str">  Chinese character string to be encoded  </Param>      ///   <Returns> Unicode encoded string  </Returns>      Public   Static   String Tounicode ( String  Str ){  Byte [] BTS = Encoding. Unicode. getbytes (STR );  String R = ""  ;  For ( Int I =0 ; I <BTS. length; I + = 2 ) R + = "  \ U  " + BTS [I + 1 ]. Tostring ( "  X  " ). Padleft ( 2 , '  0  ' ) + BTS [I]. tostring ( "  X " ). Padleft ( 2 , '  0  '  );  Return  R ;}  ///   <Summary>      ///  Convert Unicode to a Chinese character string  ///   </Summary>      ///   <Param name = "str"> Unicode encoded string  </Param>      ///   <Returns>  Chinese character string  </Returns>      Public   Static   String Togb2312 ( String  Str ){  String R = ""  ; Matchcollection MC = RegEx. Matches (STR, @" \ U ([\ W] {2}) ([\ W] {2 })  " , Regexoptions. Compiled | Regexoptions. ignorecase );  Byte [] BTS = New   Byte [ 2  ];  Foreach (Match m In  MC) {BTS [  0 ] = ( Byte ) Int . Parse (M. Groups [ 2  ]. Value, numberstyles. hexnumber); BTS [  1 ] = ( Byte ) Int . Parse (M. Groups [ 1  ]. Value, numberstyles. hexnumber); R + = Encoding. Unicode. getstring (BTS );}  Return  R ;}} 

 

3. custom logon Interface source code

Attachment: source code of CAS custom logon Interface

This is the CAS logon page I defined. After decompression, copy the files in different folders to the corresponding folder (For details, refer to the body ). My CAS version is 3.5.1, which may vary slightly with different versions. Please apply the content in the attachment according to your actual situation.

In addition, because I am not good at CSS and meigong, please use the ie9 or chorme browser to view the login page. Otherwise, typographical problems may occur. (It is known that the watermark in IE8 cannot be correctly displayed, and the layout in ie6 ). Which CSS experts can help you modify the settings.

 

[Full text]