Keycloak Silent Check SSO

Okay, let's set up the admin dashboard to log student searches. This involves: 1. Creating an `AdminModule` with an `AdminDashboardComponent`. 2. Creating an `AdminService` to fetch the logs from your backend. 3. Defining a model for the log entries (`SearchLogEntry`). 4. Creating an `AdminGuard` to protect the admin route using Keycloak roles. 5. Updating your routing to include the protected admin route. 6. Modifying your existing student search logic to log the search event (including user details from Keycloak) to your backend. You will need to implement the corresponding backend endpoints: * One endpoint to receive and store the log data (e.g., `POST /api/log/search`). * One endpoint to provide the log data to the admin dashboard (e.g., `GET /api/admin/search-logs`). export interface SearchLogEntry { id?: string; // Optional: ID from the database searchedStudentNumber: string; userId: string; userName: string; timestamp: Date; } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { SearchLogEntry } from '../models/search-log-entry.model'; @Injectable({ providedIn: 'root' // Or provide in AdminModule if preferred }) export class AdminService { // IMPORTANT: Replace with your actual backend API endpoint private apiUrl = '/api/admin/search-logs'; constructor(private http: HttpClient) {} getSearchLogs(): Observable { // Implement backend call to fetch logs // Example: return this.http.get(this.apiUrl); // Replace with actual implementation based on your backend // return of([]); // Placeholder } } import { Component, OnInit, inject } from '@angular/core'; import { Observable } from 'rxjs'; import { AdminService } from '../services/admin.service'; import { SearchLogEntry } from '../models/search-log-entry.model'; import { AsyncPipe, DatePipe, JsonPipe } from '@angular/common'; @Component({ selector: 'app-admin-dashboard', templateUrl: './admin-dashboard.component.html', styleUrls: ['./admin-dashboard.component.scss'], standalone: true, imports: [AsyncPipe, DatePipe, JsonPipe] // Import necessary pipes }) export class AdminDashboardComponent implements OnInit { private adminService = inject(AdminService); searchLogs$!: Observable; ngOnInit(): void { this.searchLogs$ = this.adminService.getSearchLogs(); } displayedColumns: string[] = ['timestamp', 'userName', 'userId', 'searchedStudentNumber']; // Adjust as needed }

Admin Dashboard - Student Search Log

Timestamp	User Name	User ID	Searched Student Number
{{ log.timestamp \| date:'yyyy-MM-dd HH:mm:ss' }}	{{ log.userName }}	{{ log.userId }}	{{ log.searchedStudentNumber }}

No search logs found.

Loading search logs...

