JS如何与SpringOAuth2安全认证配合_JS与SpringOAuth2安全认证配合的教程

spring:
  security:
    oauth2:
      resourceserver:
        jwt:
          issuer-uri: http://localhost:8080/auth/realms/your-realm
          # 或者指定 jwk-set-uri

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
</dependency>

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests(authz ->
            authz.requestMatchers("/public/**").permitAll()
                  .anyRequest().authenticated()
        );
        http.oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt);
        return http.build();
    }
}

function login() {
  const clientId = 'your-spa-client-id';
  const redirectUri = 'https://www.php.cn/link/c7e07c312fd6bafc9f5192b3dfdf3d3f';
  const scope = 'openid profile email';
  const state = generateRandomString();
  const codeVerifier = generateCodeVerifier(); // PKCE用
  const codeChallenge = base64UrlEncode(sha256(codeVerifier));
<p>// 存储codeVerifier以便回调时使用
sessionStorage.setItem('code_verifier', codeVerifier);</p><p>const authUrl = new URL('<a href="https://www.php.cn/link/90918c5b8c17f80e32d5b155a7bf6197">https://www.php.cn/link/90918c5b8c17f80e32d5b155a7bf6197</a>');
authUrl.searchParams.append('client_id', clientId);
authUrl.searchParams.append('response_type', 'code');
authUrl.searchParams.append('scope', scope);
authUrl.searchParams.append('redirect_uri', redirectUri);
authUrl.searchParams.append('state', state);
authUrl.searchParams.append('code_challenge', codeChallenge);
authUrl.searchParams.append('code_challenge_method', 'S256');</p><p>window.location.href = authUrl.toString();
}

// 假设URL中包含 ?code=xxx&state=yyy
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
<p>if (code) {
const codeVerifier = sessionStorage.getItem('code_verifier');
fetch('<a href="https://www.php.cn/link/d996e31032e7c288d7e20e7b82221c20">https://www.php.cn/link/d996e31032e7c288d7e20e7b82221c20</a>', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
grant_type: 'authorization_code',
client_id: 'your-spa-client-id',
code: code,
redirect_uri: '<a href="https://www.php.cn/link/c7e07c312fd6bafc9f5192b3dfdf3d3f">https://www.php.cn/link/c7e07c312fd6bafc9f5192b3dfdf3d3f</a>',
code_verifier: codeVerifier
})
})
.then(response => response.json())
.then(data => {
localStorage.setItem('access_token', data.access_token);
window.location.href = '/dashboard.html';
});
}

fetch('http://localhost:8080/api/user/profile', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('access_token')
  }
})
.then(response => {
  if (response.status === 401) {
    // token过期，重新登录
    window.location.href = '/login.html';
  }
  return response.json();
})
.then(data => console.log(data));

function apiGet(url) {
  return fetch(url, {
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    }
  });
}