如何用Spring Security OAuth2（Auth0）保护前后端分离项目的端点与页面

一、前端认证与请求头自动注入实现 #

1. 前端项目的Auth0集成配置 #

在Thymeleaf前端项目中，先引入Spring Security和Auth0依赖（以Maven为例）：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>com.auth0</groupId>
    <artifactId>auth0-spring-boot-starter-webmvc</artifactId>
    <version>2.1.0</version>
</dependency>

然后在application.properties配置Auth0核心参数：

auth0.domain=你的Auth0域名
auth0.client-id=你的客户端ID
auth0.client-secret=你的客户端密钥
auth0.redirect-uri=http://localhost:8080/login/oauth2/code/auth0
auth0.audience=你的API标识符（对应后端REST API的Audience）

编写Spring Security配置类，启用OAuth2客户端认证并处理token校验：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Value("${auth0.domain}")
    private String domain;

    @Value("${auth0.audience}")
    private String audience;

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth.anyRequest().authenticated())
            .oauth2Login(oauth2 -> oauth2.redirectionEndpoint(redir -> redir.baseUri("/login/oauth2/code/*")))
            .oauth2ResourceServer(oauth2 -> oauth2.jwt(jwt -> jwt.decoder(jwtDecoder())));
        return http.build();
    }

    @Bean
    public JwtDecoder jwtDecoder() {
        NimbusJwtDecoder jwtDecoder = JwtDecoders.fromOidcIssuerLocation(domain);
        OAuth2TokenValidator<Jwt> audienceValidator = new AudienceValidator(audience);
        OAuth2TokenValidator<Jwt> withIssuer = JwtValidators.createDefaultWithIssuer(domain);
        OAuth2TokenValidator<Jwt> withAudience = new DelegatingOAuth2TokenValidator<>(withIssuer, audienceValidator);
        jwtDecoder.setJwtValidator(withAudience);
        return jwtDecoder;
    }
}

// 自定义Audience校验器
class AudienceValidator implements OAuth2TokenValidator<Jwt> {
    private final String audience;

    AudienceValidator(String audience) {
        this.audience = audience;
    }

    @Override
    public OAuth2TokenValidatorResult validate(Jwt jwt) {
        return jwt.getAudience().contains(audience) 
            ? OAuth2TokenValidatorResult.success() 
            : OAuth2TokenValidatorResult.failure(new OAuth2Error("invalid_audience", "缺失必填受众", null));
    }
}

2. 前端页面的登录/登出逻辑 #

在Thymeleaf页面中，通过Spring Security安全表达式实现登录跳转和用户信息展示：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title>Frontend</title>
</head>
<body>
    <div sec:authorize="isAuthenticated()">
        <p>欢迎, <span sec:authentication="name"></span></p>
        <a th:href="@{/logout}">登出</a>
    </div>
    <div sec:authorize="!isAuthenticated()">
        <a th:href="@{/oauth2/authorization/auth0}">登录</a>
    </div>

    <!-- 隐藏域存储Access Token，供AJAX调用使用 -->
    <input type="hidden" id="accessToken" th:value="${#authentication.principal.attributes.get('access_token')}" />
</body>
</html>

3. 自动添加Authorization请求头 #

如果是前端AJAX调用后端API，用JS全局拦截器自动注入token：

// 全局AJAX拦截器，给所有请求添加Authorization头
$(document).ajaxSend(function(event, xhr, settings) {
    const accessToken = document.getElementById('accessToken').value;
    if (accessToken) {
        xhr.setRequestHeader('Authorization', `Bearer ${accessToken}`);
    }
});

如果是前端项目通过后端代理调用API，可配置RestTemplate拦截器自动携带token：

@Bean
public RestTemplate apiRestTemplate() {
    RestTemplate restTemplate = new RestTemplate();
    restTemplate.getInterceptors().add((request, body, execution) -> {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        if (auth != null) {
            OAuth2AuthenticatedPrincipal principal = (OAuth2AuthenticatedPrincipal) auth.getPrincipal();
            String accessToken = principal.getAttribute("access_token");
            if (accessToken != null) {
                request.getHeaders().setBearerAuth(accessToken);
            }
        }
        return execution.execute(request, body);
    });
    return restTemplate;
}

二、方案合规性说明 #

这个方案完全符合OAuth2/OpenID Connect标准规范：

• 采用授权码流程获取token，是服务端渲染应用的推荐安全流程，规避了隐式流程的风险。
• 请求头携带Bearer Token是REST API鉴权的标准方式，符合RFC 6750规范。
• token存储在服务端会话（HttpSession）中，相比前端本地存储更能防范XSS攻击；配合HTTPS传输，可避免token被窃听。
• 只要正确配置CORS（允许前端域名携带Authorization头访问后端API），跨域请求也完全合规。

需注意的细节：

• 合理设置token有效期，配置刷新token机制避免用户频繁登录。
• 不要在页面源码中明文暴露token，用隐藏域或后端动态注入的方式传递给前端JS。
• 后端API要校验token的签名、受众、过期时间等参数，确保请求合法性。

三、类似实践案例 #

• 企业级后台管理系统：很多企业用Thymeleaf做后台前端，拆分独立REST API服务，统一用Auth0/Okta做身份管理，适配未来前端技术栈切换（如Vue/React）的需求，后端鉴权逻辑无需改动。
• 电商商家后台：前端用Thymeleaf做服务端渲染，后端API负责订单、商品等业务逻辑，通过Auth0实现多租户身份认证，保障数据安全。
• Auth0官方Spring Boot Web App示例：核心流程与本方案一致，拆分前后端后仅需调整API调用地址和CORS配置即可。

内容的提问来源于stack exchange，提问作者Bardo