SSO之CAS集成自定义登录页面

前言：

CAS服务端部署配置参考：https://blog.csdn.net/qq_15076569/article/details/83656518

一：替换页面

找到CAS服务端中WEB-INF/view/jsp/default/ui/下的casLoginView.jsp页面，此页面为CAS默认的登录页面，将自定义的页面取名也叫casLoginView.jsp进行页面替换，替换前先把默认的备份一份。

替换后，打开替换前备份的casLoginView.jsp，里面的from表单需要替换到替换后的页面也就是自定义的页面，from表单需要替换以下几处：

1）找到替换后页面的同级目录下的includes下的top.jsp，且打开top.jsp

拷贝以下代码到替换后的登录页面：

<%@ 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" %>

1.1）拷贝备份的登录页面中<from>开头和</from>结尾替换自定义登录页面的from标签开头和结尾，如下：

<form:form method="post" id="fm1" commandName="${commandName}" htmlEscape="true">

....

</form:form>

替换定义登录页面后(其中class样式为自定义的表单的样式)：

<form:form method="post" class="sui-form" id="fm1" commandName="${commandName}" htmlEscape="true">

...

</form:form>

1.2）拷贝备份的用户名和密码输入框以及登录按钮

用户名： <form:input cssClass="required" cssErrorClass="error" id="username" size="25" tabindex="1" accesskey="${userNameAccessKey}" path="username" autocomplete="off" htmlEscape="true" />

密码： <form:password cssClass="required" cssErrorClass="error" id="password" size="25" tabindex="2" path="password"  accesskey="${passwordAccessKey}" htmlEscape="true" autocomplete="off" />

登录按钮：<input class="btn-submit" name="submit" accesskey="l" value="<spring:message code="screen.welcome.button.login" />" tabindex="4" type="submit" />

替换到自定义登录页后：

                               
    <form:input placeholder="邮箱/用户名/手机号" class="span2 input-xfat" id="username" size="25" tabindex="1" accesskey="${userNameAccessKey}" path="username" autocomplete="off" htmlEscape="true" />
                              
   <form:password placeholder="请输入密码" class="span2 input-xfat" id="password" size="25" tabindex="2" path="password"  accesskey="${passwordAccessKey}" htmlEscape="true" autocomplete="off" />
   <input class="sui-btn btn-block btn-xlarge btn-danger" accesskey="l" value="登&nbsp;&nbsp;陆" type="submit" />

1.3）拷贝备份的3个隐藏域input，粘贴到自定义登录页面的from表单中

      <input type="hidden" name="lt" value="${loginTicket}" />
      <input type="hidden" name="execution" value="${flowExecutionKey}" />
      <input type="hidden" name="_eventId" value="submit" />

1.4）拷贝备份错误提示，粘贴到自定义登录页面from表单中的用户名输入框前面

<form:errors path="*" id="msg" cssClass="errors" element="div" htmlEscape="false" />

2）启动CAS服务端测试页面效果

二：自定义登录页面错误提示支持中文配置

通过上面一的配置，相信可以看到替换后面的自定义的登录页面，但如果用户名和密码输入错误，你会发现提示不是中文而是默认的英文。

CAS支持国际化语言，默认加载的国际化配置文件WEB-INF/classes/messages.properties

设置国际化为zn_CN ,修改WEB-INF/cas-servlet.xml

  <bean id="localeResolver" class="org.springframework.web.servlet.i18n.CookieLocaleResolver" p:defaultLocale="en" />

将p:defaultLocale="en" 改为p:defaultLocale="zh_CN" 

  <bean id="localeResolver" class="org.springframework.web.servlet.i18n.CookieLocaleResolver" p:defaultLocale="zh_CN" />

这下CAS加载的国际化配置文件变为了WEB-INF/classes/messages_zh_CN.properties，打开该配置文件，增加用户不存在和密码错误的提示，copy下面两行代码到messages_zh_CN.properties中：

authenticationFailure.AccountNotFoundException=\u7528\u6237\u4E0D\u5B58\u5728
authenticationFailure.FailedLoginException=\u5BC6\u7801\u9519\u8BEF

启动CAS服务端服务，输入错误用户名

输入错误密码：