Merge pull request #15777 from ch4mpy/BAEL-7380

BAEL-7380 : OAuth2 BFF with `spring-addons-starter-oidc`
This commit is contained in:
Maiklins
2024-02-22 17:02:34 +01:00
committed by GitHub
96 changed files with 25925 additions and 0 deletions
@@ -0,0 +1,10 @@
**/*.pem
**/*.crt
**/.env.*
**/target/
**/build/
**/.metadata
**/*.project
**/*.settings
**/*.classpath
**/*.factorypath
@@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
@@ -0,0 +1,42 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
@@ -0,0 +1,110 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-ui": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"baseHref": "/angular-ui/",
"outputPath": "dist/angular-ui",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "angular-ui:build:production"
},
"development": {
"buildTarget": "angular-ui:build:development"
},
"local": {
"buildTarget": "angular-ui:build:development",
"host": "0.0.0.0",
"port": 4201
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "angular-ui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": "23e97199-7e93-4604-8730-91fe13971aa4"
}
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,38 @@
{
"name": "angular-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -c local",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.10",
"@angular/cli": "^17.0.10",
"@angular/compiler-cli": "^17.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.2.2"
}
}
@@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { NavigationComponent } from './navigation.component';
@Component({
selector: 'app-about',
standalone: true,
imports: [NavigationComponent],
template: `<app-navigation
[destination]="['']"
label="HOME"
></app-navigation>
<p>
This application is a show-case for an Angular app consuming a REST API
through an OAuth2 BFF.
</p>`,
styles: ``,
})
export class AboutView {}
@@ -0,0 +1,27 @@
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AuthenticationComponent } from './auth/authentication.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [
CommonModule,
RouterOutlet,
HttpClientModule,
AuthenticationComponent,
],
template: `<div style="display: flex;">
<div style="margin: auto;"></div>
<h1>Angular UI</h1>
<div style="margin: auto;"></div>
<app-authentication style="margin: auto 1em;"></app-authentication>
</div>
<div>
<router-outlet></router-outlet>
</div>`,
styles: [],
})
export class AppComponent {}
@@ -0,0 +1,12 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient()],
};
export const reverseProxyUri = 'http://localhost:7080';
export const baseUri = `${reverseProxyUri}/angular-ui/`;
@@ -0,0 +1,9 @@
import { Routes } from '@angular/router';
import { AboutView } from './about.view';
import { HomeView } from './home.view';
export const routes: Routes = [
{ path: '', component: HomeView },
{ path: 'about', component: AboutView },
{ path: '**', redirectTo: '/' },
];
@@ -0,0 +1,27 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { baseUri, reverseProxyUri } from '../app.config';
import { UserService } from './user.service';
import { LoginComponent } from './login.component';
import { LogoutComponent } from './logout.component';
@Component({
selector: 'app-authentication',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, LoginComponent, LogoutComponent],
template: `<span>
<app-login *ngIf="!isAuthenticated"></app-login>
<app-logout *ngIf="isAuthenticated"></app-logout>
</span>`,
styles: ``,
})
export class AuthenticationComponent {
constructor(private user: UserService) {}
get isAuthenticated(): boolean {
return this.user.current.isAuthenticated;
}
}
@@ -0,0 +1,152 @@
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable, map } from 'rxjs';
import { UserService } from './user.service';
import { baseUri } from '../app.config';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
enum LoginExperience {
IFRAME,
DEFAULT,
}
interface LoginOptionDto {
label: string;
loginUri: string;
isSameAuthority: boolean;
}
function loginOptions(http: HttpClient): Observable<Array<LoginOptionDto>> {
return http
.get('/bff/login-options')
.pipe(map((dto: any) => dto as LoginOptionDto[]));
}
@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
template: `<span>
<select *ngIf="loginExperiences.length > 1" [formControl]="selectedLoginExperience">
<option *ngFor="let le of loginExperiences">
{{ loginExperienceLabel(le) }}
</option>
</select>
<button (click)="login()" [disabled]="!isLoginEnabled">Login</button>
</span>
<div
class="modal-overlay"
*ngIf="isLoginModalDisplayed && !isAuthenticated"
(click)="isLoginModalDisplayed = false"
>
<div class="modal">
<iframe
[src]="iframeSrc"
frameborder="0"
(load)="onIframeLoad($event)"
></iframe>
<button class="close-button" (click)="isLoginModalDisplayed = false">
Discard
</button>
</div>
</div>`,
styles: `.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal {
background-color: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
width: 100%;
max-width: 800px;
}
.modal iframe {
width: 100%;
height: 600px;
border: none;
}`,
})
export class LoginComponent {
isLoginModalDisplayed = false;
iframeSrc?: SafeUrl;
loginExperiences: LoginExperience[] = [];
selectedLoginExperience = new FormControl<LoginExperience | null>(null, [
Validators.required,
]);
private loginUri?: string;
constructor(
http: HttpClient,
private user: UserService,
private router: Router,
private sanitizer: DomSanitizer
) {
loginOptions(http).subscribe((opts) => {
if (opts.length) {
this.loginUri = opts[0].loginUri;
if (opts[0].isSameAuthority) {
this.loginExperiences.push(LoginExperience.IFRAME);
}
this.loginExperiences.push(LoginExperience.DEFAULT);
this.selectedLoginExperience.patchValue(this.loginExperiences[0]);
}
});
}
get isLoginEnabled(): boolean {
return (
this.selectedLoginExperience.valid && !this.user.current.isAuthenticated
);
}
get isAuthenticated(): boolean {
return this.user.current.isAuthenticated;
}
login() {
if (!this.loginUri) {
return;
}
const url = new URL(this.loginUri);
url.searchParams.append(
'post_login_success_uri',
`${baseUri}${this.router.url}`
);
const loginUrl = url.toString();
if (this.selectedLoginExperience.value === LoginExperience.IFRAME) {
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(loginUrl);
this.isLoginModalDisplayed = true;
} else {
window.location.href = loginUrl;
}
}
onIframeLoad(event: any) {
if (!!event.currentTarget.src) {
this.user.refresh();
this.isLoginModalDisplayed = !this.user.current.isAuthenticated;
}
}
loginExperienceLabel(le: LoginExperience) {
return LoginExperience[le].toLowerCase()
}
}
@@ -0,0 +1,39 @@
import { Component } from '@angular/core';
import { UserService } from './user.service';
import { lastValueFrom } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { baseUri } from '../app.config';
@Component({
selector: 'app-logout',
standalone: true,
imports: [],
template: `
<button (click)="logout()">Logout</button>
`,
styles: ``
})
export class LogoutComponent {
constructor(private http: HttpClient, private user: UserService) {}
logout() {
lastValueFrom(
this.http.post('/bff/logout', null, {
headers: {
'X-POST-LOGOUT-SUCCESS-URI': baseUri,
},
observe: 'response',
})
)
.then((resp) => {
const logoutUri = resp.headers.get('Location');
if (!!logoutUri) {
window.location.href = logoutUri;
}
})
.finally(() => {
this.user.refresh();
});
}
}
@@ -0,0 +1,88 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subscription, interval } from 'rxjs';
interface UserinfoDto {
username: string;
email: string;
roles: string[];
exp: number;
}
export class User {
static readonly ANONYMOUS = new User('', '', []);
constructor(
readonly name: string,
readonly email: string,
readonly roles: string[]
) {}
get isAuthenticated(): boolean {
return !!this.name;
}
hasAnyRole(...roles: string[]): boolean {
for (const r of roles) {
if (this.roles.includes(r)) {
return true;
}
}
return false;
}
}
@Injectable({
providedIn: 'root',
})
export class UserService {
private user$ = new BehaviorSubject<User>(User.ANONYMOUS);
private refreshSub?: Subscription;
constructor(private http: HttpClient) {
this.refresh();
}
refresh(): void {
this.refreshSub?.unsubscribe();
this.http.get('/bff/api/me').subscribe({
next: (dto: any) => {
const user = dto as UserinfoDto;
if (
user.username !== this.user$.value.name ||
user.email !== this.user$.value.email ||
(user.roles || []).toString() !== this.user$.value.roles.toString()
) {
this.user$.next(
user.username
? new User(
user.username || '',
user.email || '',
user.roles || []
)
: User.ANONYMOUS
);
}
if (!!user.exp) {
const now = Date.now();
const delay = (1000 * user.exp - now) * 0.8;
if (delay > 2000) {
this.refreshSub = interval(delay).subscribe(() => this.refresh());
}
}
},
error: (error) => {
console.warn(error);
this.user$.next(User.ANONYMOUS);
},
});
}
get valueChanges(): Observable<User> {
return this.user$;
}
get current(): User {
return this.user$.value;
}
}
@@ -0,0 +1,40 @@
import { Component } from '@angular/core';
import { Subscription } from 'rxjs';
import { NavigationComponent } from './navigation.component';
import { User, UserService } from './auth/user.service';
@Component({
selector: 'app-home',
standalone: true,
imports: [NavigationComponent],
template: `<app-navigation
[destination]="['about']"
label="About"
></app-navigation>
<p>{{ message }}</p>`,
styles: [],
})
export class HomeView {
message = '';
private userSubscription?: Subscription;
constructor(user: UserService) {
this.userSubscription = user.valueChanges.subscribe((u) => {
this.message = u.isAuthenticated
? `Hi ${u.name}, you are granted with ${HomeView.rolesStr(u)}.`
: 'You are not authenticated.';
});
}
static rolesStr(user: User) {
if(!user?.roles?.length) {
return '[]'
}
return `["${user.roles.join('", "')}"]`
}
ngOnDestroy() {
this.userSubscription?.unsubscribe();
}
}
@@ -0,0 +1,30 @@
import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-navigation',
standalone: true,
imports: [],
template: `<button (click)="navigate()">{{ label }}</button>`,
styles: ``,
})
export class NavigationComponent {
@Input()
label!: string;
@Input()
destination!: string[];
private userSubscription?: Subscription;
constructor(private router: Router) {}
ngOnDestroy() {
this.userSubscription?.unsubscribe();
}
navigate() {
this.router.navigate(this.destination);
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularUi</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
@@ -0,0 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */
@@ -0,0 +1,14 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}
@@ -0,0 +1,33 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
@@ -0,0 +1,14 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
@@ -0,0 +1,33 @@
HELP.md
target/
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**/target/
!**/src/test/**/target/
### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
build/
!**/src/main/**/build/
!**/src/test/**/build/
### VS Code ###
.vscode/
@@ -0,0 +1,2 @@
distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.5/apache-maven-3.9.5-bin.zip
wrapperUrl=https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<pmd>
<useProjectRuleSet>true</useProjectRuleSet>
<ruleSetFile>D:\workspaces\baeldung\tutorials\spring-security-modules\spring-security-oauth2-bff\backend\bff\.pmdruleset.xml</ruleSetFile>
<includeDerivedFiles>false</includeDerivedFiles>
<violationsAsErrors>true</violationsAsErrors>
<fullBuildEnabled>true</fullBuildEnabled>
</pmd>
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<ruleset xmlns="http://pmd.sourceforge.net/ruleset/2.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
name="M2Eclipse PMD RuleSet"
xsi:schemaLocation="http://pmd.sourceforge.net/ruleset/2.0.0 https://pmd.sourceforge.io/ruleset_2_0_0.xsd">
<description>M2Eclipse PMD RuleSet</description>
<exclude-pattern>.*D:/workspaces/baeldung/tutorials/spring-security-modules/spring-security-oauth2-bff/backend/bff/target.*</exclude-pattern>
<exclude-pattern>.*D:/workspaces/baeldung/tutorials/spring-security-modules/spring-security-oauth2-bff/backend/bff/target/generated-sources.*</exclude-pattern>
</ruleset>
@@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.baeldung.bff</groupId>
<artifactId>backend-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath>..</relativePath>
</parent>
<artifactId>bff</artifactId>
<name>BFF</name>
<description>Backend For Frontend for the OAuth2 BFF article</description>
<properties>
<tutorialsproject.basedir>../../../..</tutorialsproject.basedir>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-gateway</artifactId>
</dependency>
<dependency>
<groupId>com.c4-soft.springaddons</groupId>
<artifactId>spring-addons-starter-oidc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.projectreactor</groupId>
<artifactId>reactor-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.c4-soft.springaddons</groupId>
<artifactId>spring-addons-starter-oidc-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.graalvm.buildtools</groupId>
<artifactId>native-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>

Some files were not shown because too many files have changed in this diff Show More