Spring Boot+CAS 默认登陆页面太丑了，怎么办？

时间 2020-07-09

标签 spring boot+cas boot cas 默认登陆页面怎么办栏目 Spring 繁體版

原文原文链接

最近的又一头扎进 Spring Security+CAS 上面了，CAS 单点登陆已经连续写了四篇了，小伙伴们必定按顺序阅读哦，这样后面的文章才好理解。javascript

上篇文章和你们分享了 CAS Server 接入数据库的问题，今天咱们来看下如何在 CAS Server 上自定义登陆页面，由于正常来讲，咱们是不会直接用官方给出的登陆页面的。css

本文是 Spring Security 系列第 26 篇，阅读前面文章有助于更好的理解本文：html

1.实现思路

CAS Server 对于自定义登陆页面其实提供了很好的支持，能够从多个角度来实现，松哥分别来和你们介绍。java

CAS Server 上提供的登陆页面，早期是用 jsp 写的，咱们用的 5.3.2 版本里是用 Thymeleaf 写的，因此如今自定义登陆页面也是用 Thymeleaf 来写。jquery

想要自定义登陆页面，咱们有两种不一样的方式：web

直接修改源码，位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html，直接就在它的源码基础上改，这个能够实现需求，可是通常不推荐。
把自定义的登陆页面当成 theme 来开发，而后在配置文件中配置 theme，这种方式就很灵活，并且既能够配置全局主题，也能够配置局部主题。全局主题就是全部的登陆页面都使用自定义的登陆页面，局部主题则是能够根据不一样的 CAS Client 来配置，不一样的 CAS Client 将看到不一样的登陆页面。

松哥在这里主要和你们介绍第二种方式。数据库

2.自定义登陆页面

首先咱们须要提早准备好本身的登陆页面，松哥这里仍是使用我本系列前面用过的登陆页面：json

这个你们能够在文末下载页面模版，也能够本身找一个喜欢的登陆页面模版，是在找不到，随便写个表单也行，只要实现了自定义的效果便可。后端

自定义的登陆页面准备好以后，接下来，咱们建立一个新的目录 src/main/resources/static/themes/mylogin，将自定义页面涉及到的静态资源文件拷贝进去，这里的 themes 目录下专门放置各类自定义登陆页面的静态资源，mylogin 至关因而我当前使用的主题名称：tomcat

接下来建立 src/main/resources/mylogin.properties 文件，将登陆页面中的一些 js、css 引用配置进去，以下：

mylogin.css.style=/themes/mylogin/css/style.css
mylogin.css.fa=/themes/mylogin/css/font-awesome-4.7.0/css/font-awesome.min.css
mylogin.js.jq=/themes/mylogin/js/jquery.min.js
mylogin.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 页面内容以下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>江南一点雨</title>
    <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.fa')}}">
    <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.style')}}">

</head>
<body>


<div class="materialContainer">
    <div class="box">
        <div class="title">统一认证中心</div>
        <form method="post" th:object="${credential}" action="login">
            <div class="input">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="password">密码</label>
                <input type="password" name="password" id="password">
                <span class="spin"></span>
            </div>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                        <input type="hidden" name="_eventId" value="submit"/>
                        <input type="hidden" name="geolocation"/>
            <div class="button login">
                <button type="submit">
                    <span>登陆</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
        </form>
        <a href="javascript:" class="pass-forgot">忘记密码？</a>
    </div>

    <div class="overbox">
        <div class="material-button alt-2">
            <span class="shape"></span>
        </div>
        <div class="title">江南一点雨-注册</div>
        <div class="input">
            <label for="regname">用户名</label>
            <input type="text" name="regname" id="regname">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpass">密码</label>
            <input type="password" name="regpass" id="regpass">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">确认密码</label>
            <input type="password" name="reregpass" id="reregpass">
            <span class="spin"></span>
        </div>
        <div class="button">
            <button>
                <span>注册</span>
            </button>
        </div>
    </div>

</div>

<script th:src="@{${#themes.code('mylogin.js.jq')}}"></script>
<script th: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 单点登陆自定义登陆页面的问题，感兴趣的小伙伴能够试试～

若是小伙伴们以为有收获，记得点个在看鼓励下松哥哦～