身份验证后回调时出现 404 错误(Spring Boot + Angular + Okta)

嗨，我现在正在使用Angular + Spring Boot来构建一个网站，在我的网站上，我正在使用Okta单页应用程序进行身份验证。对于前端，我使用的是okta-angular，请按照此处的说明进行操作：https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular。我正在使用隐式流。为了简单起见，我使用了okta托管的登录小部件。

我的前端代码是这样的：

app.module.ts

import {
OKTA_CONFIG,
OktaAuthModule
} from '@okta/okta-angular';
const oktaConfig = {
issuer: 'https://{yourOktaDomain}.com/oauth2/default',
clientId: '{clientId}',
redirectUri: 'http://localhost:{port}/implicit/callback',
pkce: true
}
@NgModule({
imports: [
...
OktaAuthModule
],
providers: [
{ provide: OKTA_CONFIG, useValue: oktaConfig }
],
})
export class MyAppModule { }

然后我在app-routing.module.ts中使用OktaAuthGuard

import {
OktaAuthGuard,
...
} from '@okta/okta-angular';
const appRoutes: Routes = [
{
path: 'protected',
component: MyProtectedComponent,
canActivate: [ OktaAuthGuard ],
},
...
]

同样在app-routing.module.ts中，我正在使用OktaCallBackComponent。

当然，我在标题上有登录/注销按钮：

import { Component, OnInit } from '@angular/core';
import {OktaAuthService} from '@okta/okta-angular';
@Component({
selector: 'app-header',
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent implements OnInit {
isAuthenticated: boolean;
constructor(public oktaAuth: OktaAuthService) {
// Subscribe to authentication state changes
this.oktaAuth.$authenticationState.subscribe(
(isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
);
}
async ngOnInit() {
this.isAuthenticated = await this.oktaAuth.isAuthenticated();
}
login() {
this.oktaAuth.loginRedirect('/');
}
logout() {
this.oktaAuth.logout('/');
}
}

<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" *ngIf="!isAuthenticated" (click)="login()"> Login </a>
<a class="nav-link" *ngIf="isAuthenticated" (click)="logout()"> Logout </a>
</li>
</ul>
</div>
</nav>

用户在前端登录后，我会将 Authoirization 标头传递给后端，并且在后端，我使用 spring 安全性来保护后端 api。喜欢这个：

import com.okta.spring.boot.oauth.Okta;
import lombok.RequiredArgsConstructor;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;
@RequiredArgsConstructor
@EnableWebSecurity
public class OktaOAuth2WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
// Disable CSRF (cross site request forgery)
http.csrf().disable();
// No session will be created or used by spring security
http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
http.authorizeRequests()
.antMatchers("/api/**").authenticated()
.and()
.oauth2ResourceServer().opaqueToken();
Okta.configureResourceServer401ResponseBody(http);
}
}

如果我在终端中分别运行角度和弹簧引导，一切正常。我可以登录，我可以在后端获取用户信息。

但问题是，当我们使用 gradle build 和部署时，我们会将 angular 编译的代码放入 spring boot 项目下的静态文件夹中。此时，如果我运行项目：

java -jar XX.jar

我在本地主机：8080打开。

我登录，那么这个时候，认证回调会抛出404未找到错误。

在我的理解中，原因是当我运行jar文件时，我没有为"回调"url定义控制器。但是如果我分别运行 angular 和 spring boot，angular 由 nodejs 托管，我使用了 okta callbackcomponent，所以一切正常。

那么我应该怎么做才能解决问题呢？我的意思是，我应该怎么做才能让它作为 jar 文件工作？我应该定义一个回调控制器吗？但是我应该在回调控制器中做什么？它会与前端代码冲突吗？

你很幸运！我今天刚刚发表了一篇博客文章，展示了如何采用单独运行的 Angular + Spring Boot 应用程序(使用 Okta 的 SDK)并将它们打包到单个 JAR 中。您仍然可以使用ng serve和./gradlew bootRun独立开发每个应用程序，但您也可以使用./gradlew bootRun -Pprod在单个实例中运行它们。在生产模式下运行的缺点是您无法在 Angular 中获得热重载。以下是我在上述教程中使用的步骤。

创建一个新的身份验证服务服务，该服务将与您的 Spring 启动 API 通信以用于身份验证逻辑。

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { User } from './user';
import { map } from 'rxjs/operators';
const headers = new HttpHeaders().set('Accept', 'application/json');
@Injectable({
providedIn: 'root'
})
export class AuthService {
$authenticationState = new BehaviorSubject<boolean>(false);
constructor(private http: HttpClient, private location: Location) {
}
getUser(): Observable<User> {
return this.http.get<User>(`${environment.apiUrl}/user`, {headers}).pipe(
map((response: User) => {
if (response !== null) {
this.$authenticationState.next(true);
return response;
}
})
);
}
isAuthenticated(): Promise<boolean> {
return this.getUser().toPromise().then((user: User) => { 
return user !== undefined;
}).catch(() => {
return false;
})
}
login(): void { 
location.href =
`${location.origin}${this.location.prepareExternalUrl('oauth2/authorization/okta')}`;
}
logout(): void { 
const redirectUri = `${location.origin}${this.location.prepareExternalUrl('/')}`;
this.http.post(`${environment.apiUrl}/api/logout`, {}).subscribe((response: any) => {
location.href = response.logoutUrl + '?id_token_hint=' + response.idToken
+ '&post_logout_redirect_uri=' + redirectUri;
});
}
}

在同一目录中创建一个user.ts文件，以保存User模型。

export class User {
sub: number;
fullName: string;
}

更新app.component.ts以使用您的新AuthService以支持OktaAuthService。

import { Component, OnInit } from '@angular/core';
import { AuthService } from './shared/auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'Notes';
isAuthenticated: boolean;
isCollapsed = true;
constructor(public auth: AuthService) {
}
async ngOnInit() {
this.isAuthenticated = await this.auth.isAuthenticated();
this.auth.$authenticationState.subscribe(
(isAuthenticated: boolean)  => this.isAuthenticated = isAuthenticated
);
}
}

