Spring Security 中的自定义登录表单

x33g5p2x  于2022-09-23 转载在 Spring  
字(4.3k)|赞(0)|评价(0)|浏览(328)

在这篇文章中,我们将看看在 Spring Boot 应用程序中提供自定义表单登录。

默认的 Spring Boot 表单登录可能无法满足所有人的需求。例如,某些组织可能希望在其登录页面上放置徽标。有些人可能会发现默认登录表单不那么吸引人。对于一些完美主义者来说,默认密码可能看起来并不适合整个应用程序的主题。因此,如果有人想提供登录页面的实现,这是有道理的。

这里的想法是路径 /login 应该返回一个包含表单的 HTML。为此,我们首先需要添加 thymeleaf 支持并配置自定义登录页面。

添加thymeleaf视图支持

添加 thymeleaf starter 作为依赖项。我们需要这个启动器,因为 Spring MVC 需要一个视图解析器来将路径映射到视图模板。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

自定义 Spring Boot 登录页面

创建一个名为 src/main/resources/views/login.html 的文件为此,我创建了一个包含以下内容的简单 HTML。

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
    <title>Login : Demo</title>
</head>
<body class="h-screen">
<div class="container mx-auto h-full flex justify-center items-center text-green-700 px-4">
    <div class="md:w-1/3 shadow-xl rounded-2xl border bg-green-100 w-full">
        <h1 class="text-center font-medium text-2xl text-white rounded-t-2xl bg-green-500 py-4">Sign In</h1>
        <form th:action="@{/login}" method="post" class="border-teal p-4 border-t-12 bg-white mb-6">
            <div class="mb-4">
                <label for="username" class="font-bold text-lg block mb-2">Username</label>
                <input id="username" type="text" name="username" autocomplete="off"
                       class="block w-full rounded p-2 rounded shadow border focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"
                       placeholder="Your Username">
            </div>

            <div class="mb-4">
                <label for="password" class="font-bold text-lg block mb-2">Password</label>
                <input id="password" type="password" name="password" autocomplete="off"
                       class="block w-full rounded p-2 rounded shadow border focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"
                       placeholder="Your Password">
            </div>
            <div class="flex items-center justify-between">
                <input class="bg-green-500 text-white text-lg font-medium p-2 rounded inline-block w-full hover:bg-green-400 transition duration-400 hover:shadow-lg"
                       type="submit" value="Login">
            </div>

        </form>
        <div class="text-center pb-4">
            <p class="text-grey-dark text-sm">
                Don't have an account? <a href="#" class="no-underline text-green-500 font-bold">Create an Account</a>.
            </p>
        </div>
    </div>
</div>
</body>
</html>

配置 Spring MVC 登录路径

将此 login.html 映射到路径 /login。对于此步骤,您需要提供自定义 WebMvcConfigurer 以让 spring MVC 知道您正在为 login 注册新映射,如下所示。

package com.springhow.examples.springboot.security.customformlogin.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/login").setViewName("login");
    }
}

通过执行此配置,每当请求到达 /login 时,MVC 上下文将在 src/main/resources/templates/ 下查找 login.html

Spring Security java配置

最后,覆盖默认的 HttpSecurity 配置,如下所示。

package com.springhow.examples.springboot.security.customformlogin.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest()
                .authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
                .logout()
                .permitAll();
    }
}

验证自定义表单登录

如果上述所有操作均正确完成,则在请求 http://localhost:8080/hello 时将重定向到自定义登录页面,如下所示。

您可以在 this github link 中找到此项目的代码。

相关文章

微信公众号

最新文章

更多