It's my first time trying to integrate KeyCloak. Here is what I've written in my Angular webapp app.module.ts file in order to initialize KeyCloak.js:
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouteReuseStrategy } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import {NgxPaginationModule} from 'ngx-pagination';
import { NgxGoogleAnalyticsModule } from 'ngx-google-analytics';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment.prod';
import { KeycloakService } from 'keycloak-angular';
import { LoginInfo } from '../main';
const initializeKeycloak = (keycloak: KeycloakService) => async () =>
keycloak.init({
config: {
url: (JSON.parse(localStorage.getItem('loginInfo')) as LoginInfo).baseUrl,
realm: (JSON.parse(localStorage.getItem('loginInfo')) as LoginInfo).realm,
clientId: (JSON.parse(localStorage.getItem('loginInfo')) as LoginInfo).client
},
initOptions: {
onLoad: 'check-sso',
silentCheckSsoRedirectUri:
window.location.origin + '/assets/silent-check-sso.html'
},
shouldAddToken: (request) => {
const { method, url } = request;
const isGetRequest = 'GET' === method.toUpperCase();
const acceptablePaths = ['/assets', '/clients/public'];
const isAcceptablePathMatch = acceptablePaths.some((path) => url.includes(path));
return !(isGetRequest && isAcceptablePathMatch);
}
});
@NgModule({
declarations: [AppComponent],
// eslint-disable-next-line max-len
imports: [FormsModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, BrowserAnimationsModule, CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory }), NgxPaginationModule,
NgxGoogleAnalyticsModule.forRoot(environment.ga4MeasurementId)],
providers: [KeycloakService,
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService]
}, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent]
})
export class AppModule {}
this is the referenced /assets/silent-check-sso.html file:
<html>
<body>
<script>
parent.postMessage(location.href, location.origin);
</script>
</body>
</html>
then I have the route-guard.service.ts file:
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router } from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
@Injectable({
providedIn: 'root'
})
export class RouteGuardService extends KeycloakAuthGuard implements CanActivate {
constructor(
protected readonly router: Router,
protected readonly keycloak: KeycloakService) {
super(router, keycloak);
}
public async isAccessAllowed(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
// Force the user to log in if currently unauthenticated.
if (!this.authenticated) {
await this.keycloak.login({
redirectUri: window.location.origin + state.url
});
}
// Get the roles required from the route.
const requiredRoles = route.data.roles;
// Allow the user to proceed if no additional roles are required to access the route.
if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
return true;
}
// Allow the user to proceed if all the required roles are present.
return requiredRoles.every((role) => this.roles.includes(role));
}
}
here is my app-routing.module.ts file:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { RouteGuardService } from './guard/route-guard.service';
const routes: Routes = [
{
path: '',
redirectTo: 'prenotazioni',
pathMatch: 'full',
},
{
path: 'prenotazioni',
loadChildren: () => import('./prenotazioni/prenotazioni.module').then( m => m.PrenotazioniPageModule),
canActivate: [RouteGuardService]
},
{
path: 'agenda',
loadChildren: () => import('./agenda/agenda.module').then( m => m.AgendaPageModule),
canActivate: [RouteGuardService]
},
{
path: 'configuratore',
loadChildren: () => import('./configuratore/configuratore.module').then( m => m.ConfiguratorePageModule),
canActivate: [RouteGuardService]
},
{
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
{
path: 'customer-sat-page',
loadChildren: () => import('./customer-sat-page/customer-sat-page.module').then( m => m.CustomerSatPagePageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
I took almost everything from online tutorials. TBH, I don't understand 100% of it... Anyway, when I try to browse my webapp, it correctly redirects me to KeyCloak. I can login, but after I'm redirected back to my webapp I only get a blank page. The browser console log shows:
Failed to load resource: the server responded with a status of 401 ()
and the failed resource is https://my.keycloack.domain/realms/myRealm/protocol/openid-connect/token
KC log shows only:
2023-03-03 18:39:00,770 WARN [org.keycloak.events] (executor-thread-62) type=CODE_TO_TOKEN_ERROR, realmId=myRealm, clientId=myClient, userId=null, ipAddress=x.y.z.t, error=invalid_client_credentials, grant_type=authorization_code
but I'm sure I entered the correct password.
I've found a few other threads with similar problems (HTTP 401 error), but they all have different solutions that are specific to their configuration. I couldn't find anything that could fit my Angular 15 + KeyCloak 20 setup, nor I could find a way to try those solutions in my case.
Can you please help me understand why KC does not like the token request?
