SpringSecurity6 | 自定义登录页面

公众号封面

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉
🍎个人主页:Leo的博客
💞当前专栏: Java从入门到精通
✨特色专栏: MySQL学习
🥭本文内容:SSpringSecurity6 | 自定义登录页面
📚个人知识库 :知识库,欢迎大家访问

学习参考 :

  • 讲师:孙帅老师
  • 课程:孙哥说SpringSecurity6

image-20231030235443828

1.前言

大家好,我是Leo哥🫣🫣🫣,接到上一节,我们学习通过SpringSecurity的一些自定义配置来完成我们自定义认证规则的一些需求。这篇文章我们主要来介绍一下如何自定义我的登录页面。好了,话不多说让我们开始吧😎😎😎。

2.环境配置

首先先说明一下我们的环境配置和技术要求,我们还是会创建一个新的SpringBoot工程,对其进行一些自定义配置。

因为我们要自定义我们的登录页面,所以我们这里会用到一种后端模版引擎–>Thyemleaf。如果对Thyemleaf还不了解的同学,可以参考我这篇文章。

3.自定义登录页面

3.1 导入依赖

在我们的pom.xml文件中导入ThymeLeaf依赖。

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

3.2 创建login.html

并制定xml:th的映射,这里是为了可以在HTML中使用ThymeLeaf语法。

