Frontend mit Keycloak absichern

quarkus.datasource.db-kind = postgresql
quarkus.datasource.username = app
quarkus.datasource.password = app
quarkus.datasource.jdbc.url = jdbc:postgresql://localhost:5432/db

quarkus.hibernate-orm.database.generation=drop-and-create
quarkus.hibernate-orm.physical-naming-strategy=org.hibernate.boot.model.naming.CamelCaseToUnderscoresNamingStrategy

quarkus.oidc.auth-server-url=http://localhost:8000/realms/angular-policy-tutorial
quarkus.oidc.client-id=backend

quarkus.oidc.credentials.secret=<CLIENT_SECRET>

quarkus.keycloak.policy-enforcer.enable=true

quarkus.devservices.enabled=false

#### KOMMT NEU DAZU ####
quarkus.http.cors.enabled=true (1)
quarkus.http.cors.origins=/.*/ (2)

ng new ng-keycloak-policy-demo

ng serve

npm install keycloak-angular keycloak-js

import { ApplicationConfig, APP_INITIALIZER, inject } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';
import { KeycloakService } from 'keycloak-angular';
import { routes } from './app.routes';

const keycloakInterceptor: HttpInterceptorFn = (req, next) => {
  const keycloak = inject(KeycloakService); (1)
  const instance = keycloak.getKeycloakInstance(); (2)

  if (instance?.token) {
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${instance.token}` (3)
      }
    });
  }
  return next(req);
};

function initializeKeycloak() { (4)
  const keycloak = inject(KeycloakService);
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8000', (5)
        realm: 'angular-policy-tutorial', (6)
        clientId: 'angular-policy' (7)
      },
      initOptions: {
        onLoad: 'login-required', (8)
        checkLoginIframe: false (9)
      }
    });
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([keycloakInterceptor]) (10)
    ),
    {
      provide: APP_INITIALIZER, (11)
      useFactory: initializeKeycloak,
      multi: true
    },
    KeycloakService (12)
  ]
};

export interface Vehicle{
    id: number;
    make: string;
    model: string;
    year: number;
}

ng generate service vehicle

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Vehicle } from '../model/vehicle';

@Injectable({
  providedIn: 'root'
})
export class VehicleService {
  private http = inject(HttpClient);
  private backendUrl = 'http://localhost:8080/vehicle';

  getAllVehicles() {
    return this.http.get<Vehicle[]>(`${this.backendUrl}/`);
  }

  getVehicle(id: number) {
    return this.http.get<Vehicle>(`${this.backendUrl}/${id}`);
  }
}

import { Component, inject, OnInit } from '@angular/core';
import { VehicleService } from '../shared/services/vehicle.service';
import { Vehicle } from '../shared/model/vehicle';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-root',
  imports: [FormsModule, CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit{
  title = 'ng-keycloak-policy-demo';

  keycloakService = inject(KeycloakService);
  vehicleService = inject(VehicleService);

  allVehicles: Vehicle[] = [];
  vehicleById: Vehicle | null = null;
  vehicleId: number | null = null;

  isAdmin: boolean = false;
  isUser: boolean = false;

  ngOnInit(){ (1)
    this.isAdmin = this.keycloakService.getUserRoles().includes('admin');
    this.isUser = this.keycloakService.getUserRoles().includes('user');
  }

  getAllVehicles(){
    this.vehicleService.getAllVehicles().subscribe((vehicles) => { (2)
      this.allVehicles = vehicles;
    })
  }

  getVehicleById(){
    if(this.vehicleId){
      this.vehicleService.getVehicle(this.vehicleId).subscribe((vehicle) => { (3)
        this.vehicleById = vehicle;
      })
    }
    else{
      console.log('The vehicle-id is not set!');
    }
  }
}

<div class="container">
  <h1>{{title}}</h1>

  <div class="button-group">

    <div class="all-vehicles">
      <button
        [disabled]="!isAdmin" (1)
        (click)="getAllVehicles()"
        class="btn btn-primary">
        Get all vehicles
      </button>

      <div class="vehicle-list">
        @for (vehicle of allVehicles; track vehicle) {
          <p>{{ vehicle.id }} {{ vehicle.make }} {{ vehicle.model }} {{ vehicle.year }}</p>
        }
      </div>
    </div>

    <div class="by-id">
      @if (isUser) {
        <select [(ngModel)]="vehicleId" class="id-input">
          <option [ngValue]="1">1</option>
          <option [ngValue]="2">2</option>
          <option [ngValue]="3">3</option>
        </select>
      }
      <button
        (click)="getVehicleById()"
        [disabled]="!vehicleId || !isUser" (2)
        class="btn btn-secondary">
        Get vehicle by id
      </button>

      <div class="vehicle-single">
        @if (vehicleById) {
          <p>{{ vehicleById.id }} {{ vehicleById.make }} {{ vehicleById.model }} {{ vehicleById.year }}</p>
        }
      </div>
    </div>

  </div>
</div>

<router-outlet></router-outlet>

.container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.container h1 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
}

.button-group {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.all-vehicles {
    flex: 1;
    min-width: 280px;
}

.by-id {
    flex: 1;
    min-width: 280px;
}

.btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-bottom: 1rem;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:disabled {
    background-color: #b3d4fc;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:disabled {
    background-color: #d6d6d6;
    cursor: not-allowed;
}

.id-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.vehicle-list p, .vehicle-single p {
    background-color: #ffffff;
    padding: 0.5rem 1rem;
    border-left: 4px solid #007bff;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    color: #444;
}