更改app.component.html中的按钮以引用auth服务而不是oktaAuth。

<button *ngIf="!isAuthenticated" (click)="auth.login()"
class="btn btn-outline-primary" id="login">Login</button>
<button *ngIf="isAuthenticated" (click)="auth.logout()"
class="btn btn-outline-secondary" id="logout">Logout</button>

更新home.component.ts以使用AuthService。

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../shared/auth.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
isAuthenticated: boolean;
constructor(public auth: AuthService) {
}
async ngOnInit() {
this.isAuthenticated = await this.auth.isAuthenticated();
}
}

如果您使用 OktaDev 原理图将 Okta 集成到您的 Angular 应用程序中，请删除src/app/auth-routing.module.ts并src/app/shared/okta。

修改app.module.ts以删除导入AuthRoutingModule，将HomeComponent添加为声明，然后导入HttpClientModule。

将HomeComponent的路由添加到app-routing.module.ts。

import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{
path: 'home',
component: HomeComponent
}
];

创建一个proxy.conf.js文件，以代理对 Spring 启动 API 的某些请求http://localhost:8080。

const PROXY_CONFIG = [
{
context: ['/user', '/api', '/oauth2', '/login'],
target: 'http://localhost:8080',
secure: false,
logLevel: "debug"
}
]
module.exports = PROXY_CONFIG;

将此文件添加为angular.json中的proxyConfig选项。

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "notes:build",
"proxyConfig": "src/proxy.conf.js"
},
...
},

从 Angular 项目中删除 Okta 的 Angular SDK 和 OktaDev Schematics。

npm uninstall @okta/okta-angular @oktadev/schematics

此时，您的 Angular 应用程序将不包含任何特定于 Okta 的身份验证代码。相反，它依赖于您的 Spring Boot 应用程序来提供这一点。

要将 Spring Boot 应用程序配置为包含 Angular，您需要配置 Gradle(或 Maven)以在传入 Spring Boot 应用程序时构建-Pprod，您需要调整路由以识别 SPA，并修改 Spring 安全性以允许访问 HTML、CSS 和 JavaScript。

在我的示例中，我使用了 Gradle 和 Kotlin。

首先，创建一个将所有请求路由到index.html的RouteController.kt。

package com.okta.developer.notes
import org.springframework.stereotype.Controller
import org.springframework.web.bind.annotation.RequestMapping
import javax.servlet.http.HttpServletRequest
@Controller
class RouteController {
@RequestMapping(value = ["/{path:[^\.]*}"])
fun redirect(request: HttpServletRequest): String {
return "forward:/"
}
}

修改SecurityConfiguration.kt以允许匿名访问静态 Web 文件、/userinfo 终结点，并添加其他安全标头。

