spring security+oauth2登录逻辑与流程

本文只提供验证码模式

1.获取权限code (例如csdn等网站点击微信登录时就是一个获取code的过程) 地址：http://192.168.xx1.xx1:600/oauth/authorize?client_id=user-vue&response_type=code&redirect_uri=http://192.168.xx.xx:8080/excessive?
redirectTo=http://192.168.xx.xx:8080/home （后面的参数解释可以参考前文）实现token过期后重新获取token并跳转到原页面本地址的为跳转到主页 home页

2.判断没有登录则跳转到loginPage页面（是通过通过thymeleaf跳转到接口）在下图1中配置

3.点击登录会调用/login接口在上图2中配置

4 登录成功跳转到http://192.168.xx.xx:8080/excessive获取token

代码

LoginController

thymeleaf跳珠到登录页面

@Controller
public class LoginController {

    /**
     * thymeleaf指定登录页面
     * 
     * @param model
     * @return
     */
    @GetMapping("/loginPage")
    public String index(Model model) {
        return "/login";
    }
}

login页面

spring security认证异常后返回中文提示这篇文章在错误显示生效

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>

<style>
    .login-container {
        margin: 50px;
        width: 100%;
    }
    .form-container {
        margin: 0px auto;
        width: 50%;
        text-align: center;
        box-shadow: 1px 1px 10px #888888;
        height: 300px;
        padding: 5px;
    }
    input {
        margin-top: 10px;
        width: 350px;
        height: 30px;
        border-radius: 3px;
        border: 1px #E9686B solid;
        padding-left: 2px;

    }
    .btn {
        width: 350px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        margin-top: 20px;
        border-radius: 3px;
        background-color: #E9686B;
        color: white;
        border: none;
        font-size: 15px;
    }
    .title {
        margin-top: 5px;
        font-size: 18px;
        color: #E9686B;
    }
</style>
<body>
<div class="login-container">
    <div class="form-container">
        <p class="title">用户登录</p>
        <form th:action="@{/login}" method="post">
            <div class="input-group mb-3">
                <input name="username" type="text" class="form-control" placeholder="用户名">
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fa fa-user"></span>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                <input name="password" type="password" class="form-control" placeholder="密码">
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-lock"></span>
                    </div>
                </div>
            </div>
            <div class="row mb-2 ">
                <div class="col-6">
                    <input name="code" type="text" class="form-control" placeholder="验证码">
                </div>
                <div class="col-6">
                    <img onclick="this.src='/code/image?'+Math.random()" src="/code/image"
                         alt="验证码"/>
                </div>
            </div>
            <!-- 提示信息, 表达式红线没关系，忽略它 前文返回的中文信息会在此显示 -->
            <div th:if="${param.error}">
                <span th:text="${session.SPRING_SECURITY_LAST_EXCEPTION?.message}" style="color:red">用户名或密码错误</span>
            </div>
            <div class="row">
                <div class="col-8">
                    <div class="icheck-primary">
                        <input name="remember-me" type="checkbox" id="remember">
                        <label for="remember">
                            记住我
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-4">
                    <button type="submit" class="btn btn-primary btn-block">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>
    </div>
</div>
</body>
</html>

spring security+oauth2登录逻辑与流程

代码

login页面

猜你喜欢