How to integrate Keycloak with Angular 10?

Подписаться 1,4 тыс.

Просмотров 37 тыс.

50% 1

Step by step detailed instructions on how to integrate Keycloak 11 with Angular 10. The video walks through
1. Installing NPM dependencies for Angular
2. Configuring Realm and Client in Keycloak
3. Creating Authentication Guard.
4. Loading user profile
5. Implement session check after an interval
Source Code
github.com/carbonrider/angula...
www.npmjs.com/package/keycloa...
www.keycloak.org/
#Keycloak #Angular #Integration

Опубликовано:

17 окт 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@julienelghadghadi2599 6 месяцев назад

Agree, he takes the time to make short explanations on each steps in a well executed way, still working today with keycloak 23.0.4 and angular 18 !

@TechPoint56 3 года назад

I cannot thank you enough. I was struggling with the keycloak and got the perfect explanation to at least get started with the application. Liked subscribed and going to share my fellow colleagues.

@cypriansniegota3078 3 года назад

I think this is the best introduction found on the web. Great narration and excelent simple case to start working with Keycloak.

@abhijit4uguru 2 года назад

Great narration. Simple and to the point.

@MohamedAlabbas 3 года назад

Simple and perfect tutorial, Many thanks :)

@adarshadarshsaxena 3 года назад

Great Explanation, nice and simple used case,thanks

@romanmotovilov129 3 года назад

God bless you! Thanks for the great lesson!

@user-ts5ss6pp9u 8 месяцев назад

Good lesson, very simple clear to understand

@kendalugurlu 3 года назад

Great. Thank you for your time and effort.

@meghnasharma5105 3 года назад

Great tutorial :) Keep it up !

@amrouzamar 9 месяцев назад

Verry helpful tuto, thank you sir for you efforts and time to make this video

@katkarsunit 3 года назад

Good tutorial. Simple and to the point. I liked your tutorial style and have recommended it to my team of junior devs who work on Angular apps for enterprise. Also some topics that would make your video into a series are 1) Authorization Code Flow with PKCE (as now Implicit flow is not recommended) 2) Using other popular npm packages for OAuth2 like angular-oauth2-oidc and for angular - keycloak integration

@CarbonRiderOnline 3 года назад

Sure Sunit. Thanks for your message.

@MrEdusi Год назад

Ótima narração e excelente caso simples para começar a trabalhar com o Keycloak.

@palmadecoofficielle4161 2 года назад

simple and clair thank you 🙏

@suvendujena4014 5 месяцев назад

Hello, Good explanation. Need more operations like how to get user details, refresh token check and other things. Please make one video for a full application.

@akashkaravale2207 Год назад

Very well explained 💯💯👍🏻

@meryemhami6908 3 года назад

the best tutorial eveeeeer .Merciiiiiiiiiiiiiiiiiiiiiii

@cleejav5591 Год назад

great one, thanks dude

@CarbonRiderOnline Год назад

Glad you liked it!

@tatahnoellimnyuy4247 3 года назад

nice and simple thankssss

@n0sr3t3p Год назад

Very good, thank you.

@cleidsondiasdonascimentoms5053 2 года назад

Show!!! is the best video.

@youssefmoussaid1558 3 года назад

Thank you so much 😊

@roiram3286 Год назад

Best explanation ever. Thank you so much brother.

@CarbonRiderOnline Год назад

Glad, I could help. Please let me know, if you are looking for any other technical solution. I will work on it.

@roiram3286 Год назад

@@CarbonRiderOnline Two questions. First, once I login do I need to save a token in the local storage? How do I check if the user is logged in already before loading a page? Second question: what if instead of directing it to the default page I want to redirect it to a different login page? I know I have to change some setting (kc_idp_hint) in the Identity provider but could not figure it out. thanks

@CarbonRiderOnline Год назад

You don't have to save the token in local storage. Keycloak will send it as a cookie. To check if user is already logged in you can invoke method (isLoggedIn) on adapter. For 2nd question, are you looking to change look and feel of the login page? If that is the case, then you can create your own custom theme. OR you can change the login flow and create your own custom extension to manage the login flow.

@vishwasreddy7871 3 года назад

how to add customized header in the keycloak using the library interceptor ?

@joaquindiaz3396 3 года назад

well done, but in isAccessAllowed you are typing that is a Promise, how doesnt fail if you never return the promise on the function?

@radhasingh8331 3 года назад

how to show keycloak feature on some button click?

@valerioannese4441 3 года назад

Hi, is it possibile to adapt this project for Saml protocol rather then OpenId? thanks

@arjunanke7043 3 года назад

Can you please provide a git repository url for this tutorial

@liemtrinh9666 3 года назад

Good tutorial. Hi sir! Can you continue this video to show how to get tokens and then show user information if log in successfully?

@santoshsinghal4595 3 года назад

Multi tab logout is not working.may I know how can I do that?

@user-yk5ng5mi7w Год назад

I used geteusername in the same way but it didn't show the name. can you give me a tip?

@Kunalranjanzolozo 2 года назад

when i am trying to run the application , i am getting error: VM457:6775 crbug/1173575, non-JS module files deprecated.

@Razvanh29 Год назад

What is the timestamp for route guardung?

Год назад

Thank you for this video. Because there is no documentation for angular 12 and below versions. they are not accept angular 12 users. I have to use the angular 12 versions until to upgrading my theme by themeforest developer :D

@Bulletkilla 2 года назад

Hey Yogesh! Thanks a lot, i really needed a viedeo as simple and informative as yours. Alltough I have a question: What if i dont want to use the keycloak login page. Lets say my spa has its own login and register page. Does the library also support these functions? Thanks in advance and greate video!

@CarbonRiderOnline 2 года назад