package com.okta.developer.notes
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter
import org.springframework.security.web.csrf.CookieCsrfTokenRepository
import org.springframework.security.web.header.writers.ReferrerPolicyHeaderWriter
import org.springframework.security.web.util.matcher.RequestMatcher
@EnableWebSecurity
class SecurityConfiguration : WebSecurityConfigurerAdapter() {
override fun configure(http: HttpSecurity) {
//@formatter:off
http
.authorizeRequests()
.antMatchers("/**/*.{js,html,css}").permitAll()
.antMatchers("/", "/user").permitAll()
.anyRequest().authenticated()
.and()
.oauth2Login()
.and()
.oauth2ResourceServer().jwt()
http.requiresChannel()
.requestMatchers(RequestMatcher {
r -> r.getHeader("X-Forwarded-Proto") != null
}).requiresSecure()
http.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
http.headers()
.contentSecurityPolicy("script-src 'self'; report-to /csp-report-endpoint/")
.and()
.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.SAME_ORIGIN)
.and()
.featurePolicy("accelerometer 'none'; camera 'none'; microphone 'none'")
//@formatter:on
}
}

创建可用于确定用户是否已登录的UserController.kt。

package com.okta.developer.notes
import org.springframework.security.core.annotation.AuthenticationPrincipal
import org.springframework.security.oauth2.core.oidc.user.OidcUser
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController
@RestController
class UserController() {
@GetMapping("/user")
fun user(@AuthenticationPrincipal user: OidcUser?): OidcUser? {
return user;
}
}

以前，Angular 处理注销。添加一个LogoutController，该将处理会话过期以及将信息发送回 Angular，以便它可以从 Okta 注销。

package com.okta.developer.notes
import org.springframework.http.ResponseEntity
import org.springframework.security.core.annotation.AuthenticationPrincipal
import org.springframework.security.oauth2.client.registration.ClientRegistration
import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository
import org.springframework.security.oauth2.core.oidc.OidcIdToken
import org.springframework.web.bind.annotation.PostMapping
import org.springframework.web.bind.annotation.RestController
import javax.servlet.http.HttpServletRequest
@RestController
class LogoutController(val clientRegistrationRepository: ClientRegistrationRepository) {
val registration: ClientRegistration = clientRegistrationRepository.findByRegistrationId("okta");
@PostMapping("/api/logout")
fun logout(request: HttpServletRequest,
@AuthenticationPrincipal(expression = "idToken") idToken: OidcIdToken): ResponseEntity<*> {
val logoutUrl = this.registration.providerDetails.configurationMetadata["end_session_endpoint"]
val logoutDetails: MutableMap<String, String> = HashMap()
logoutDetails["logoutUrl"] = logoutUrl.toString()
logoutDetails["idToken"] = idToken.tokenValue
request.session.invalidate()
return ResponseEntity.ok().body<Map<String, String>>(logoutDetails)
}
}

最后，我配置 Gradle 来构建一个包含 Angular 的 JAR。

首先导入NpmTask并在build.gradle.kts中添加 Node Gradle 插件：

import com.moowork.gradle.node.npm.NpmTask
plugins {
...
id("com.github.node-gradle.node") version "2.2.4"
...
}

然后，定义 Angular 应用程序的位置和 Node 插件的配置。

val spa = "${projectDir}/../notes";
node {
version = "12.16.2"
nodeModulesDir = file(spa)
}

添加buildWeb任务：

val buildWeb = tasks.register<NpmTask>("buildNpm") {
dependsOn(tasks.npmInstall)
setNpmCommand("run", "build")
setArgs(listOf("--", "--prod"))
inputs.dir("${spa}/src")
inputs.dir(fileTree("${spa}/node_modules").exclude("${spa}/.cache"))
outputs.dir("${spa}/dist")
}

并修改processResources任务以在传入-Pprod时构建 Angular。

tasks.processResources {
rename("application-${profile}.properties", "application.properties")
if (profile == "prod") {
dependsOn(buildWeb)
from("${spa}/dist/notes") {
into("static")
}
}
}

现在，您应该能够使用./gradlew bootJar -Pprod组合这两个应用程序，或者看到它们使用./gradlew bootRun -Pprod运行。

对于一个简单的解决方案，我在 spring boot 中添加了一个配置文件，将隐式/回调重新路由到角度"index.html"：

import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.PathResourceResolver;
import java.io.IOException;
@Configuration
public class ReroutingConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/implicit/**", "/home")
.addResourceLocations("classpath:/static/")
.resourceChain(true)
.addResolver(new PathResourceResolver() {
@Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource requestedResource = location.createRelative(resourcePath);
return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
: new ClassPathResource("/static/index.html");
}
});
}
}

它有效，但我不确定这是否是一种好的做法。

相关内容

最新更新

热门标签：