CAS之三--自定义登录页
CAS 默认的登录页面显然不适合实际的使用,本文主要介绍如何自定义登录页面;文中使用到的软件版本:JDK 1.8.0_191、Tomcat 8.5.76、CAS 5.3.16。
1、服务端准备
这里假设 CAS 服务端已经安装完毕,地址为:http://127.0.0.1:8080/cas
2、自定义主题
2.1 、设置默认主题
修改application.properties配置文件,这里假设新增的主题名称为:mytheme
cas.theme.defaultThemeName=mytheme
2.2、新增主题配置文件
在 \src\main\resources 下新增 mytheme.properties:
cas.standard.css.file=/css/cas.css
其他变量根据自己页面的需要来定义,如果自定义的页面用不到,可以不用定义其他的变量。
2.3、新增主题页面
在 \src\main\resources\templates 下新建 mytheme 目录,并在 mytheme 目录下创建登录页面 casLoginView.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <title>登录</title> <h1>统一鉴权登录[mytheme]</h1> <form method="post" id="fm1" th:object="${credential}" action="login"> <div th:if="${#fields.hasErrors('*')}"> <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Example error</span> </div> <section> <label>用户名</label> <div th:if="${openIdLocalId}"> <strong> <span th:utext="${openIdLocalId}"/> </strong> <input type="hidden" id="username" name="username" th:value="${openIdLocalId}"/> </div> <div th:unless="${openIdLocalId}"> <input id="username" size="25" tabindex="1" type="text" th:disabled="${guaEnabled}" th:field="*{username}" th:accesskey="#{screen.welcome.label.netid.accesskey}" autocomplete="off"/> </div> </section> <section> <label>密码</label> <div> <input type="password" id="password" size="25" tabindex="2" th:accesskey="#{screen.welcome.label.password.accesskey}" th:field="*{password}" autocomplete="off"/> </div> </section> <input type="hidden" name="execution" th:value="${flowExecutionKey}"/> <input type="hidden" name="_eventId" value="submit"/> <input type="hidden" name="geolocation"/> <input type="submit" value="提交"> </form> </head>
这里定义了一个简单的页面,form 中的元素不要变,其他的可以根据需要修改。自定义登录页面使用到的 css 、js 文件都可以放到 mytheme 目录下。
同理,登出页面、登入成功页面,都可以找到对应的JSP页面进行修改。