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">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/bootstrap/css/bootstrap.min.css'}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/font-awesome/css/font-awesome.min.css'}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/fontastic.css'}">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/style.default.css'}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/custom.css'}">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Logo & Information Panel-->
                <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>
                <!-- Form Panel    -->
                <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 Name</label>
                                </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">Password</label>
                                </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 Me</label>
                                </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">Bootstrapious</a>
        </p>
    </div>
</div>
<!-- JavaScript files-->
<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>
<!-- Main File-->
<script th:src="@{${#themes.code('fdzang.prefix')}+'/js/front.js'}"></script>
</body>
</html>