Spring Boot+CAS default login page is too ugly, how to do?

Spring Security+CAS: Spring Security+CAS: Spring Security+CAS: Spring Security+CAS

In the last article, we shared the problem that CAS Server access database. Today, we will look at how to customize the login page on CAS Server, because normally, we will not directly use the official login page.

This is the 26th article in the Spring Security series, and reading the previous articles will help you understand it better:

Dig a big hole and Spring Security will do it!
How to decrypt the password
A step-by-step guide to customizing form logins in Spring Security
Spring Security does front and back separation, so don’t do page jumps! All JSON interactions
Authorization in Spring Security used to be so simple
How does Spring Security store user data into the database?
Spring Security+Spring Data Jpa, Security management is only easier!
Spring Boot + Spring Security enables automatic login
Spring Boot automatic login. How to control security risks?
How is Spring Security better than Shiro in microservices projects?
Two ways for SpringSecurity to customize authentication logic (advanced play)
How can I quickly view information such as the IP address of the login user in Spring Security?
Spring Security automatically kicks out the previous login user.
How can I kick out a user who has logged in to Spring Boot + Vue?
Spring Security comes with a firewall! You have no idea how secure your system is!
What is a session fixed attack? How do I defend against session fixation attacks in Spring Boot?
How does Spring Security handle session sharing in a clustered deployment?
Songgo hand in hand to teach you in SpringBoot CSRF attack! So easy!
Learn to learn thoroughly! Spring Security CSRF defense source code parsing
Two poses for password encryption in Spring Boot!
How to learn Spring Security? Why must we study systematically?
Spring Security has two different resource release policies. Do not use them incorrectly.
Spring Boot + CAS single sign-on
Spring Boot is the third way to implement single sign-on!
How do I Connect to the Database in Spring Boot+CAS SINGLE Sign-on?

1. Implementation idea

CAS Server provides good support for customizing login pages, which can be implemented from many angles. Songko will introduce it to you respectively.

The login page provided by CAS Server was written with JSP in the early stage, but Thymeleaf was used in the 5.3.2 version, so now the custom login page is also written with Thymeleaf.

To customize the login page, we have two different ways:

Directly to modify the source code, location in overlays/org. Apereo. Cas. The cas server – webapp – tomcat – 5.3.14 / WEB – INF/classes/templates/casLoginView. HTML, Directly based on its source code, this can achieve the requirements, but generally not recommended.
Developing a custom login page as a theme and then configuring the theme in a configuration file gives you the flexibility to configure both global and local themes. The global theme indicates that all the login pages are customized. The local theme indicates that different CAS clients display different login pages.

Here Songo mainly introduces the second method.

2. Customize the login page

The first step is to prepare your login page in advance. For Songo, I’ll use the same login page I used earlier in this series:

This you can download the page template at the end of the article, you can also find a favorite login page template, is not found, write a form is also ok, as long as the implementation of a custom effect.

Custom login page ready, next, we create a new directory SRC/main/resources/static/themes/mylogin, custom page relates to static resource file copy, The Themes directory here is dedicated to static resources for various custom login pages, myLogin is equivalent to the theme name I’m currently using:

Create the SRC/main/resources/mylogin properties file, some of the login page js, CSS reference configuration, as follows:

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.jsCopy the code

There are only four references in my custom login page. If you have more references, you can configure them here. The key here can be customized, and the value here is the location of the static resource.

Next, create the SRC/main/resources/templates/mylogin/casLoginView. The HTML files, casLoginView. HTML is your login page, note the file name can’t write wrong. The Thymeleaf template is in the templates directory by default, so we need to create a templates directory under Resources, and a myLogin directory under templates.

The casloginview. HTML page is as follows:


      
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>A little rain in the South</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">Unified Certification Center</div>
        <form method="post" th:object="${credential}" action="login">
            <div class="input">
                <label for="username">The user name</label>
                <input type="text" name="username" id="username">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="password">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>The login</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
        </form>
        <a href="javascript:" class="pass-forgot">Forget your password?</a>
    </div>

    <div class="overbox">
        <div class="material-button alt-2">
            <span class="shape"></span>
        </div>
        <div class="title">Jiangnan a little rain - register</div>
        <div class="input">
            <label for="regname">The user name</label>
            <input type="text" name="regname" id="regname">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpass">password</label>
            <input type="password" name="regpass" id="regpass">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">Confirm password</label>
            <input type="password" name="reregpass" id="reregpass">
            <span class="spin"></span>
        </div>
        <div class="button">
            <button>
                <span>registered</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>
Copy the code

This is just a normal login page, I just changed the JS and CSS references, so I won’t go into too much here.

OK, after that, our login page is defined, and then the login page reference.

Add the following configuration directly to application.properties:

cas.theme.defaultThemeName=mylogin
Copy the code

Mylogin is the directory we’ve been repeating before, which is my subject name. After the configuration is complete, the customized login page is displayed no matter you log in to the CAS Server directly or switch from the CAS Client to the CAS Server.

The second method is local configuration. Local configuration applies to the configuration of a CAS Client. So we can be in SRC/main/resources/services/client1-99. The json file (know how the file to a previous articles review) to add the theme configuration:

{
  "@class": "org.apereo.cas.services.RegexRegisteredService"."serviceId": "^(https|http)://.*"."name": "client1"."id": 99."description": "Definition information for Application 1"."evaluationOrder": 1."theme": "mylogin"
}
Copy the code

In this way, if you log in to the CAS Server from the CAS Client, the customized login page is displayed. If you log in to the CAS Server from another CAS Client or directly from the CAS Server, the default login page is displayed. Of course, we can also define the login page for other CAS clients.

3. Summary

This is the problem of CAS single sign-on custom login page. If you are interested, you can try

If you feel that you have gained something, remember to click on songko under the encouragement of watching oh ~

Spring Boot+CAS default login page is too ugly, how to do?

1. Implementation idea

2. Customize the login page

3. Summary

Related Posts

Basic Python Syntax: Start your Python journey

JVM Execution Engine (Part 1)

ETCD: Take you from Raft principles to practice!