SIMPLEST Blazor Authentication And Authorization Tutorial

hey everybody welcome to just blazer programming and today we're going to be discussing authorization and authentication in blazer now this is just going to be the most simplest example that i have ever found on making authentication and authorization work in blazer however there's many more ways to do this and this is just the simplest way so in other videos i'll go into the uh more traditional ways of doing it the better ways of doing it this is just how to just get started uh implementing it in blazer specifically in blazer server laser wasm has its own way of doing this particular thing because there's more libraries you have to import and more services you have to apply to and it's a different process entirely from what i'm going to show you today however if you just need a very quick startup because you have some sort of project that you want to get started but you need some authentication pieces in order to build proof of concept this will be perfect for you so right now i'm going to tell you uh you know i'm going to go switch over to my screen and show you exactly what you need to download first in order to make this happen and then i'll teach you you know all the steps you gotta do so this is the most basic laser authentication and authorization tutorial that i could ever find and show you just letting you so we're gonna get started on the authentication authorization piece for blazer this is going to be a blazer server project so this is the absolute simplest way of getting any authentication or authorization in a blazer project if you want to do blaze or wasm that is a little bit more difficult a little bit more complicated than doing this because this is basically just out of the box stuff the only thing that you will need is if you can see back here apart from whatever your ide is going to be is microsoft sql management studio so you can download this for free on microsoft and then once you do that you'll be uh it'll ask you to connect to a server so it's going to create one for you basically and then you wanna make sure you copy paste this information here which is copy paste it put it somewhere i'm putting it on my notepad right there and uh you connect once you do that you will be able to create databases so you see i have like two databases here but what i'm going to do is just make another one so i'm going to make another one right here new database so just open the uh open this go to versus databases and just create a new one and here we're just going to call it blazer off and now you also need to know what this name is as well but you'll see what i mean once we create the project so this is actually the simplest way that i found to create any sort of laser authentication or authorization we're going to create a new project a new blazer server app and we're going to call it laser off server we know that that's our blazer server off project for server and here the differences between this and the other uh product types that i've done before is that we're gonna choose an authentication type where before we just have none and we kind of ignored this here we actually are going to choose an authentication type so i'll just go over this real quick individual account is what we're going to be using today individual accounts is basically you're going to be taking accounts from somewhere in this case we're going to be taking accounts from a database laser roth in our case microsoft identity platform is what helps you use uh tokens is what helps you use for like uh azure or like google authentication things like that so if you have a google account you could use this to log in with it but you need to build it with this in mind and windows is when you need to use active directory on your computer or i believe windows accounts also works with this as well it has its own thing so we're gonna the simplest one is uh individual accounts and that's what we're gonna work with this this is the old-fashioned way maybe not as old as that directory but um this is how web apps usually will do it if you're you're supporting like a project or something you have a database usually your database is gonna have all the users in there um also in the database you're gonna see that we have no tables right now but don't worry you don't have to build any tables and there's very minimal sql that you're gonna have there uh you're gonna have to do so the blazer project is going to do a lot of the work for you so now the blazer project has activated and now we are almost good to go but the first thing you want to do is go to the app settings.json file and we're going to switch out this information the server information and the database information so in our case we're going to get rid of this database that it gives us up to the equals and you're going to put in the name of the database you've chosen so in our case mine is called blazer auth whatever you chose to call it you want to put it there and this server is whatever uh the name you used up here so whatever this is you just replace that with that and see so you have your server the name of the server and the name of the database in your default connection just save that and you're basically good to go and before i you know we run this i'm just going to go over real quick what is different between this and like the other uh laser projects that do not have this is that it basically has already implemented a way of you uh creating these individual accounts and attaching them to the database and it will even build the tables for you so all you have to do is draw from those tables it also has components that um the other ones did not have so you're gonna see what i mean now when i say this is the easiest way i mean like if you don't know anything about like role provider like role policies uh claims and stuff like that then this is fine and if you have like a small project that you just you know you don't really care about having all that stuff then this will also work for you but when it comes to like real life scenarios this is not enough in my opinion but this will at least get you you know get you where you want to go very quickly at least for a proof of concept so when this finally runs we want to go to login this is one of the pre-made components that comes with this but it comes with the register login and i think an about me component or something that you didn't make and it is in here for you so i'm going to add an email there's also pre-made validation so if i don't add like a proper email it's just going to be mad and also this password has validation as well but what i put for this password is just password one two three an explanation point if not if i miss one of those things it's not gonna work so if i try to log in with this it'll give me an error and that's what we want we want this error to come out because what this will do is it basically says that they can't like find a database it can't find anything to grab the users from so if you press this button it's going to do everything in your database and do all the work for you which is what we want but that in order for it to find the database you have to fill out that information from the uh from before in the um in the appsettings.json file so now it's done it actually did it so we just want to refresh the file and if you don't believe me we're going to refresh the blazer auth here and it created all these tables for us so right now we basically have the authentication piece ready and i'm going to create test at test.com and this password is going to be password 123 exclamation point i'm going to say about a login attempt so we have to register as a new user we're going to do the same thing add that very password twice you need a capital case uh you know you need letters you need numbers you need a non-alphanumeric character in this case i'm using the explanation point we have a registration we don't need to do any of this we go back to the login page so if i come here and go to where it says users like top 1000 you see that my user is there the one that i just created test at test.com and it has a password uh unfortunately this password is handled using the uh like the password library thing that it has like with the encryption so you can't like stick somebody in here without the encryption it's not gonna work so if you're gonna add people in there you have to go through this process kind of sucks if you want to do like more testing and make it easier on yourself but dems the breaks but we're going to add this you want to we're going to log in properly now now that i exist actually no excuse me my bad i almost forgot if you look closely to what we have here our user is actually locked out and the email has not been confirmed i don't think this actually does anything or i don't think that we have implemented anything that allows us that needs us to change this but out of habit in my testing i just uh flip the switches let's see what happens okay so yeah you do need to you need to do a little bit of sql here luckily i've already been through this process so i got the query prepared so what you're going to need to do on your end is either go to the edit if you don't want to do it this way i don't even know if you can even see this i'm just going to make it bigger for you what i'm doing here is an update statement uh where we just update whatever this first user is the id seems to be a good so i paste that id here make sure your lockout is on zero and email confirm is on one and update it like this one row affected i am going to just comment that out now execute this and now we have our email confirmed to be one and our lockout enabled zero and i believe that is all we need to do to make this work and there it is it actually logged in you see my name is up here tessa test.com and yeah unfortunately you don't have to do the query way the sql way of doing this you could just come in here and edit it manually uh forget hogs i really use the editing but yeah you could edit this edit any of these manually here yeah edit top 200 rows and then give the ability to change this to a one and change this to a zero if you want to instead of doing this way but this is the proper way of doing it in my opinion so what does that give me it gives me access to the blazer server but it you know if i log out now i still have access to it so how do i know whether or not you know i have the authentication or the under authorization working makes no difference well you have to be the one to implement the authentication and authorization pieces so even though you already exist technically when you log in and you exist in the system that's the authentication piece the authorization piece comes in when you want to separate um privileges that you might have so we're gonna just show you real quick how to do that with this unfortunately doing it this way is not the best way because um we won't have claims we won't have roles and we won't have um uh claims roles and policies that we can work with instead we'll have basically a blanket if you're authorized if you're not authorized um way of doing it so you'll see what i mean it's kind of binary so you're either authorized or not we want to go to the nav menu right here so in this nav menu i'm just going to add one more page and we need to add this page also this component here as well but once we're done with here so i'm just going to call it standard user they call off the user or whatever you know it doesn't matter i'm just going to call it a standard user and this one you only have access to it if you're authorized so how do i make sure that this only gets seen by authorized user only gives access to it well you need to put a component here called the authorize route view the authorized view component and then within this component you're going to add something called authorized now there are three uh of these co there are three um components that can be used inside the authorized view and that is authorized not authorized if i look for authorized is authorized not authorized and authorizing essentially well not authorize you you understand what it means there's no real point for me doing it here like i could put not authorized just for the sake of you know for the sake of knowledge put it up here make sure that whatever you want to authorize is within here and now i'm just going to add not authorized and have those initial three up here so now we have not authorized right there while the nav is breaking okay so that has to be outside all right so make sure that you don't break components along the way like i just tried so put your nav menu outside of it all and then put your authorized view within that and then you can put all the tabs in there so you have you're not authorized we're gonna have the home the counter and the fetch data in our not authorized tab and then the only thing in our authorize is going to be the one called standard user so now what i expect to see when i run this is that we can see the three tabs regardless uh whether or not we're authorized oh no what's gonna happen is that we're gonna i i we're gonna see what i screwed up but i'm not gonna stop so what we have here are the we're not authorized right now as you see we're not logged in but we can see these things but once we log in i believe what's going to happen is we're going to lose access to those three and just have access to the standard user page not my intent but i think it gets the message across i could be wrong let's see what happens yep i was right so yeah because i'm authorized now i lose access to the non-authorized pieces so funny oh yeah that's right we didn't create the components so we got the default thing but that's okay if i wanted to see all three of them uh at all times then all i would have to do is remove the non-authorized pieces and then i could see it regardless whether or not i'm authorized run that break something oh yeah i guess if you i guess this is how they want you to do it i'll keep that there you put these outside of the authorized view so if you want to authorize something put it within the authorized view component if you don't wanna if you don't care about whether or not your authorization matters put it outside the authorized view component and then there is one more value in here that i'm going to show you called authorizing so what this what this does is that when it's in the middle of authorizing you basically if you're doing an asynchronous call um you have a message specific for that moment so because of this blazer server you're not going to do an asynchronous call while you're doing this i believe that's how the authentication leads this kind of authentication works you're not going to need that oh yeah so in this case we're going to be accessing those three tabs at all times i'll log out real quick and now i have these three tabs that i can access and if i try to log in again i have access to all the tabs now again no comp uh there's no page here but that's fine um i didn't really add the page here but if you want i could just add it but yeah that's just for completionist sakes let's just add our user component right up here i believe this is what we called it so i'm authorized right now i could see it not authorized i can't see it so that is the the gist of the authorization there's not much more to it than that unfortunately i don't like it it's very good if you just want to get started and you need authorization for you know a project or something it's very bad for actual productive stuff unless you're creating something extremely simple so what i mean is that because you don't you can't really use policies with this um at least not in this video when i find out how to use policies i'll find i'll tell you how to how to do it in blazer but normally how you would do it is um you will need to read off the claims and read off the policy or whatever it is that you're doing and then that will tell you i think the proper way of doing um the the kind of authentication authorization for something in production is to use claims and have those claims tell you you know what it is that your user is bound to in fact there's even a claims table that was created just for this so you can read off the claims it's just that it takes a little bit more work so in this example that is not you know simple but this does get you off the ground when you want to do authorization authentication you do need an individual you need to activate it as individual account you will need to add a database here and then do some minor changes to the account or to make it work and if you want to change what your user can see depending on their authorization status you have components that will do that for you but if whatever you're trying to test for authorization has to be within an authorized view but when it comes to roles and the policies and claims i would like to save that for a different video because i want to go more in depth with that because that is the way that you're also going to be using uh webassembly projects mostly because they have to use that for blazer server everything is basically easy peasy off the bat for you this is the simplest tutorial you can have i just went out of my way to show you basically everything that of this particular method provides for you and then in the next couple of videos i'll go into more in depth how to make more robust authentication and authorization pieces i just want to keep it super simple and not get into too much the nitty-gritty just yet so that is why i made sure that um you know i kept it this way and that's basically it actually that is not it because i forgot to teach you how to actually protect the pages from unauthorized access so let's say if i don't have this authorized attribute uh written like this add attribute bracket or authorize then anyone can have access to the page i'm trying to you know keep you from so in this case standard user was only meant for authorized users if i didn't have this i ran this and i tried to get into this page um i might not be able to see it from the nav menu but i will still have access to it if i try to go through it to the url all i got to do to reach it is this and then write the name standard user as you can see this access the component in order for me to protect uh unauthorized access we add the authorized attribute here and then if i try to do that again as an individual who's not logged in or who's not authorized i get this instead not authorized so i just i saw that i missed that in this and i didn't want you to miss it either so that's basically how to do if you log in and then you uh you try to find it you'll be able to work with it just fine it's only if you're not authorized and it is a protected page like that then you will you have this problem which is what you want you want to protect your pages right and that's it i'm going to go back to my outro i'll see you guys later like and subscribe sorry that i didn't go into the claims uh the policies and stuff i think that's really important to do but i also think that it isn't uh what what the video claims to be which is simple so i'll get into that don't worry a couple videos from now we'll get into different ways of how to authenticate blazer apps including blazer uh webassembly apps so don't worry i'll see you peace out like subscribe do all that good stuff [Music] you

Channel: Just Blazor Programming

Views: 14,523

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, .net, authentication, authorization, blazor authentication, blazor authorization, blazor authentication and authorization, how to authenticate in blazor, how to authorize in blazor

Id: PZQFMF0NnFA

Length: 23min 44sec (1424 seconds)

Published: Mon Apr 25 2022