h2 { color: #333; margin-bottom: 20px; text-align: center; } .log-container { margin: 20px; padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } table { width: 100%; border-collapse: collapse; margin-top: 15px; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } th { background-color: #e9e9e9; font-weight: bold; } tbody tr:nth-child(even) { background-color: #f2f2f2; } tbody tr:hover { background-color: #e0e0e0; } p { text-align: center; color: #555; font-style: italic; } import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router'; import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class AdminGuard extends KeycloakAuthGuard implements CanActivate { constructor( protected override readonly router: Router, protected readonly keycloak: KeycloakService ) { super(router, keycloak); } public async isAccessAllowed( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { // Force the user to log in if not already authenticated. if (!this.authenticated) { await this.keycloak.login({ redirectUri: window.location.origin + state.url, }); return false; // Return false after initiating login } // Get the roles required from the route data. const requiredRoles = route.data['roles'] || ['admin']; // Default to 'admin' role if not specified // Allow the user to proceed if no additional roles are required. if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) { return true; } // Allow the user to proceed if all required roles are present. const hasRequiredRoles = requiredRoles.every((role) => this.roles.includes(role)); if (!hasRequiredRoles) { console.warn(`User does not have required roles: ${requiredRoles.join(', ')}. Access denied.`); // Optional: Redirect to an 'access-denied' page or home page // this.router.navigate(['/access-denied']); return false; } return true; } } // Assuming you are using standalone APIs and functional routing // If using app-routing.module.ts, adapt accordingly. import { Routes } from '@angular/router'; import { AdminGuard } from './core/guards/admin.guard'; import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component'; // Import your other components and routes // import { StudentSearchComponent } from './student/student-search/student-search.component'; // import { HomeComponent } from './home/home.component'; export const routes: Routes = [ // Example existing routes: // { path: '', component: HomeComponent }, // { path: 'search', component: StudentSearchComponent }, // Assuming this exists // Add the admin route { path: 'admin', component: AdminDashboardComponent, // Use the standalone component directly canActivate: [AdminGuard], data: { roles: ['admin'] } // Specify the required Keycloak role(s) }, // Add other routes here // { path: '**', redirectTo: '' } // Wildcard route ]; // Assuming you are using standalone APIs and app.config.ts // If using app.module.ts, adapt imports/providers there. import { ApplicationConfig, importProvidersFrom, APP_INITIALIZER } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; // Ensure HttpClient is provided import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular'; import { routes } from './app.routes'; // Keycloak initializer function function initializeKeycloak(keycloak: KeycloakService) { return () => keycloak.init({ config: { url: 'YOUR_KEYCLOAK_URL', // Replace with your Keycloak URL realm: 'YOUR_REALM', // Replace with your realm clientId: 'YOUR_CLIENT_ID' // Replace with your client ID }, initOptions: { onLoad: 'check-sso', // or 'login-required' silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html' }, // Enable Bearer interceptor enableBearerInterceptor: true, // Prefix for Bearer token bearerPrefix: 'Bearer', // URLs excluded from Bearer token addition (e.g., public assets) // bearerExcludedUrls: ['/assets'] }); } export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient(withInterceptorsFromDi()), // Provide HttpClient importProvidersFrom(KeycloakAngularModule), // Import Keycloak module providers { provide: APP_INITIALIZER, useFactory: initializeKeycloak, multi: true, deps: [KeycloakService] }, KeycloakService // Provide KeycloakService itself // Add other providers here ] }; // IMPORTANT: Modify your existing StudentService (or create a LoggingService) import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { KeycloakService } from 'keycloak-angular'; import { Observable, tap, switchMap, from, catchError, throwError, of } from 'rxjs'; import { SearchLogEntry } from '../../admin/models/search-log-entry.model'; // Import the model @Injectable({ providedIn: 'root' }) export class StudentService { // IMPORTANT: Replace with your actual backend API endpoints private studentApiUrl = '/api/students'; // Example endpoint for student search private logApiUrl = '/api/log/search'; // Example endpoint for logging constructor( private http: HttpClient, private keycloakService: KeycloakService // Inject KeycloakService ) {} // Example: Existing function to search for a student searchStudent(studentNumber: string): Observable { // Replace 'any' with your Student model return this.logSearchEvent(studentNumber).pipe( switchMap(() => { // Proceed with the actual student search API call return this.http.get(`${this.studentApiUrl}/${studentNumber}`); }), catchError(error => { console.error('Error searching student:', error); // Handle student search error appropriately return throwError(() => error); }) ); } // New function to log the search event private logSearchEvent(studentNumber: string): Observable { return from(this.keycloakService.loadUserProfile()).pipe( switchMap(profile => { const logEntry: Omit = { // Exclude fields generated by backend searchedStudentNumber: studentNumber, userId: profile.id ?? 'unknown', // Use Keycloak user ID userName: profile.username ?? 'unknown' // Use Keycloak username or preferred name attribute // timestamp will be set by the backend }; // Send the log entry to your backend logging endpoint return this.http.post(this.logApiUrl, logEntry).pipe( catchError(error => { console.error('Failed to log search event:', error); // Decide if logging failure should prevent the search // For now, we'll just log the error and continue (return of(null)) return of(null); // Allow the main operation (student search) to continue }) ); }), catchError(error => { console.error('Failed to get user profile for logging:', error); // Handle error fetching user profile (e.g., log anonymously or skip logging) // For now, we'll just log the error and continue return of(null); // Allow the main operation (student search) to continue }) ); } // Add other student-related methods here } // IMPORTANT: Modify your existing StudentSearchComponent import { Component, inject } from '@angular/core'; import { StudentService } from '../services/student.service'; // Adjust path if needed import { FormsModule } from '@angular/forms'; // Import FormsModule if using ngModel import { CommonModule } from '@angular/common'; // Import CommonModule for async pipe, ngIf etc. @Component({ selector: 'app-student-search', templateUrl: './student-search.component.html', styleUrls: ['./student-search.component.scss'], standalone: true, // Assuming standalone imports: [FormsModule, CommonModule] // Add necessary imports }) export class StudentSearchComponent { private studentService = inject(StudentService); studentNumber: string = ''; studentData: any = null; // Replace 'any' with your Student model type isLoading: boolean = false; errorMessage: string | null = null; search(): void { if (!this.studentNumber.trim()) { this.errorMessage = 'Please enter a student number.'; return; } this.isLoading = true; this.errorMessage = null; this.studentData = null; this.studentService.searchStudent(this.studentNumber).subscribe({ next: (data) => { this.studentData = data; this.isLoading = false; console.log('Student data received:', data); // The logging is now handled within studentService.searchStudent }, error: (err) => { console.error('Search failed:', err); this.errorMessage = 'Failed to fetch student data. Please try again.'; this.isLoading = false; } }); } }

Search Student

Student Information

{{ studentData | json }}

/* Example styles for StudentSearchComponent */ .search-form { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; } input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #0056b3; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .error-message { color: #dc3545; margin-top: 10px; padding: 10px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; } .loading-indicator { margin-top: 10px; font-style: italic; color: #555; } .student-info { margin-top: 20px; padding: 15px; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 4px; } .student-info h3 { margin-top: 0; margin-bottom: 10px; color: #333; } pre { background-color: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; /* Handle long lines */ } Keycloak Silent Check SSO **Explanation:** 1. **`SearchLogEntry` Model:** Defines the structure of the log data. 2. **`AdminService`:** Responsible for fetching the search logs from your backend API (`/api/admin/search-logs`). You need to implement this backend endpoint. 3. **`AdminDashboardComponent`:** Displays the logs fetched by `AdminService`. It uses the `async` pipe to handle the observable and `date` pipe for formatting timestamps. It's created as a standalone component. 4. **`AdminGuard`:** Extends `KeycloakAuthGuard`. It checks if the user is authenticated and has the required role (e.g., 'admin', specified in the route data) before allowing access to the admin route. 5. **`app.routes.ts` (or `app-routing.module.ts`):** Defines the `/admin` route, associates it with `AdminDashboardComponent`, and protects it using `AdminGuard`. 6. **`app.config.ts` (or `app.module.ts`):** Ensures `HttpClient` and Keycloak services are properly configured and provided. The `APP_INITIALIZER` sets up Keycloak on application startup. **Remember to replace placeholder Keycloak configuration values.** 7. **`StudentService` Modification:** * Injects `KeycloakService`. * Adds a `logSearchEvent` private method. This method gets the user profile from Keycloak and sends a POST request with the log details (`searchedStudentNumber`, `userId`, `userName`) to your backend logging endpoint (`/api/log/search`). You need to implement this backend endpoint. * The `searchStudent` method is modified to call `logSearchEvent` *before* making the actual student search call using `switchMap`. Error handling is added for both logging and searching. Logging failures currently don't block the student search but log an error. 8. **`StudentSearchComponent` Modification:** The component now calls the updated `studentService.searchStudent` method. The logging logic is encapsulated within the service. 9. **`silent-check-sso.html`:** Added to `public/assets` as required by Keycloak for the `check-sso` or `login-required` `onLoad` option. Remember to create the necessary backend endpoints to store and retrieve the log data. Also, ensure your Keycloak client configuration and user roles are set up correctly.