快捷導(dǎo)航

SpringBoot3整合SpringSecurity6自定義登錄頁(yè)面的詳細(xì)過(guò)程

更新時(shí)間：2025年05月27日 08:53:18 作者：程序員曉凡

在前面的學(xué)習(xí)中,我們使用的都是SpringSecurity?框架提供的登錄頁(yè)面,而實(shí)際開(kāi)發(fā)中,我們往往都需要自定義登錄頁(yè)面,這篇文章主要介紹了SpringBoot3整合SpringSecurity6自定義登陸頁(yè)面,需要的朋友可以參考下

寫在前面

在前面的文章中，我們學(xué)習(xí)了SpringSecurity 登錄認(rèn)證流程，對(duì)其應(yīng)該有個(gè)大概印象了。

忘記的小伙伴點(diǎn)擊下面自己復(fù)習(xí)去~

在前面的學(xué)習(xí)中，我們使用的都是SpringSecurity 框架提供的登錄頁(yè)面，而實(shí)際開(kāi)發(fā)中，我們往往都需要自定義登錄頁(yè)面。

一、準(zhǔn)備登錄頁(yè)面

這里呢，我們先采取Themleaf模板引擎來(lái)開(kāi)發(fā)登錄頁(yè)面。后續(xù)會(huì)說(shuō)到前后端分離的場(chǎng)景，小伙伴們不要著急，慢慢來(lái)

在resources/templates下創(chuàng)建mylogin.html登錄頁(yè)面，代碼如下

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>曉凡登錄頁(yè)面</title>
</head>
<body>
<h1>登錄</h1>
<div th:if="${param.error}">
    用戶名或者密碼錯(cuò)誤
</div>
<!--method必須為"post"-->
<!--mylogin: 和登錄頁(yè)面保持一致即可，SpringSecurity自動(dòng)進(jìn)行登錄認(rèn)證-->
<form th:action="@{/mylogin}" method="post">
    <div>
        <!--name必須為"username"-->
        <input type="text" name="username" placeholder="用戶名"/>
    </div>
    <div>
        <!--name必須為"password"-->
        <input type="password" name="password" placeholder="密碼"/>
    </div>
    <input type="submit" value="登錄" />
</form>
</body>
</html>

注：

需要采用post方式提交表單
用戶名輸入框的name屬性必須是username，SpringSecurity 框架默認(rèn)接收name="username"參數(shù)
密碼輸入框的name屬性必須是password，SpringSecurity 框架默認(rèn)接收name="password"參數(shù) 。當(dāng)然這里可以自定義，我們后面再細(xì)說(shuō)。

二、編寫登錄接口

上面寫的登錄頁(yè)面提交地址是/login （th:action="@{/login}"）,所以接下來(lái)我們來(lái)寫一個(gè)登錄接口，代碼如下

@Controller
public class LoginController {
    @GetMapping("/mylogin")
    public String login() {
        //跳轉(zhuǎn)到mylogin試圖解析器（上面自定義登錄頁(yè)面）
        return "mylogin";
    }
}

登錄頁(yè)面和登錄接口都寫好了，我們來(lái)試下是否能訪問(wèn)到我們自定義的登錄頁(yè)面。

瀏覽器地址欄輸入：http://localhost:8080 回車后，我們發(fā)現(xiàn)還是系統(tǒng)的登錄頁(yè)面。結(jié)果如下

三、配置自定義登錄頁(yè)面

默認(rèn)情況下，應(yīng)用程序在走到我們寫的LonginController之前，會(huì)經(jīng)過(guò)一系列的過(guò)濾器。在過(guò)濾器中，其中配置的一個(gè)過(guò)濾器就是

http.formLogin(withDefaults());

這個(gè)過(guò)濾器默認(rèn)會(huì)這樣處理：如果應(yīng)用程序沒(méi)有進(jìn)行授權(quán)的話，它會(huì)將瀏覽器跳轉(zhuǎn)到/login 這個(gè)地址當(dāng)中，如果/login這個(gè)地址作為請(qǐng)求發(fā)送到后端服務(wù)器。

SpringSecurity 就回去找默認(rèn)的登錄頁(yè)面。

所以，我們要做的就是修改這個(gè)默認(rèn)配置

// 自定義登錄頁(yè)面
http.formLogin(form->{
    form.loginPage("/mylogin");
});

這時(shí)候我們，再重啟服務(wù)，看看有沒(méi)有達(dá)到我們的預(yù)期，結(jié)果如下

這是為什么呢？因?yàn)橄旅娴呐渲脮?huì)對(duì)所有請(qǐng)求進(jìn)行授權(quán)保護(hù)

http.authorizeHttpRequests(
    authorize->authorize
    //對(duì)所有請(qǐng)求開(kāi)啟授權(quán)保護(hù)
    .anyRequest()
    //已認(rèn)證的請(qǐng)求會(huì)被自動(dòng)授權(quán)
    .authenticated()
);

我們只需要對(duì)mylogin頁(yè)面進(jìn)行放行即可，修改后如下

// 自定義登錄頁(yè)面
http.formLogin(form->{
    form.loginPage("/mylogin").permitAll();
});

經(jīng)過(guò)修改之后，我們?cè)賮?lái)驗(yàn)證一下，瀏覽器地址欄輸入：http://localhost:8080 后

成功跳轉(zhuǎn)到我們自定義的登錄頁(yè)面了，登錄界面雖然丑了一點(diǎn)，但功能是實(shí)現(xiàn)了~

四、csrf攻擊

細(xì)心的小伙伴可能發(fā)現(xiàn)了，我們?cè)诰帉懙卿涰?yè)面的時(shí)候，form表單使用的是動(dòng)態(tài)參數(shù)，具體如下

<form th:action="@{/mylogin}" method="post">

動(dòng)態(tài)參數(shù)th:action="@{/login}" 這種寫法可以防止csrf 攻擊，我們來(lái)看下我們的登陸頁(yè)面源碼。

當(dāng)然了，我們需要把csrf打開(kāi)，csrf攻擊只存在單體應(yīng)用中。后面要學(xué)的前后端分離是不存在的，我們可以把csrf關(guān)閉

五、小結(jié)

本篇文章的核心知識(shí)點(diǎn)就是下面的自定義登錄頁(yè)面配置，理解了這兒就夠了

// 自定義登錄頁(yè)面
http.formLogin(form->{
    form.loginPage("/mylogin").permitAll();
});

到此這篇關(guān)于SpringBoot3整合SpringSecurity6自定義登陸頁(yè)面的文章就介紹到這了,更多相關(guān)SpringBoot3整合SpringSecurity6自定義登陸頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: