上篇文章和大家分享了 CAS Server 接入数据库的问题，本日我们来看下如何在 CAS Server 上自定义登录页面，由于正常来说，我们是不会直接用官方给出的登录页面的。
本文是 Spring Security 系列第 26 篇，阅读前面文章有助于更好的理解本文：
挖一个大坑，Spring Security 开搞！松哥手把手带你入门 Spring Security，别再问密码怎么解密了手把手教你定制 Spring Security 中的表单登录Spring Security 做前后端分离，咱就别做页面跳转了！
统统 JSON 交互Spring Security 中的授权操作原来这么大略Spring Security 如何将用户数据存入数据库？Spring Security+Spring Data Jpa 强强联手，安全管理只有更大略！
Spring Boot + Spring Security 实现自动登录功能Spring Boot 自动登录，安全风险要怎么掌握？在微做事项目中，Spring Security 比 Shiro 强在哪？SpringSecurity 自定义认证逻辑的两种办法(高等玩法)Spring Security 中如何快速查看登任命户 IP 地址等信息？Spring Security 自动踢掉前一个登任命户，一个配置搞定！
Spring Boot + Vue 前后端分离项目，如何踢掉已登任命户？Spring Security 自带防火墙！
你都不知道自己的系统有多安全！
什么是会话固定攻击？Spring Boot 中要如何防御会话固定攻击？集群化支配，Spring Security 要如何处理 session 共享？松哥手把手教你在 SpringBoot 中防御 CSRF 攻击！
so easy！
要学就学透彻！
Spring Security 中 CSRF 防御源码解析Spring Boot 中密码加密的两种姿势！
Spring Security 要怎么学？为什么一定要成体系的学习？Spring Security 两种资源放行策略，千万别用错了！
松哥手把手教你入门 Spring Boot + CAS 单点登录Spring Boot 实现单点登录的第三种方案！
Spring Boot+CAS 单点登录，如何对接数据库？1.实现思路
CAS Server 对付自定义登录页面实在供应了很好的支持，可以从多个角度来实现，松哥分别来和大家先容。
CAS Server 上供应的登录页面，早期是用 jsp 写的，我们用的 5.3.2 版本里是用 Thymeleaf 写的，以是现在自定义登录页面也是用 Thymeleaf 来写。
想要自定义登录页面，我们有两种不同的办法：
直接修正源码，位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html，直接就在它的源码根本上改，这个可以实现需求，但是一样平常不推举。把自定义的登录页面当成 theme 来开拓，然后在配置文件中配置 theme，这种办法就很灵巧，而且既可以配置全局主题，也可以配置局部主题。全局主题便是所有的登录页面都利用自定义的登录页面，局部主题则是可以根据不同的 CAS Client 来配置，不同的 CAS Client 将看到不同的登录页面。松哥在这里紧张和大家先容第二种办法。
2.自定义登录页面首先我们须要提前准备好自己的登录页面，松哥这里还是利用我本系列前面用过的登录页面：
这个大家可以在文末下载页面模版，也可以自己找一个喜好的登录页面模版，是在找不到，随便写个表单也行，只要实现了自定义的效果即可。
自定义的登录页面准备好之后，接下来，我们创建一个新的目录 src/main/resources/static/themes/mylogin，将自定义页面涉及到的静态资源文件拷贝进去，这里的 themes 目录下专门放置各种自定义登录页面的静态资源，mylogin 相称于是我当前利用的主题名称：
接下来创建 src/main/resources/mylogin.properties 文件，将登录页面中的一些 js、css 引用配置进去，如下：
mylogin.css.style=/themes/mylogin/css/style.cssmylogin.css.fa=/themes/mylogin/css/font-awesome-4.7.0/css/font-awesome.min.cssmylogin.js.jq=/themes/mylogin/js/jquery.min.jsmylogin.js.index=/themes/mylogin/js/index.js
我的自定义登录页面里边就这四个引用，如果你有更多的引用，就在这里多配置即可，这里的 key 可以自定义，value 便是静态资源的位置。
接下来，创建 src/main/resources/templates/mylogin/casLoginView.html 文件，casLoginView.html 便是你的登录页面，把稳文件名不能写错。Thymeleaf 模版默认是在 templates 目录下，以是我们要在 resources 目录下新建 templates 目录，templates 目录下再新建 mylogin 目录。
casLoginView.html 页面内容如下：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>江南一点雨</title><linkrel="stylesheet"th:href="@{${#themes.code('mylogin.css.fa')}}"><linkrel="stylesheet"th:href="@{${#themes.code('mylogin.css.style')}}"></head><body><divclass="materialContainer"><divclass="box"><divclass="title">统一认证中央</div><formmethod="post"th:object="${credential}"action="login"><divclass="input"><labelfor="username">用户名</label><inputtype="text"name="username"id="username"><spanclass="spin"></span></div><divclass="input"><labelfor="password">密码</label><inputtype="password"name="password"id="password"><spanclass="spin"></span></div><inputtype="hidden"name="execution"th:value="${flowExecutionKey}"/><inputtype="hidden"name="_eventId"value="submit"/><inputtype="hidden"name="geolocation"/><divclass="buttonlogin"><buttontype="submit"><span>登录</span><iclass="fafa-check"></i></button></div></form><ahref="javascript:"class="pass-forgot">忘却密码？</a></div><divclass="overbox"><divclass="material-buttonalt-2"><spanclass="shape"></span></div><divclass="title">江南一点雨-注册</div><divclass="input"><labelfor="regname">用户名</label><inputtype="text"name="regname"id="regname"><spanclass="spin"></span></div><divclass="input"><labelfor="regpass">密码</label><inputtype="password"name="regpass"id="regpass"><spanclass="spin"></span></div><divclass="input"><labelfor="reregpass">确认密码</label><inputtype="password"name="reregpass"id="reregpass"><spanclass="spin"></span></div><divclass="button"><button><span>注册</span></button></div></div></div><scriptth:src="@{${#themes.code('mylogin.js.jq')}}"></script><scriptth:src="@{${#themes.code('mylogin.js.index')}}"></script></body></html>
这便是一个普通的登录页面，我只是把 js 和 css 的引用修正了下而已，以是这里也就不做过多先容。
OK，如此之后，我们的登录页面就算定义好了，接下来便是登录页面的引用了。
登录页面引用，我们有两种办法：
第一种是全剧配置，直接在 application.properties 中添加如下配置：
cas.theme.defaultThemeName=mylogin
mylogin 便是我们在前面反复涌现的目录，相称于是我的主题名。这个配置完成后，往后不管是直接在 CAS Server 上登录，还是从 CAS Client 跳转到 CAS Server 上登录，看到的都是自定义登录页面。
第二种办法则是局部配置，局部配置针对某一个 CAS Client 的配置，以是我们可以在 src/main/resources/services/client1-99.json 文件中（复习前面文章就知道该文件怎么来的）添加 theme 配置：
{"@class":"org.apereo.cas.services.RegexRegisteredService","serviceId":"^(https|http)://.","name":"client1","id":99,"description":"运用1的定义信息","evaluationOrder":1,"theme":"mylogin"}
这样，往后如果是通过该 CAS Client 跳转到 CAS Server 上登录，则会看到自定义登录页面，如果通过其他 CAS Client 或者直接就在 CAS Server 上登录，则看到的还是默认登录页面，当然我们也可以给其他 CAS Client 再去定义它自己的登录页面。
3.小结好了，这便是松哥和大家先容的 CAS 单点登录自定义登录页面的问题，感兴趣的小伙伴可以试试～
如果小伙伴们以为有收成，记得点个在看鼓励下松哥哦～
