CAS单点登录：自定义登录页面（三）
1.简介
主题意味着风格不一样,目的就是不同的接入端,显示不同的登录页面，一般要求如下：
- 静态资源(js,css)存放目录为src/main/resources/static
- html资源存(thymeleaf)放目录为src/main/resources/templates
- 主题配置文件存放在src/main/resources并且命名为[theme_name].properties
- 主题页面html存放目录为src/main/resources/templates/
登录页渲染文件为casLoginView.html，我们之前配置客户端注册的时候的json文件,这个文件中还可以添加一个属性theme对应自己的主题。
cas也可以设置一个默认主题，如果service注册的时候没有指明主题,就使用默认的主题。
2.修改Json
添加一个属性theme对应自己的主题
{ "@class": "org.apereo.cas.services.RegexRegisteredService", "serviceId": "^(https|imaps|http)://.*", "name": "fdzang", "id": 1000, "description": "CAS-SSO 登入", "evaluationOrder": 10, "theme" : "fdzang" }
3.加入主题样式
我是直接用的bootstrap的一个样式，把样式文件放在/resources/static/thems/fdzang下的
其实也可以直接放在static下，我这样是为了方便区分主题。
4.创建properties
创建fdzang.properties，这个文件中的内容是后续提供给页面使用的，页面可以直接取值。
#原cas默认的css样式,如果更改了,某些页面样式将丢失
cas.standard.css.file=/css/cas.css
fdzang.pageTitle=CAS-SSO 登入
fdzang.vendor.jquery=/themes/fdzang/vendor/jquery/jquery.min.js
fdzang.prefix=/themes/fdzang
5.修改application.properties
# 默认主题
cas.theme.defaultThemeName=fdzang
6.添加自定义登录界面
放在/resources/templates/fdzang下，文件名为casLoginView.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title th:text="${#themes.code('fdzang.pageTitle')}">默认的登录界面title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="all,follow">
<link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/bootstrap/css/bootstrap.min.css'}">
<link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/font-awesome/css/font-awesome.min.css'}">
<link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/fontastic.css'}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/style.default.css'}" id="theme-stylesheet">
<link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/custom.css'}">
<link rel="shortcut icon" href="img/favicon.ico">
head>
<body>
<div class="page login-page">
<div class="container d-flex align-items-center">
<div class="form-holder has-shadow">
<div class="row">
<div class="col-lg-6">
<div class="info d-flex align-items-center">
<div class="content">
<div class="logo">
<h1>CAS单点登录h1>
div>
<p>欢迎使用CAS单点登录系统.p>
div>
div>
div>
<div class="col-lg-6 bg-white">
<div class="form d-flex align-items-center">
<div class="content">
<form method="post" class="form-validate" id="fm1" th:object="${credential}" action="login">
<div class="form-group">
<input id="username" type="text" name="username" required
data-msg="Please enter your username"
class="input-material" size="25" tabindex="1"
th:disabled="${guaEnabled}" th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}" autocomplete="off">
<label for="username" th:utext="#{screen.welcome.label.netid}"
class="label-material">User Namelabel>
div>
<div class="form-group">
<input id="password" type="password" name="password" required
data-msg="Please enter your password"
class="input-material" size="25" tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}" autocomplete="off" />
<label for="password" th:utext="#{screen.welcome.label.password}"
class="label-material">Passwordlabel>
div>
<div class="form-group" th:if="${rememberMeAuthenticationEnabled}">
<input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5"/>
<label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Melabel>
div>
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<input id="login" class="btn btn-primary" name="submit" accesskey="l"
th:value="#{screen.welcome.button.login}" tabindex="6" type="submit"/>
form>
<a href="#" class="forgot-pass">忘记密码?a><br>
<small>还没有账户?small>
<a href="register.html" class="signup">注册a>
div>
div>
div>
div>
div>
div>
<div class="copyrights text-center">
<p>Design by <a href="#" class="external">Bootstrapiousa>
p>
div>
div>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery/jquery.min.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/popper.js/umd/popper.min.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/bootstrap/js/bootstrap.min.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery.cookie/jquery.cookie.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/chart.js/Chart.min.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery-validation/jquery.validate.min.js'}">script>
<script th:src="@{${#themes.code('fdzang.prefix')}+'/js/front.js'}">script>
body>
html>
7.整体文件目录
运行效果如下：
参考：https://blog.csdn.net/qq_34021712/article/details/82186067