15、oauth2.0使用thymeleaf渲染模板的自定义登录界面

最新推荐文章于 2023-07-19 22:31:03 发布

贝壳里的沙

最新推荐文章于 2023-07-19 22:31:03 发布

阅读量3.7k

点赞数

分类专栏： spring cloud 文章标签： oauth2 SpringCloud

本文链接：https://blog.csdn.net/lixiang987654321/article/details/82838230

版权

spring cloud 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

我们所有的假设条件是，已经安装配置好springMVC环境或SpringBoot加入了web包。为了更直观地看到跳转流程，我们添加一些页面和演示代码说明thymeleaf

（1）在web包下新建SecurityController

@Controller
public class SecurityController {

    @RequestMapping("/home")
    public ModelAndView home(String msg) {
        ModelAndView mv = new ModelAndView();
        mv.setViewName("home");
        mv.addObject("msg", msg);
        return mv;
    }
}

（2）在templates下新建login.html,home.html,内容如下

// login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link th:src="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<title>Login Page</title>
</head>
<body>
<div class="container" align="center">
    <form th:action="@{/login}" method="post">
        <p th:if="${param.logout}" class="bg-warning">你已注销</p> 
        <p th:if="${param.error}" class="bg-danger">用户名或密码错误</p>
        <input type="text" id="username" name="username" placeholder="用户名"/>
        <br/>
        <input type="password" id="password" name="password" placeholder="密码"/>
        <br/>
        <button class="btn btn-primary btn-lg" type="submit">登录</button>
    </form>
</div>
</body>
</html>

// home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link th:src="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<title>Home Page</title>
</head>
<body>
<div class="container" align="center">
    <h2>Hello <span th:text="${msg}"></span></h2>
    <form th:action="@{/logout}" method="post" id="logoutForm"></form>
    <button type="submit" form="logoutForm">注销</button>
</div>
</body>

</html>

其中login.html用作登录页面，Spring Security 只是默认post到/login的请求为登录请求，而并未指明具体的登录页面，所以我们需要自己配置登录页面。原理就是配置MVC实现Controller与view的自定义跳转，即我们只需要实现 WebMvcConfigurer配置类即可；（这里不使用"@{/login}",也可以直接使用"/login"或“login”)

（3）在config包下创建WebMvcConfig继承WebMvcConfigurerAdapter，创建WebSecurityConfig继承WebSecurityConfigurerAdapter或者自己实现WebMvcConfigurer接口（接口部分实现自己希望覆盖的接口）

/*****WebMVC配置******/
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter{

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 前面是url路径，后面是视图路径，添加thymeleaf后自动配置prefix为/templates,suffix为.html
        registry.addViewController("/login").setViewName("/login");
        registry.addViewController("/home").setViewName("/home");
    }
}

重点要说明的是：添加thymeleaf后自动配置prefix为/templates,suffix为.html

/*****WebSecurity配置******/
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()                         //定义权限配置
                .anyRequest().authenticated()       //任何请求都必须经过认证才能访问
        .and()
            .formLogin()                                    //定制登录表单
                .loginPage("/login")                    //设置登录url-定制登录页面
                .defaultSuccessUrl("/home")       //设置登录成功默认跳转url
                .permitAll()                                  //允许任何人访问登录url
        .and()
            .logout().permitAll();                        //允许任何人访问登出url
    }
}

现在运行项目，Spring Security会自动生成一个用户放到内存中，用户名为user，密码会在项目启动时显示，直接访问http://localhost:8080/home将跳转到登录页面，输入用户名密码后就能看到home页面了（展示hello字样和注销按钮）

home页面：

点击注销后Spring Security将注销用户session并跳转到/login?logout，如果登录失败，比如用户名不存在、密码错误等情况，将跳转到/login?error

此时登录失败或注销后便可以显示相应的提示信息

快来成为我的朋友或合作伙伴，一起交流，一起进步！
QQ群：961179337
微信：lixiang6153
邮箱：lixx2048@163.com
公众号：IT技术快餐
更多资料等你来拿！

贝壳里的沙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
15、oauth2.0使用thymeleaf渲染模板的自定义登录界面

我们所有的假设条件是，已经安装配置好springMVC环境或SpringBoot加入了web包。为了更直观地看到跳转流程，我们添加一些页面和演示代码说明thymeleaf（1）在web包下新建SecurityController@Controllerpublic class SecurityController { @RequestMapping("/home") ...
复制链接

扫一扫