search

czetsuya / keycloak-angular-auth

This is a project template that integrates Keycloak authentication server to an Angular5 project. It provides an authentication guard service that can restrict a component from being accessible if a user is not logged in.
20 stars 18 forks source link

Enable pkce in angular app #10

Closed manhar-developer closed 3 years ago

manhar-developer commented 3 years ago

After modifying keycloak.json with "enable-pkce": true, still not able to use this. Please suggest

czetsuya commented 3 years ago

After modifying keycloak.json with "enable-pkce": true, still not able to use this. Please suggest

Hi. What exactly are you doing? What's your setup and what have you done so far? What errors do you see in the log?

Regarding enable-pkce, it's properly documented here https://www.keycloak.org/docs/latest/securing_apps.

manhar-developer commented 3 years ago

Hi @czetsuya When token is being generated (refer attached snapshot) I want to use the the form data parameters like code, grannt_type= authorization_code, client_id, redirect_uri . Out of this parameters waht to use code which is being genarated by keycloak js library and send pkec generated string along with these paraemeters.

Modified keycloak json -

{ "realm": "test", "auth-server-url": "http://192.168.252.62:8180/auth/", "ssl-required": "none", "resource": "spa-heroes", "public-client": true, "enable-pkce": true, "confidential-port": 0 }

image

Expetcted result : Need to send code verifier string. image

PS - I followed your tutorial and created app using https://www.youtube.com/watch?v=JUhknUDsZQg . Please suggest if this can be done as I am just using keycloak js dependency and no other third party library as you did in the tutorial

czetsuya commented 3 years ago

Hi,

In the client's advance settings, set S256 under Proof key for code.

image

Set Access type=public and enable Standard flow enabled.

In your frontend application make sure that keycloak.json contains: "enable-pkce": true.