快捷導(dǎo)航

JustAuth-第三方Oauth2登錄方式

更新時(shí)間：2024年09月18日 10:38:51 作者：勿語(yǔ)&

JustAuth是一款支持多種第三方登錄的工具,本文通過(guò)實(shí)戰(zhàn)介紹了如何在Springboot項(xiàng)目中集成JustAuth實(shí)現(xiàn)第三方登錄,主要步驟包括引入依賴、配置Controller、設(shè)置登錄和回調(diào)頁(yè)面,通過(guò)訪問(wèn)登錄頁(yè)面并選擇Gitee登錄,系統(tǒng)會(huì)重定向至Gitee進(jìn)行認(rèn)證

JustAuth-第三方Oauth2登錄

JustAuth官網(wǎng)： https://www.justauth.cn/

JustAuth整合Springboot

1.引入依賴

<dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-starter-web</artifactId>
	 <version>2.7.15</version>
</dependency>
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.26</version>
</dependency>
<dependency>
    <groupId>me.zhyd.oauth</groupId>
    <artifactId>JustAuth</artifactId>
    <version>1.16.6</version>
</dependency>

2.Controller

（到Gitee或GitHub上申請(qǐng)第三方授權(quán)，修改為自己的clientId、clientSecret）。

這里url中的 {source} 是為了接口和方法的復(fù)用。

@RestController
@RequestMapping("/oauth")
public class OauthController {

    @RequestMapping("/{source}")
    public void renderAuth(@PathVariable("source") String source,HttpServletResponse response) throws IOException {
        AuthRequest authRequest = getAuthRequest(source);
        response.sendRedirect(authRequest.authorize(AuthStateUtils.createState()));
    }

    @RequestMapping("/callback")
    public String login(@RequestParam("source") String source, AuthCallback callback) {
        AuthRequest authRequest = getAuthRequest(source);
        // 返回用戶的基本信息
        AuthResponse authResponse = authRequest.login(callback);
        // 返回Token
        return UUID.randomUUID().toString();
    }

    private AuthRequest getAuthRequest(String source) {
        if ("gitee".equals(source)) {
            return new AuthGiteeRequest(AuthConfig.builder()
                    .clientId("***************************")
                    .clientSecret("****************************")
                    // 回調(diào)地址與Gitee上注冊(cè)的保持一致
                    .redirectUri("http://127.0.0.1:8080/callback.html?source=gitee")
                    .build());
        }else if ("github".equals(source)){
            return new AuthGithubRequest(AuthConfig.builder()
                    .clientId("**********")
                    .clientSecret("*********")
                    // 回調(diào)地址與Github上注冊(cè)的保持一致
                    .redirectUri("http://127.0.0.1:8080/callback.html?source=github")
                    .build());
        }
        return null;
    }
}

3.登陸頁(yè)面 login.html

(放在resources/static/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://localhost:8080/oauth/gitee" rel="external nofollow" >Gitee登錄</a>
<a href="http://localhost:8080/oauth/github" rel="external nofollow" >Github登錄</a>
</body>
</html>

4.回調(diào)頁(yè)面 callback.html

(放在resources/static/callback.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>callback</title>
    <style>
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader {
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
<div id="loading-overlay" class="overlay">
    <div class="loader">Loading</div>
</div>
<script>
    window.onload = async function () {
        showLoadingOverlay()
        // 獲取 source、code、state參數(shù)發(fā)起fetch請(qǐng)求
        const params = new URLSearchParams(window.location.search);
        // 發(fā)起請(qǐng)求
        try {
            const res = await fetch("/oauth/callback", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                body: params.toString(),
            }).then(res => res.text())
            localStorage.setItem("token", res)
            location.href = "/index.html"
        } finally {
            hideLoadingOverlay()
        }
    }

    // 顯示遮罩
    function showLoadingOverlay() {
        document.getElementById("loading-overlay").style.display = "flex";
    }

    // 隱藏遮罩
    function hideLoadingOverlay() {
        document.getElementById("loading-overlay").style.display = "none";
    }
</script>
</body>
</html>

5.登錄成功后跳轉(zhuǎn)首頁(yè) index.html

(放在resources/static/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁(yè)</title>
</head>
<body>
<div>首頁(yè)</div>
</body>
</html>

啟動(dòng)項(xiàng)目訪問(wèn) http://localhost:8080/login.html

點(diǎn)擊Gitee登錄（會(huì)跳轉(zhuǎn)到Gitee進(jìn)行登錄，登錄成功后攜帶參數(shù)重定向到回調(diào)頁(yè)面，如果Gitee已經(jīng)登陸，則直接攜帶參數(shù)重定向到回調(diào)頁(yè)面）。

callback.html 掛載后，會(huì)攜帶url參數(shù)，發(fā)起請(qǐng)求，請(qǐng)求結(jié)束之后保存返回的token，并跳轉(zhuǎn)到index.html。

Gitee的回調(diào)URL：

http://127.0.0.1:8080/callback.html?source=gitee&code=19c26e280bc9a83de9df6c9698b802a61e210e4fce67b0867b8166eef990c053&state=f40f8a38c9dfed67ee912960016f8f69