Hi @NxNc Thats pretty much possible. Keycloak offers a way to customize user as well as admin facing web pages via Themes. You can create your own theme and simply plug that to whitebrand login and register page.

@siminho6929 3 года назад

Nice video! But unforunately i get an error, while starting the angular app: Refused to frame 'localhost:8080/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'". Can someone help me with this?

@DoxTorRent 2 года назад

checkLoginIframe: false,

@gauravverma-xs2sl 3 года назад

sir, how to customize default keycloak login page, register page and make it more attracrive

@CarbonRiderOnline 3 года назад

You can do that easily by copying existing theme. I will soon create video on that.

@sarapoli5786 2 года назад

Thank you for this great tutorial. Is there a way to make the customized login page instead of keycloak login page for our app?

@CarbonRiderOnline 2 года назад

yes, thats very much possible. You can create a custom theme and plug that inside Keycloak.

@sarapoli5786 2 года назад

@@CarbonRiderOnline Do you have any video on that ;) 😁

@narasingkokane 3 года назад

Simple and perfect introduction to keycloak. What if i want to initialize keycloak for multiple client inside single application, I have single tenant and multiple client and want to fetch access token based on application selection. Or is it possible to initialise keycloak twice in one application

@CarbonRiderOnline 3 года назад

You can create multiple keycloak clients and have redirect URL configured for eacho one of them. In Angular, you can dynamically decide the clientId based on the subdomain or application selected by your users.

@dindips 3 года назад

Hi, I don't want to use Keycloak login page instead I want to use angular login page. How can we achieve that?

@CarbonRiderOnline 3 года назад

Sorry, I don't have any idea about that.

@MohitKumar-zq3md 3 года назад

Hi, i've integrated the same way for SSO with two application but logout is not logging out from all web apps. any idea about that?

@CarbonRiderOnline 3 года назад

Hi Random Creators Not sure about SSO logout issue. I haven't implemented that. But I came across a URL which describes an approach to invoke tokens logout url to invalidate session lists.jboss.org/pipermail/keycloak-user/2014-August/000705.html

@MohitKumar-zq3md 3 года назад

@@CarbonRiderOnline Looks like log out not working properly may be due to some config issue at keycloak. By the way thanks! I was trying this example: medium.com/bb-tutorials-and-thoughts/how-to-integrate-keycloak-with-angular-for-sso-authentication-f68cf584555a

@gauravverma-xs2sl 3 года назад

hello sir, awesome video it is necessary to install kecloak as stantalone server , you already installed keycloak angular and keycloak js, why we need to install keycloak as stantalone??

@CarbonRiderOnline 3 года назад

Hi Gaurav, If I don't install keycloak server, how the authentication will happen? The keycloak-angular is adapter library between keycloak server and Angular application.

@Preet_1602 5 месяцев назад

Everything else works for me instead of the logout functionality can you please suggest the logout settings in my keycloak I want to navigate to the login page only but is says Invalid redirect uri « Back to Application please help

@CarbonRiderOnline 5 месяцев назад

Check the redirect uri configuration for the web client.

@Preet_1602 5 месяцев назад

@@CarbonRiderOnline yes i got the error my url was wrongly added in the administration console can you please suggest how to send authorization header with websocket via sockjs

@pankhurigupta8623 2 года назад

Thank you sir for the video. I followed your code, but I am getting a bad request error.

@CarbonRiderOnline 2 года назад

Hi Pankhuri, Can you please describe what error are you getting?

@rkumar.lnct24 3 года назад

I am trying to get the jwt token from key cloak and pass it to my api. Is any specific property I need to configure in init file?

@CarbonRiderOnline 3 года назад

Can you be more specific, what UI framework are you using? do you have Keycloak Adapter in place? Passing tokens in Angular is taken care by the Adapter itself. If you enable bearer interceptor it should pass the required authentication header with every request.

@rkumar.lnct24 3 года назад

@@CarbonRiderOnline I am using angular 11 and keycloak 11 , I will try to put the interceptor and will update you. Thanks for your help.

@CarbonRiderOnline 3 года назад

Support for Angular 11 is not yet available, but you can still give it a try. Also check this documentation www.npmjs.com/package/keycloak-angular#httpclient-interceptor

@saviocardoso6719 3 года назад

add token and header router

@rakeshraki9062 3 года назад

Hii I need to integrate keycloak with python

@rakeshraki9062 3 года назад

Can you please say

@rakeshraki9062 3 года назад

It's emergency

@CarbonRiderOnline 3 года назад

Hi Rakesh, Sorry, I was occupied with my office work. I don't have experience with Python and keycloak integration. But a search on google brings out following library - pypi.org/project/python-keycloak/ The examples seems to be pretty straight forward.

@SayeedImtac Год назад

ERROR in node_modules/keycloak-angular/lib/core/services/keycloak.service.d.ts:40:21 - error TS2694: Namespace '"D:/Project/keycloak-integration/CarbonRider/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. 40 static ɵfac: i0.ɵɵFactoryDeclaration; I am getting this error. Please help.

@Kunalranjanzolozo 2 года назад

Warning: /Users/kunal-mac/Desktop/Angular/angular-examples/keycloak-integration/node_modules/keycloak-angular/__ivy_ngcc__/fesm2015/keycloak-angular.js depends on 'keycloak-js'. CommonJS or AMD dependencies can cause optimization bailouts.

@CarbonRiderOnline 2 года назад

You can ignore the warning.

@Kunalranjanzolozo 2 года назад

@@CarbonRiderOnline but I am unable to run the application

@CarbonRiderOnline 2 года назад

@Kunal, I would suggest having a look at the Keycloak log as well as browser dev tools. That will help you to figure out what is going wrong. Definitely, the dependencies have changed compared to when the video was developed or there might be misconfiguration.