Adding Identity to Existing Blazor Server Apps: Carl Franklin's Blazor Train Ep 55

hi i'm carl franklin in episode 26 i showed you how to create a new blazer server application with basic identity features for authentication and authorization in this episode i'll show you how to add identity to an existing blazer server app next week i'll show you how to add identity services to a blazer web assembly application which is a bit different adding identity it's what's for dinner um oh yeah right now right here on blaze a train okay so just to reiterate this is a blazer server application we're going to add identity to it and next week on the show we'll add identity to an existing blazer webassembly application so the application is called add identity and i'm going to start just by clicking on the project here because we're going to be doing some scaffolding and scaffolding is a feature built into visual studio that is sort of like code generation it's exactly like it is code generation so it's going to create all of the stuff that we need well almost all the stuff but here's where we get started we right click on the project name and select add new scaffolded item see that so now we have this dialog here and i'm going to select identity from the left and identity is the only item you can choose now when i click add you're going to get an error message so let's take a look at this there was an error running the selected code generator install the package microsoft visualstudio.web.cogeneration.design and try again but notice that it added the package the thing is is that it didn't recompile and so all you really have to do is say okay and click add again and now we have this nice dialog box which allows us to pick the features we want so we're going to check off log in log out and register because that's basically the required features for off for identity but look there's all sorts of other features i'm not going to go into all of these some of them require other services like email confirmation reset password which does use email needs an email service so and there's good documentation about all of these but we're just going to stick with login logout and register but we get this same game again about installed packages that it needs so let's first start with this required item here the data context class we're going to just allow it to pick a name for us because it does need to create a data context a db context so it can use entity framework to access the identity database so we're just going to go with the default name and click add and again we play this game of you need to recompile and in the meantime we're going to give you an error message all right so one more time there we go so you might think oh that's it all right well no not really let's take a look at uh the data context itself which is over in areas identity data add identity context right there's nothing there really so we have to generate a database and the database itself is defined in app settings json the add identity context connection which is using sql local db and the database is add identity so if i go over to my sql object explorer and look at my databases it's not there yet so we have to generate all the stuff and the database around that and as a guide i'm using the microsoft documentation scaffold identity in asp.net core projects and if you scroll down to scaffold identity into a blazer server project without existing authorization this is where we're starting and it's telling you to do exactly this stuff now i will say one thing about this documentation it's not really complete i had to use a combination of this document and this document to figure out how to do exactly what this document is telling me to do so the next step is the migrations it's asking me to install the package microsoft asp.net core diagnostics entity framework core which is already installed there it is right there so i don't need that next we're going to add a migration and we can name it whatever we want but i'm gonna use their suggestion and name it create identity schema and for that we go down to the package manager console type that in right there add dash migration space create identity schema and now we get a migrations folder over here and in there we've got our schema that we can now apply to create a database and how i do that is i type in the package manager update dash database just like that says done now we can go over to databases and refresh and there's add identity the next thing the documentation talks about is this anti-forgery token anti-forgery should be a clear goal we don't want people accessing our application who aren't allowed to and one of the ways that hackers can get around security is cross site scripting and so what we're going to do is when the application runs we're going to create a token think of it like a guide but a token a long security string and we're going to pass that to the client and the client then will pass it back on every request so we can check that request and we can go one step further if we need to make an api call we can pass that as our token that's our security token so the api can authenticate us with that token so i'm going to go ahead and do this but first we need to add a class and i'm going to add it over here in areas identity to represent that token it's going to be called token provider there it is so in the documentation they call this access token and sometimes they call it xsrf token i'm just going with xsrf doesn't really matter so next we have to open the underscore host cshtml page and this is where we're going to generate the token and pass it into the application so we're going to inject this anti-forgery object here xsrf and then in this little code block we're going to create a new token provider and set the xsrf token property to a new token we're going to request a token and store it using this code right here now how do we get that into our application well we're actually going to modify our app app.razer to have a parameter for this token and while this doesn't define the parameter it passes it so the parameter's name will be initial state and we're going to pass this tokens object that i just created up here so let's modify appraiser to have that parameter and just in general to support off all right so it's going to complain about token provider so therefore let's go to our imports raiser and add the namespace there add identity areas identity that's where our token provider is over here save that back to appraiser let me just save everything while we're at it so let's go over this i've injected the token provider the cascading authentication state wraps the router and everything else therefore and also i've changed the route view to an authorized route view now here's my token provider parameter initial state and when this guy loads up we're going to set our token provider xsrf token right the token provider that was injected in to the initial state xsrf token which was passed right here what's cool about this is that i can access that token provider anywhere where i want to make an api call and if you look at the documentation this second one asp.net core blazer server additional security scenarios you can see they have a demo of the weather forecast service which would use the token provider right and pass that in through injection and then if it's going to make an api call it can pass that token as the authorization header and uh that is a necessary thing to do anytime that you're making an authorized api call all right now let's go to startup we're going to add the token provider service and down in app under use routing i'm going to add use authentication use authorization and in the end point because we're going to have some razor pages here we're going to map those map razor pages so let's add some razor pages we need to do this over in shared i'm going to add a shared razor component called redirect to login there you go so we can use this anytime we want to redirect somebody to the login page with the return url now let's make a login display and you probably noticed if you saw the basic auth when you create a new project with authorization with identity that you get this login display component by default but ours is going to be a little bit different so take a look at what's going on here we're passing in the token provider we have a navigation manager and we have an authorized view which gives us an authorized and a not authorized section and if we're authorized we're saying hello context user identity name and we're linking to account manage index and then we have a form with a button and we need a form because we have this hidden input tag that has the cross site anti-forgery token and then if we're not authorized it's giving us links to register and login now we need to put this in main layout right up top and now we can register we can log in we can log out but we're not really doing any kind of authorization so let me show you how to do some simple authorization in three different ways so let's go to fetch data and i'm going to completely change this so i've got an authorized view here and if we're authorized we'll show the ui and if we're not authorized we'll say something like you are not allowed here all right simple markup authorization you have to be logged in in order to see the data all right here we are we're definitely not logged in so if i go to fetch data i'm not allowed now i can't log in because i don't have an account yet so let's register create my account my password and register yes i'll save the password and now you have to click this click to confirm your account so this is taking the place of email confirmation you don't have an email service yet so you just have to click that now i'm going to log in and please remember me now i'm logged in hello carla franklin's net so now if i go to fetch data boom there it is all right so that's one way to do it for the next way let's go to counter and i'll change this as well okay now we've got a cascading parameter task of authentication state and if you look in appraiser remember we had this cascading authentication state that wraps the router and therefore wraps the app and everything else so this is sort of in lieu of injecting all right i've created this cascading parameter so i have this authentication state task now i have added a string display message which i'm going to show right down here and i've changed increment count to async task so that we can call await authentication state task and then i'll get the claims principle user and check user.identity is authenticated and if it's true we'll increment the count and if it's not true we'll set the display message to you must log in first so here we are we've got our counter we are logged in so i can increment if i log out and go to counter [Music] alright so that's another way that we can do checks of authentication but this is with code now there's another way that we can just disallow the user to see this page at all if they're not authenticated which is with an attribute attribute authorize right and now we're saying you can't even see this page any of it unless you're authenticated so we are not authenticated we'll go to counter it says not authorized that's the default message if i go to fetch data we get the message from our code you are not allowed here so now i've effectively locked down this application in a couple of different ways just to make sure this works we'll log in go to counter there it is here's fetch data everything works now we have secured the pages themselves but we're still allowing people to go to these pages uh even if they're not authenticated so wouldn't it be cool if we could just remove these guys from the nav bar if they're not authenticated well sure so we use the old authorized view trick we're going to do an authorized view on these links so authorized view by itself means we're only going to show these things if the user is authorized there we go we have home and that's it we log in now we can go to counter and we can go to fetch data there you have it so if we were logged out for example and we just wanted to say go directly to counter we'd still get not authorized and fetch data isn't allowing us in so it's all working all the the sentries are at the door so that's all i got for this episode of blazer train next week we'll do the same thing but in a web assembly application back to you in the studio carl [Music] oh oh sorry you got me listening to some tunes hey uh thanks for riding the rails with me today this is where i jump off i'll see you next time [Applause] [Music] you

Channel: DevExpress

Views: 850

Rating: 5 out of 5

Keywords: Developer Express, DevExpress, Visual Studio, Microsoft Development, Software Developer, blazor, blazor train, Carl Franklin, Microsoft Blazor

Id: Lp-0JtQbj84

Length: 19min 1sec (1141 seconds)

Published: Tue Aug 31 2021