<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.login-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 5px;box-sizing: border-box; /* ensures padding doesn't affect width */}.form-group input[type="submit"] {background-color: #5c79b8;color: white;cursor: pointer;}.form-group input[type="submit"]:hover {background-color: #4cae97;}</style>
</head>
<body>
<div class="login-container"><h2>登录页面</h2><form><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" name="name" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="passwd" required></div><div class="form-group"><input type="submit" value="Log In"></div></form>
</div>
</body>
</html>

简单在浏览器,看看我们简易的登录界面吧。

image-20231209211629716

3.3 配置

那我们如何将他配置为我们SpringSecurity的登录页面呢,通过以下配置。

首先我们在后端编写一个controller请求,也就是返回我们自定义的登录页面。

image-20231209212008381

注意:这里一定不要写成@RestController了,因为我们不需要向前端返回JSON数据哈。

然后我们在SpringSecurity的配置类进行配置我们的自定义登录页面。

image-20231209212732990

然后启动项目,访问hello接口。

但是我们发现一个问题,此时我们输入我们的用户名和密码却不能登录,而是会在浏览器进行刷新,我们接着往下看。

那么是怎么回事呢,此时我们需要回顾一下我们之前学习的知识,也就是我能当时查看表单登录的整合流程。

image-20231205201036604

他会调用 HttpSecurity 类的 formLogin() 方法,在该方法中创建 FormLoginConfigurer 类的实例,并指定处理认证的 Filter 进行认证:

image-20231205202326832

然后又去new了一个FormLoginConfigurer(),然后去调用父类的构造方法区new这个类

image-20231205202413310

image-20231209213412137

我们在UsernamePasswordAuthenticationFilter类中中的**attemptAuthentication()**方法中可以看到他的一些要求。

首先必须是POST请求,然后用户名的属性必须是username,密码的属性是password。

按照上面的解读,我们来按照规则改善一下我们的登录页面。

image-20231209214100245

还需要对我们的配置类做一些改变,这里的登录的url要和我们前端请求的保持一致。

image-20231209214135705

然后启动项目,再次访问。

Leo-2023-12-09-21-45-16

当然还有另外一种方式实现是通过Java配置类的方式,而不是更改name属性值。我们这里简单介绍一下。

image-20231209214829879

4.总结

以上便是本文的全部内容,本人才疏学浅,文章有什么错误的地方,欢迎大佬们批评指正!我是Leo,一个在互联网行业的小白,立志成为更好的自己。

如果你想了解更多关于Leo,可以关注公众号-程序员Leo,后面文章会首先同步至公众号。

公众号封面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高工氢电年会 | 未势能源解超朋博士受邀出席并做主题演讲

12月4日&#xff0c;以“战略重构 商业觉醒”为主题的2023高工氢电年会在深圳举办&#xff0c;未势能源副总裁解超朋博士受邀出席开幕式论坛&#xff0c;以《把握机遇、直面挑战&#xff0c;迎接氢车规模化推广时代》为主题发表演讲&#xff0c;并参与圆桌论坛研讨。 氢势已来&…

【Linux】resolv.conf 文件

resolv.conf resolv.conf 文件 是 DNS 的 client 端使用的文件&#xff0c;用于设置 DNS 服务器的 ip 地址以及 DNS 域名&#xff0c;还可以配置域名搜索顺序等等。主要包含如下关键字&#xff1a;nameserver、domain、search、sortlist、options。设置的格式都是 关键字空格 …

管理类联考——数学——真题篇——按知识分类——数据

文章目录 排列组合2023真题&#xff08;2023-05&#xff09;-数据分析-排列组合-组合-C运算-至少-需反面思考真题&#xff08;2023-08&#xff09;-数据分析-排列组合-相邻不相邻-捆绑法插空法-插空法注意空位比座位多1个&#xff0c;是用A&#xff1b;捆绑法内部排序用A&#…

Linux(centos, ubuntu) 快速安装anaconda;5秒安装anaconda

1.下载Anaconda安装脚本: 首先&#xff0c;访问Anaconda的官方下载页面&#xff1a;https://www.anaconda.com/products/distribution 在页面上&#xff0c;选择适用于Linux的Python 3.x版本的Anaconda安装脚本。也可以使用wget或curl命令从终端下载。示例&#xff1a; wget …

2023中国(海南)国际高尔夫旅游文化博览会 暨国际商界峰层·全球华人高尔夫精英巡回赛 全国颍商自贸港行盛大启幕

2023中国&#xff08;海南&#xff09;国际高尔夫旅游文化博览会&#xff08;以下简称“海高博”&#xff09;暨全国颍商走进海南自贸港于12月7-9日在海口观澜湖盛大开幕。该活动由中国国际贸易促进委员会海南省委员会、海南省旅游和文化广电体育厅主办&#xff0c;中国国际商会…

C语言中getchar函数

在 C 语言中&#xff0c;getchar() 是一个标准库函数&#xff0c;用于从标准输入&#xff08;通常是键盘&#xff09;读取单个字符。它的函数原型如下&#xff1a; int getchar(void);getchar() 函数的工作原理如下&#xff1a; 当调用 getchar() 函数时&#xff0c;它会等待…

最新版本11.17的YOLOv8加入注意力方法

本文基于11.17版本,以往版本略有不同,可查看改进YOLOv8,教你YOLOv8如何添加20多种注意力机制进行参考 放入注意力代码,以biformer注意力为例 import torch import torch.nn as nn import torch.nn.functional as Fdef position(H, W, is_cuda=

探索 Python 中链表的实现:从基础到高级

# 更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 链表是一种基础的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点都包含数据和指向下一个节点的引用。在Python中&#xff0c;可以使用类来实现链表&#xff0c;本文将介绍如何实现链表&#xff…

c语言编程题经典100例——(90~95例)

1,写一个函数&#xff0c;实现数字的加密和解密。 下面是一个简单的C语言函数&#xff0c;可以实现数字的加密和解密。这个函数采用简单的加密算法&#xff0c;将输入的数字乘以一个固定的密钥&#xff0c;然后加上一个固定的偏移量。解密过程就是将加密后的数字减去偏移量&am…

《C++新经典设计模式》之第18章 备忘录模式

《C新经典设计模式》之第18章 备忘录模式 备忘录模式.cpp 备忘录模式.cpp #include <iostream> #include <vector> #include <memory> using namespace std;// 保存对象内部状态&#xff0c;必要时恢复 // 在不破坏封装性的前提下&#xff0c;捕获对象的内部…

(C)一些题11

1. #include<stdio.h> #include<string.h> void main() { char *s1"ABCDEF"&#xff0c;*s2"aB"&#xff1b; s1; s2; puts(s1)&#xff1b; puts(s2)&#xff1b; printf("%d\n",strcmp(s1,s2))&#xff1b; } 答案&#xff1…

【密码学引论】认证

认证是许多应用系统中安全保护的第一道设防认证和加密的区别&#xff1a;加密用来确保数据的保密性&#xff0c;而认证用来确保报文发送者和接受者的真实性和报文的完整性。认证和数字签名的区别&#xff1a; 认证总是基于某种收发双方共享的保密数据来认证被鉴别对象的真实性&…

关于linux开机自启动

1、系统启动流程 2、 init、 inittab、 init.d、 rcx.d /etc/inittab是Linux系统中的一个配置文件&#xff0c;用于定义系统的运行级别和相应的操作。其语法格式如下&#xff1a; 标签&#xff1a;运行级别&#xff1a;操作&#xff1a;进程 label:runlevel:action:process下面…

每天一点python——day90

#每天一点Python——90 #类的创建 创建类的语法&#xff1a; class 类名&#xff1a;pass【缩进之后写类里面的内容】 [类里面写什么没有想好之前&#xff0c;可以用pass进行占位.可以不报错]#演示&#xff1a; class Lei:pass #以上就上一个类被创建的样例注意事项&#xff1a…

PHP基础 - 注释变量

一. 语言开始标识 在PHP中,文件的开头需要使用语言开始标识来指定该文件是PHP代码。标识通常为"<?php",也可以是"<?",但建议使用"<?php"以确保代码的兼容性和可读性。 <?php // PHP代码从这里开始写 二. PHP注释 注释是用…

[英语学习][11][Word Power Made Easy]的精读与翻译优化

[序言] 这次翻译, 译者有点点水平. 有些比较难表达的, 都能正确地翻译出来. 但有点很奇怪, 难的地方译者翻译正确, 容易的地方又错了. [英文学习的目标] 提升自身的英语水平, 对日后编程技能的提升有很大帮助. 希望大家这次能学到东西, 同时加入我的社区讨论与交流英语相关的…

遇到这个问题怎么办

1. 问题现象 话说近日博主的团队中&#xff0c;有一个小盆友遇到了一个问题&#xff0c;即使用RSA进行加解密的时候&#xff0c;抛异常了&#xff1a; java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: IOException: DerInputStream.getLeng…

高防CDN:在保障服务器与网站成本的角度的智慧选择

随着网络攻击的不断升级和演变&#xff0c;保障服务器与网站安全成为了企业不可忽视的重要问题。高防CDN&#xff08;内容分发网络&#xff09;技术应运而生&#xff0c;为服务器与网站的稳定运行提供了全面而有效的保护。本文将从服务器与网站成本的角度深入分析高防CDN在降低…

【Python】Faker库详解:创建测试数据轻而易举

Python Faker库详解&#xff1a;创建测试数据轻而易举 在软件开发和测试过程中&#xff0c;通常需要大量的测试数据来模拟真实环境。Python的Faker库为开发者提供了一个方便、灵活且强大的工具&#xff0c;用于生成各种虚构数据。本文将深入介绍Faker库&#xff0c;演示其基本…

十一、了解分布式计算

1、什么是&#xff08;数据&#xff09;计算&#xff1f; 2、分布式(数据)计算 &#xff08;1&#xff09;概念 顾名思义&#xff0c;分布式计算&#xff0c;即以分布式的形式完成数据的统计&#xff0c;得到需要的结果。 分布式数据计算&#xff0c;顾名思义&#xff0c;就是…