快捷導(dǎo)航

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

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

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

寫在前面

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

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

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

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

這里呢，我們先采取Themleaf模板引擎來開發(fā)登錄頁面。后續(xù)會說到前后端分離的場景，小伙伴們不要著急，慢慢來

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

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>曉凡登錄頁面</title>
</head>
<body>
<h1>登錄</h1>
<div th:if="${param.error}">
    用戶名或者密碼錯誤
</div>
<!--method必須為"post"-->
<!--mylogin: 和登錄頁面保持一致即可，SpringSecurity自動進(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ì)說。

二、編寫登錄接口

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

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

登錄頁面和登錄接口都寫好了，我們來試下是否能訪問到我們自定義的登錄頁面。

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

三、配置自定義登錄頁面

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

http.formLogin(withDefaults());

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

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

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

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

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

這是為什么呢？因?yàn)橄旅娴呐渲脮λ姓埱筮M(jìn)行授權(quán)保護(hù)

http.authorizeHttpRequests(
    authorize->authorize
    //對所有請求開啟授權(quán)保護(hù)
    .anyRequest()
    //已認(rèn)證的請求會被自動授權(quán)
    .authenticated()
);

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

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

經(jīng)過修改之后，我們再來驗(yàn)證一下，瀏覽器地址欄輸入：http://localhost:8080 后

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

四、csrf攻擊

細(xì)心的小伙伴可能發(fā)現(xiàn)了，我們在編寫登錄頁面的時候，form表單使用的是動態(tài)參數(shù)，具體如下

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

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

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

五、小結(jié)

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

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

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

您可能感興趣的文章: