ASP.NET Core 3 - IdentityServer4 - Ep.21.4 Angular Client

welcome everyone today I'm gonna show you how to connect your angular application to your at any server because a couple of people were asking me and to be honest I don't really know what's so hard about googling the Open ID Connect client so in this video I'm gonna be following documentation since I don't work with angular I don't think it's good locking you into this angular ecosystem and I generally just don't like it so nevertheless let's go ahead and get started so just to kind of introduce the changes to the angular to the project I have an angular project here we're inside I just have a folder so this is not an executable or anything it's just so it shows up in my solution Explorer and the angular app is in the middle here so another thing I have is I have my Windows terminal running we're in the top right I have the identity server running top left our bottom left is my API one right oh I have dotnet what's wrong watching the ID any server and the API one so in case I need to change anything this is gonna get automatically your build on the left in the main screen here this is where I basically went go ahead and create me a new angular app right so this is where I basically kicked off the creation it took a couple of years to finish but yeah we're here nevertheless so we want to connect our angular application to our write any server as always the first steps are find yourself yourself an O ID C client so this is again we're gonna follow the same steps you have that your tech stack o ADC client okay same as I did for xamarin for flutter and for WPF so angular already seen client and here we have it so it's angular off I DC clients same package share book pretty much all I want to do is get to some documentation or example that I can look so Damien bowed you will see him a couple of times when working with these identity server solutions and stuff like that him and they had any server creators that they participate in the open source community of all this or open IT connect stuff so what yeah here you can see that this is open ID certified so you can trust this library all right so let's follow through the commands installation instructions and p.m. installed on angular IDC client I'm gonna go into here yeah I'm just gonna install so here I have angular just gonna install that so you can see that it has installed so if I go into package that Jason you every time I change a package for some reason the whole visuals to you just freezes so anything any action I do on the angular project some reason Visual Studio just starts choking so yeah here I'm looking for the dependency that I have added and it looks like it's not there so yeah I actually got in there and that's because there is no angular project so actually what I want to do is CD into the angular app and retry the command okay okay so seems like that is now finished a bunch of warnings and here we have the dependency angular auth IDC client right so now I'm happy that it's in my project let's go ahead and start setting this up okay so if I go to the C or C app again I'm not explaining anything about angular I don't know anything I know a couple of things but nothing are worth we're gonna go to the app component HTML delete everything and make a div where I can have a button and this is gonna be my login button and I also have a call API button then I want the app component TS your visual studio stops breathing yeah the title I no longer need the title here I'll probably have a constructor but primarily what I'm after is some kind of login function and call API function and these are the events that will have to go on these buttons so click I'll have to log in here or the very same thing but all API a-and maybe I'll have to put like early bracket there I'm not sure yeah and I wanted to do something with this so let's go ahead and see how do we hook up this library that we've just installed so going back to their documentation have the QuickStart section import the module services into your modules so let's see this is the main configuration so this is everything that I was planing before and I'm not gonna go over this and he's gonna copy this I'm gonna go into my app module so I guess this the app module is like the root node and we want stuff in our root node silent renewals I explained how that works so you should be able to figure that out if you watched my other videos a response type code so yeah we will kind of put this a little bit at the top open ID and so profile an email we disable those claims so what we actually want has open ID and if I open up the configuration file for my identity server where I configure stuff the Scopes that I allow is API one and two so I'm running API one so I want to be able to access API one so I'm gonna request access to API one or client ID and Laura I'm just gonna rename this to angular or their redirect URL and post redirect URL those can stay as they are Visual Studio key not sure what that's about yes and the STS server so my identity server is running on a local host 5,000 so I'm not gonna be using HTTP I can use HTTP but that will require making certificate setting them up etc I don't want to do that we're just gonna go with HTTP so response type code we are gonna use code with bkc redirect your eyes stay the same angular the ideal up here okay and then we need the log level and the ODC configuration server so we go back to the documentation and we just grab the same imports that that are shown in the documentation and then this should compile so this stuff will also have to set it up at the same for our identity server configuration here which we will do in a second but nevertheless let's go ahead and sort this part out because this is where you need to do your ends injection for this module set stuff up I'm not sure why they've done it this way I mean the angular I'm gonna stop hitting on angular at some for now you'll have to bear that I don't actually want to work with this technology yeah of module we put it in there providers again I'm not sure exactly what all of these are doing and guess registering dependencies so this looks alright we're missing the app initializer where is the app initializer coming from from angular car let's copy it where the ng module is hey so now this compiles okay so we've set we've set the OID C client up and essentially this is what they've done in the QuickStart here next steps are basically surfacing the DC service in your component to be able to log in and stuff like that so let's actually grab the login and G in it and constructor here and what we're gonna do is we're gonna go into the app component we're gonna replace the login here and in order to have this stuff we'll have to import the correct native well types from the correct package so let's go ahead and grab that it's worth probably worth removing the stuff that I'm not using so public configuration remove Ulva so use the IADC security service and the lambda that is here after it's subscribe let's push this down a little bit so we check the authentication and then everything is using this observable pattern so yeah you have to subscribe it's not it's not as simple as promising okay yeah it's authenticated this is gonna return a boolean and it's gonna be either a true or false so again and next thing is the login so this is how we're gonna login so it seems that we are going to have on our app component we'll be able to press the login button this is gonna go to this login function and should just work hey so before we actually do this let's go ahead and configure this client and for our identity server so what I'm gonna do is I'm gonna look for where I had client ID j/s so where I had my JavaScript client I'm gonna copy this part and I'm gonna add a copy of this here I'm gonna change the client ID to angular so this it lines up with this client ID the application itself is going to be running on let's it's gonna be an M I run serve so and not run served sorry that's for view this is gonna be npm run start so at the moment i just want to see where the application is gonna get hosted so i can copy the URL and put it in the slot for except it will basically redirect your eyes and post logout redirects etc okay so at this point the application has started up and i can see that it's listening on localhost 4200 let's go ahead copy the URL and what we're going to do is we're gonna go back to our project after visual studio wakes up seems like angular is harassing Visual Studio for support that the dotnet core teams provides like maintaining a template and stuff like that doesn't seem to integrate with visual studios so well I don't know it's maybe it maybe it's something to do with like 200 megabytes of dependencies that the node module brings in nevermind yeah we're using pkc the code flow so the code flow relates to this response type that we're setting here redirect your eyes let's go ahead and change this to be HTTP so we're basically allowing to redirect to the root or the log in and the log out that's because what we sat set here okay and then for the course origin we're gonna set this as well okay so because the origin is gonna be different because of the port so we we have to register it here but then API 1 we enable that API two and our C scope we don't really need that access a hooking lifetime we don't need that and just use the default one a lot of access tokens via browser to true because our Spy is gonna be running in the browser so we need that to set to true require consent as follow this is on the ADA and the server side we don't need that okay we're requesting the scopes that we have registered log level doesn't relate to this is just probably logging level for the library itself you're gonna be changing to production don't get to change the log level everything else seems fine let's go ahead and again right yeah so I'm gonna save this you can see is the change that are gonna get recompiled here now what I'm gonna do is I'm gonna grab the URL I'm gonna go to browser and go into localhost and let's go ahead press f12 and see what's going on in the console zoom in a little bit this one can you zoom in in the count okay so let's login and here we go right so your standard redirect stuff you get redirected to your identity server mine's running at Port 5,000 so here you will see being redirected you can see what client it is etc so username that we have registered is Bob and password so if you're new to the repository and you haven't seen all my other tutorials I highly recommend you do to understand this whole although IDC thing but we see our user in the program CS file here so that is where this Bob password comes from right I'm gonna sign in and here you get a bunch of logging about the token that you have again since I don't use angular and don't know about their storage mechanisms you could probably just save it in your local storage or maybe you can somehow configure it with the library I don't know write you as the angular professional we'll have to decide that for yourself if you do no good mechanism leave a comment other people know hey write a blog post write to me on this court maybe I can I'm not gonna make another don't write to me about a killer right hmm so we have apparently we have our access token right so let's go back to the documentation we're gonna scroll down a little bit and using the access token right let's go ahead so we just all the get token right and then we have to set it as pi the part of the header so they basically tell you what to do with it as well again I'm not gonna be abstracting my service HTTP service into an additional service implementing all the refresh token stuff I mean that's a played-out to do that yourself if you watched my previous tutorials then you should know and you should logically understand what to implement okay let's get the token let's get the adders right since I don't know anything about angular I will have to google angular HTTP client all right so Gaming with a back-end server just want to see what I need to do so I need to import some module yeah yeah yeah now I go into the module I grab my HTTP client where'd I put it have to put it in the imports imports yeah so I imported pull and now I can use it yeah yeah okay so let's grab the namespace again to the component we go grab the HTTP client I'll have the HTTP header so and did they grab it from a different namespace nope they still grab it from the same namespace go ahead and put this here the HTTP client do I have to okay so you do have to inject it let's go ahead and some new line , public HTTP and heard from HTTP client and now to use the token yes I just need to do the biscuits or whatever so okay so something like this this configure service get config because this is the configure service so the documentation basically tells you how to make an HTTP server like basically how to hide your HTTP calls behind an interface kind of thing or not an interface in this case behind service so I want this HTTP and a Ponte called yet and I this I'll put this here and configure I'll worm what I'm actually where I'm actually gonna be calling is I'm gonna be calling into API one controller a secret controller and I want to all at slash secret so my API is running on HTTP localhost 5002 so this is where I want to go so if I go to app components modules the URL that I'm gonna pass is my API one URL and I'm actually going to go to a secret route which is where my secret which is where I specify this route that is authorized so once we try to hit this route it's gonna try to extract the token from the HTTP header from the authorization header and then it's gonna validate with the ID any server and we can you can actually see this happen in the logs as well oh but nevertheless let's go ahead and the configuration is set up so I'm gonna leave that up module seems set up I'm gonna leave that as the page is set up and leave that as well and next thing we want the HTTP options so let's put this here and then to get the results again observable pattern you have to subscribe so let's subscribe and I guess say data any Oh any type and here I just want to and so on so log my API result has just console log our data we can put a hole on here good work let's see if it works let's go to the terminal make sure everything is here so last time angular has compiled successfully let's go ahead and back to the browser to the angular app let's go ahead and refresh make sure okay so is authenticated is false so there is a problem with persisting the tokens or the cache is being refreshed so there is probably something that you will need to do to handle saving the tokens but again I'm leaving this up to you as the angular expert I don't want to touch on Euler let's go ahead login and here you will see the single sign-on working so we previously already signed in and alright any server we don't need to do this again so this is why we haven't seen the login screen again and here in the console we can see our ID tokens access tokens etc use them as you need them I explained everything about claims in the previous claims from your ID token access token what they are in the previous steps go watch that if you were confused about what this is right so we got that let's go ahead and call the API and we get an error let's go ahead and see what this is so it looks like some syntax parsing we do get the secret message so we did authorize which is nice we didn't we could have managed to parse it and that is something I looked up before this obviously and it's basically we automatically expect to receive Jason okay and this happens to live on the your HTTP header so if we look at it we can see that the options that we provide the response type is Jason so yeah let's go ahead and grab these options and just move them into here and we're gonna say that the response type can also be txt a yes why not yeah can't really put it on that constant object because I don't know why I tried that before and didn't work it when I explained if the typescript gods want to bless me with the knowledge over it I'm not that interested I want to keep my Dana dynamicism and nevertheless is Ascenta cated true let's go ahead call the API and API results secret message from API one okay again I haven't explained any other flows or how do you have the actual obtaining of the access tokens happens here I do it all on my previous video so go watch it go away go away go ahead and watch that this is just about being able to set up your technology stack to work with your identity server right and there are a lot of libraries all the libraries for idoi DC clients have been built if you're gonna be switching to flutter xamarin vue.js react I don't know svelte whatever there is gonna be a library available there most likely that is going to allow you to perform an oid ciothes inflow so again I'll just reiterate what you want to look for is your technology stack o ADC client okay and that's basically how you connect to your and any server or any other identity provider okay but nevertheless this is it for this episode hopefully you've enjoyed it leave a like subscribe if you did I stream on Sundays and Wednesday so if you want to join don't forget to during the discord channel I do all the updates for the streams there and as always hopefully I'll see you in my lips

Channel: Raw Coding

Views: 21,964

Keywords: .net core 3, .net core 3 tutorial, asp.net core 3, asp.net core 3 tutorial, oauth, oidc, authentication, authorization, authentication tutorial, authorization tutorial, is4, identityserver4, idneityserver4 tutorial, asp.net core 3 identityserver4, android, explained, tutorial, angular

Id: Usp0QAnbiWY

Length: 21min 35sec (1295 seconds)

Published: Thu May 28 2020