在上一节我们讲述了CAS中的Service配置及管理，对于添加CAS中的服务到注册的表中有了一定的了解，如果不是很熟悉，可以去复习一下CAS单点登录(五)——Service配置及管理。
今天，我们接着前面没有讲解完的文章继续讲解，关于CAS中如何自定义表单信息提交以及如何自定义用户相关页面的知识点。
一、自定义用户界面
在上一节中我们讲解了关于Service配置和管理，在Service的配置中，我们可以配置theme参数。比如，我们在使用上一节的代码中使用Json来存储Service配置，在web-.json文件中，我们添加指定主题的参数为anumbrella。配置如下：
接着我们在src/main目录下新建anumbrella.properties文件，文件名与主题参数一致。在官网中推荐我们在配置文件中写法为：
这里采用的写法会把CAS系统中自带的页面样式完全覆盖，如果我们只想自定义一部分页面，可以采用自定义部分样式的写法。
比如这里我只想自定义登录页面，其他页面不变，可以采用上面的写法。所以anumbrella.properties文件的内容如下：
anumbrella.login.images.path=/themes/anumbrella/images为要在html页面使用到的图片路径，所以这里自定义图片的地址。
接着我们在srcmain esources文件下新建static和templates文件夹，同时在static文件夹下新建themes/anumbrella文件夹，在templates目录下新建anumbrella文件夹。继续在static/themes/anumbrella下新建css、js、images这三个文件夹，把需要的css、js、图片放入这下面。接着我们在templates/anumbrella目录下新建casLoginView.html文件。
具体路径如下所示：
注意：这里的casLoginView.html文件不能乱命名，必须为casLoginView.html。这里是覆盖登录页面所以命名为casLoginView.html，如果要覆盖退出页面则是casLogoutView.html。
关于如何确定页面名称和如何选择，这里其实在CAS单点登录(二)——搭建基础服务这节有提示，因为采用的是覆盖模式，所以我们建立的附件都是将原来有的文件覆盖掉，所以我们可以在打包的cas.war解压包中或IDE中target文件中查看到具体的各种文件。
比如，在IDE中的target目录下的cas目录中的WEB-INF的classes里面的templates目录下，我们可以找到各种html，还有static文件夹，在该目录中我们可以寻找到各种需要的文件，编写的html也可以参考这里的源码来写。
在编写html时，from表单的内容需要遵循一定的标准th:object等等。
casLoginView.html内容如下：
这里提一下，关于css、js、图片引用，如果图片引用在css中使用，直接采用相对路径；如果要在前台(html中)写图片地址，可以像这里我使用这样的写法。然后通过th:object来应用在anumbrella.properties配置的路径地址。
由于这里我们采用的Json服务配置，所以在application.properties中开启Json服务注册配置。
接着我们启动CAS服务，输入路由https://sso.anumbrella.net:8443/cas/login?service=http://localhost:9080/sample，可以发现出现我们自定义的登录界面。
但如果我们直接输入https://sso.anumbrella.net:8443/cas/login则直接返回原来的CAS主题了。
这是因为前面我们是在Service中配置了主题的，只有符合的Servivce才采用配置了的主题。那么如何更改所有的默认主题呢？
这里有两种方法，一种是直接更改默认主题，在application.properties文件中，添加我们需要自定义的文件。
然后在static文件下新建css、js、images这三个文件下，把需要的css、js、图片放入这下面。接着我们在templates目录下新建casLoginView.html文件。这里的配置覆盖就是直接覆盖原来默认主题的文件，具体同前面的一致，只是路径不同。
另一种方法是使用默认主题配置，将新建的主题设置为默认主题，建议采用这种方案，更容易控制。在application.properties文件中添加如下配置：
重启CAS服务，输入https://sso.anumbrella.net:8443/cas/login，发现登录页面变了。接着我们登录，发现跳转到原来默认的主题了，这是因为我们的主题默认是只覆盖了登录页面，其他继续采用默认主题，这个可以根据需求自定义更改。
二、自定义表单信息
先添加依赖类，这里会使用到两个依赖类：
在前面CAS单点登录(四)——自定义认证登录策略中，我们提到过如果要验证其他信息，比如邮箱，手机号，但是邮箱，手机信息在另一个数据库，还有在一段时间内同一IP输入错误次数限制等。这里就需要我们自定义认证策略，自定义CAS的web认证流程。
首先我们创建需要的表单信息，即这里除了要使用用户名和密码外，还要用户输入邮箱，手机号，所以需要自定义Credential，由于有用户名和密码，所以可以直接继承UsernamePasswordCredential，新建类CustomCredential，具体如下：
这里新增定义了邮箱和手机号，并且是必须输入项。然后我们重新定义CAS的Web流程，新建类CustomWebflowConfigurer，定义如下：
在初始化doInitialize中，绑定我们需要的邮箱和电话信息，用户名以及密码是早已经绑定了，所以不用添加。
然后再新增类CustomerAuthWebflowConfiguration，更改CAS的Web流程的配置代理，如下所示：
主要是通过继承CasWebflowExecutionPlanConfigurer，实现配置的初始化和注册。最后在resources下的META-INF文件下的spring.factories注入spring boot的配置，就是我们上面的类，如下：
接下来的流程就是处理自定义提交信息的逻辑，与我们在CAS单点登录(四)——自定义认证登录策略中讲解的一致，通过拦截请求获取到Handler，来实现自定义认证策略，主要是继承AbstractPreAndPostProcessingAuthenticationHandler类来实现的，基本思路是一样的，这里需要大致更改一下，如下：
在supports方法中，将实例类判断更改为我们自定义的Credential，同时在doAuthentication中将Credential转换为我们自定义的Credential，这里我将邮箱和手机号获取出来，并打印到控制台。实际开发中可以具体处理逻辑。
接着我们在CustomAuthenticationConfiguration类中，将要处理的自定义逻辑更改为上面我们自定义的逻辑CustomerHandlerAuthentication类，如下：
最后在还是在resources下的META-INF文件下的spring.factories注入spring boot的配置。这里与第四节的内容基本相同，不熟悉的可以先去看看第四节的内容————CAS单点登录(四)——自定义认证登录策略。
后台的处理完成了，我们还要更改前台页面casLoginView.html的内容，因为我们除了用户名和密码外，还要邮箱和手机号，所以需要更改界面。
在前面我们的自定义界面的casLoginView.html中，新增两个字段，如下：
主要是新增了两个字段的内容，如下：
页面绑定参数为新参数th:field=”{email}”、th:field=”{telephone}”这两个字段。保存代码后，重启CAS服务，然后我们可以发现登录界面样式更改如下：
接着我们输入用户名、密码和邮箱，不输入电话号码，点击登录会失败，同时也带有提示。如下：
最后我们输入完整的信息，登录成功，然后我们可以发现后台打印的信息。
OK，本节内容就到此结束，后面再介绍其他关于CAS的内容。
代码实例：Chapter5
参考
- CAS单点登录-自定义认证之重写Credential（十五）
- CAS之5.2.x版本自定义表单信息-yellowcong
- https://apereo.github.io/cas/5.3.x/installation/Webflow-Customization-Extensions.html
- https://apereo.github.io/cas/5.3.x/installation/User-Interface-Customization.html
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/10375.html