Basic Auth for Blazor Server Revisited: Carl Franklin's Blazor Train Ep 26 Update

hi I'm Carl Franklin in this episode of Blazer train I'll show you how to do basic authentication and authorization in a Blazer server app using asp.net core identity which comes in the boxcar the uh the box it comes in the Box you could start out using a local DB SQL database and then you can move it somewhere else at a later time just change your connection string and you'll be zooming down the tracks to success so I purposely made this episode drop dead easy to follow I don't go into the dirty details of how all this stuff works you can read the documentation on your own time to figure that out no I'm going to show you how to get off up and running quickly and easily and that's coming up right now right here on Blazer train see what I did there please [Music] so I've created a GitHub repo here at github.com carlfranklin slash basic off and this is the Blazer server app plus all of the instructions that you need to recreate it so first things first definitions authentication is the process of confirming that a user is the person they say they are and that user is represented as an identity authorization is different now that we know the user's identity what are we going to allow them to do authorization is allowing the user to access aspects of your application based on their identity and the roles or claims they present so what's a role simply a name like admin supervisor or content manager you can assign users to one or more roles and then check those roles at runtime to authorize the user to do or see an aspect of the application we're going to use roles in this module claims are a little bit different a claim is an assertion by the user such as their name email address but also can be very specific to an aspect of the application such as can click the counter button a claim is like a role but more specific to the action they want to perform or the aspect they want to access claims are currently being favored over roles in the industry but role-based authentication is still very useful and very powerful there are many ways to do authentication and authorization in a Blazer server application we're going to use the Microsoft identity subsystem including support for roles the Blazer server template gives us everything we need to generate an identity database which is a standard schema used by the Microsoft identity subsystem well almost everything you'll see we're going to create a new blazer server application which will allow users to register we can then authorize sections of markup entire pages and even code based on whether or not the user is authenticated and what roles they are in so let's create a Blazer server application project and I'm going to call it basic off now this is the critical step rather than just creating a Blazer server Project without any authentication stuff we're going to select this authentication type right here individual accounts so what that does is it installs everything we need to use this authentication database allow the user to register and log in and then with a little tweak we can add support for roles so I have the SQL Server object Explorer up and if you don't have it up you can go to view SQL Server object Explorer right there and then right here in the top localdb I'm going to expand databases and you'll see that I have a couple of databases that I've used before but there's nothing that this template has created for us yet but we have all the building blocks of creating this database let's look over here in areas identity pages account we have a log out and a log out partial but we also have this a revalidating identity authentication State provider say that five times fast that does the heavy lifting for us now what about that database well if you look in app settings you'll see this default connection right here using localdb in the database name is asp.net Dash basic off because that's the name of our project Dash and then this guide here and that guide string means that it's going to be a unique database name because what if you've already created a project called basic off right well this is a situation where Visual Studio is trying to save me from myself so I'm going to delete this guide and I'm going to delete this asp.net Dash so the name of our database is going to be basic off now I said is gonna be how do we actually create it well save everything here and I'm going to go to the package manager console and issue this command update Dash database and what's going to happen is check out the data folder here and then under migrations look at this we've already got an application DB context now you can ignore the weather stuff right but this migration includes the schema to create the database all we have to do is say update Dash database done now if I go over here and refresh the database list there it is basic off if you look at the tables we've got our users right here we've got our rolls here we got role claims we've got user claims and user rolls we have users we have roles and user roles combines those two saying that this user is in this role but there's more to it than this now I mentioned roles that right out of the box if we just start using it right now the roles won't mean anything to make roles work we have to go to program and let me make some more room here and then right here where we're adding default identity on line 18 we're going to add this add roles of identity roll and now we can use roles now if I ran this right now it would look no different from any other laser server application except that I'd be able to register and log in but the application isn't going to respond to a logged in user any differently than it would to a non-logged in user for that we have to do some authorization and we're going to start with the nav menu you know the nav menu it has nav links to the home page to the counter page into the fetch data page well what if we wanted to only show the counter page to logged in users in other words you have to be authenticated before you can see this link well for that we're going to do this authorized view we're going to wrap this markup in an authorized View and now when we run this even without registering we are not going to see counter check it out there you go you can go to home we can go to fetch data but we can't go to counter because that authorized view component says Hey only show this if the user is logged in doesn't say anything about roles though and you should also note that if I navigate directly to counter it's still there because we haven't authorized this page we have if we put an authorized view around the entire page then we'd have more control over it we'll get there okay now for fetch data let's go one step further and say oh not only does the user have to be logged in but they have to be in a role called admin all right so we don't have any roles yet but this is where we're going okay let's register as a new user I'm going to create a new account my user at myplace.com and I'm just going to pick a password that doesn't have to be really secure this is only running on our local machine local database but I have one that I use all the time confirm it now there's a lot more to it than this right we don't have an email sender registered so we can't do email confirmation and what does that mean anyway well take a look if we look in the database for asp.net users this email confirmed right here is false but when I click here to confirm my account Watch What Happens now it's true so the trick is email confirmed has to be set to True hey you know if you want to roll your own email confirmation that's fine but the identity system has built in all sorts of great help for that we're just not going to go there today all right now let's log in and there we go now we can see counter but we don't see fetch data because we're not in that role and it should be noted that I can still navigate to fetch data no problem so next let's talk about securing these pages starting with the counter if you simply add this attribute authorize to the page yeah I know you've seen that before when you're doing secure apis right but in Blazer we can authorize a page just like that now this says the user can't see this page even if they navigate to it directly unless they're logged in now anytime you make a change and you're logged in you have to log out and log in again okay here's counter as we expected but if I log out I can't see counter in the nav menu and if I try to go there directly not authorized all right so that's good we have secured the counter page now remember how I set up the nav menu for roles for fetch data rolls admin how can we secure the fetch data page saying that we can only see it if we're authorized and we're in the admin role Well turns out that's pretty easy so let's go to fetch data so it's still the authorize attribute but now in parentheses we've specified roles equals and then a comma separated list of roles in our case there's just one admin let's try it again okay I can only see counter and can I navigate to fetch data no I'm not authorized because I'm not in that admin role so how do I set the admin role well it turns out there isn't a way with software anyway built into Visual Studio to manage users and roles in that database so what I did was I created a library to let us do that in episode 84 of Blazer train identity management I introduced this Library identity manager Library so what it is is it's a net standard class Library that's based on this GitHub repo by m Guinness that I showed that lets you manage users in roles and it's just a wrapper around the code in the identity system but there isn't anything in the template as I said so this has two parts it includes the library but also a demo that's a Blazer application a Blazer server application that we can use for that so what I've done is I've cloned the repo right you could also just download the zip file and run the Blazer application all right so there's two projects in here 's the identity manager Blazer server which is the app that uses the identity manager Library and if you go to app settings Json all you really have to do is tell it to use that same database with the same connection string and then it does the rest so let's run it so if I look in users you can see I have one user there there's no roles and if I look in roles there are no roles here either so I'm going to click new and add a new role called guess what admin there you go now if I go back to users and I edit my user at myplace.com which is our user now I can check off that I want them to be in the admin role and hit save okay we're just going to close this because we're going to come back to it and get back to our basic off app now remember what we did we just added our user to the admin role or assign the admin role to our user however you want to say it but we have to log out and log in again okay now we have counter and we have fetch data very good so far we've authorized access to markup here right and we've used the authorize attribute to authorize these two pages right here including role-based authorization but that's only for the page so far we've only done the markup and the page what I'd really like to do is do some code authorization in other words I want to inspect the user and see what role they're in as they try to do something like click the counter and if they're not in that role I'm not going to allow them to click the counter now of course counter could be anything right it's just a demo the point is you can inspect the user see if they're authenticated and see what roles they're in in the app as code is running so let me show you how to do that first of all let's look at app.razer so this cascading authentication state is here wrapped around the entire application because we specified that we wanted to use individual accounts which means we're using the identity subsystem and therefore we can access this cascading authentication State as a cascading parameter anywhere so let's do that encounter all right we'll go through this from the top we've got our authorized attribute no problem there meaning you can't even see this page if you're not logged in and I've added this error message right and I'm going to show that in red if there's a problem I've also got my cascading parameter which is a private task of authentication state and I make it nullable because it could be null and I also have a claims principle now the claims principle essentially represents the logged in user or the identity of the user right so let's go down to increment count I've got a couple of centuries here if the user is no return and this should never happen because viewing the page is an authorized access thing you can't view the page if you're not authorized so it should never happen also this user identity is authenticated should never happen but I wanted to put that in there because you can look at that you can look at all these things users know user identity is authenticated is true right and then we're looking at if user is in role and I've made one up here called counterclicker then we can click no problem but if we're not in that role you do not have permission to increment the counter now this is where we pull out that user in uninitialized async if authentication state is not no and it could be because it's a cascading parameter well you know then we await authentication state which is a task of authentication State remember and then the user is going to be the user property of that so now let's see what happens now remember we have to log out and log in okay now let's go to counter and what do you think is going to happen we don't have permission to come at the counter because we're not in that counter clicker role hmm how are we going to add ourselves to that role like this using the identity manager Blazer server application so I'm going to click create role counter clicker and I'll save then I'll go to my user edit and add counterclicker to that user's roles now let's try it again and everything works as expected so today we created a new blazer server project with basic individual accounts identity based Authentication we added support for identity roles in program CS we modified the identity database connection string in app settings Json we generated the database with the update database command we ran the app and registered as a new user then we authorized markup in navmin eraser we authorize the counter razor and fetch data raiser pages with an attribute and we use the identity manager Blazer server app to add roles and assign them finally we authorized access to code using a claims principle object representing the user's identity now back to you in the studio Carl yes that was easy wasn't it whoa next week I'll show you how to add authentication and authorization to an existing Blazer app we'll also talk about ways to customize the UI and I might have a few more surprises too hey thanks for riding the rails with me today this is where I jump off I'll see you next time [Applause] foreign [Music]

Channel: DevExpress

Views: 1,901

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

Id: K40MuUltc_E

Length: 22min 25sec (1345 seconds)

Published: Thu Jul 06 2023