Angular 17 com keycloak-24.0.4

Getting advice
,
1

Olá, pessoal. Boa noite.

Alguém aqui poderia me ajudar a configurar o Keycloak numa aplicação com o front-end implementado com Angular 17? A questão do Angular 17 é que os componentes são standalone e não tem a necessidade de módulos. Mas todos os exemplos e tutoriais disponível na Internet são para versões mais antigas do Angular, ou seja, sem standalone e sem Ssr. Até comprei um livro na Amazon, mas não ajudou muito. Está desatualizado e é mais do mesmo.

Quero configurar o Keycloak no Angular 17 mantendo todos os benefícios do Angular 17 com standalone e Ssr.

Essa é a minha atual versão do Node.JS e do Angular:
node -v
v20.12.2

Angular CLI: 17.3.6
Node: 20.12.2
Package Manager: npm 10.7.0
OS: win32 x64

Angular: undefined
…

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1703.6 (cli-only)
@angular-devkit/core 17.3.6 (cli-only)
@angular-devkit/schematics 17.3.6 (cli-only)
@schematics/angular 17.3.6 (cli-only)

Eu criei uma aplicação de exemplo, que reflete o meu atual cenário, da seguinte forma:

ng new angular-keycloak-quarkus-app
ng add @angular/material
npm install keycloak-js keycloak-angular angular-oauth2-oidc --save
ng generate component homepage
ng generate component header
ng generate component footer

Eu subi para o Github essa aplicação com a estrutura padrão do Angular 17 e algumas tentativas de configuração do Keycloak. Quem se interessar pode baixar lá e dar uma olhada, trocar ideias, fazer commits, etc. Segue o link do repositório: GitHub - tiagonic/AKQPApp: AKQPApp significa: * A -> Angular; * K -> Keycloak; * Q -> Quarkus; * P -> PostgreSQL; * A -> AKQPApp. .

git clone https://github.com/tiagonic/AKQPApp.git

Dentro do diretório app/keycloak tem as tentativas de configuração que fiz e o realm-export.json que estou usando.

Obrigado! Abraço! o/

2

Por favor, faça a pergunta em inglês, será mais fácil de acompanhar pela comunidade Keycloak. Abaixo alguns links.

I haven’t tried it before, but here is a certified OIDC library [1] for Angular. Regarding the Keycloak configuration, it’s just about creating a public OAuth 2.0 client for the app

[1] angular-oauth2-oidc - npm

1 Like
3

Hi! Yes! I can do this in English! At least I think so.

So… About that link https://www.npmjs.com/package/angular-oauth2-oidc, I alredy saw it. It is using Module and Angular 18 is standalone.

Yesterday I updated my application to new Angular 18. It is very good. But the problema with keycloak keep the same. Besides this, now other problem appeared, the lib keycloak-angular isn’t woks anymore in Angular 18. When I try install it, the follow error is returned.

C:\dev\sistemax\front-end>npm install keycloak-angular
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: app@0.0.0
npm error Found: @angular/common@18.0.0
npm error node_modules/@angular/common
npm error @angular/common@“^18.0.0” from the root project
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@“^17” from keycloak-angular@15.2.1
npm error node_modules/keycloak-angular
npm error keycloak-angular@“*” from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\Tiago\AppData\Local\npm-cache_logs\2024-05-24T16_14_46_059Z-eresolve-report.txt

npm error A complete log of this run can be found in: C:\Users\Tiago\AppData\Local\npm-cache_logs\2024-05-24T16_14_46_059Z-debug-0.log