Mastering Custom Cookie Authentication : A Guide to .NET 8 Blazor with Interactive Wasm Render Mode.
Summary
TLDRこのビデオでは、.NET 8 Blazor Webアプリケーションでのカスタムクッキー認証の実装について詳しく解説しています。講師のフレデリックは、WebAssemblyレンダーモードでのクッキー認証の作成方法をステップバイステップで説明し、サーバー側とクライアント側の両方で必要な設定とコードの変更を紹介します。具体的には、パッケージのインストール、データベースサービスの設定、新しいプロジェクトの作成、ログインと登録フォームの実装などが含まれます。このビデオは、.NET技術、特にBlazor WebAssemblyに関心のある開発者にとって非常に有益な内容となっています。
Takeaways
- 👨💻 Demonstrates how to implement custom cookie authentication in Blazor WebAssembly app
- 🔑 Uses Identity framework to handle user authentication and authorization
- 📝 Creates custom ApplicationUser class to extend IdentityUser
- 📥 PersistentServerAuthenticationStateProvider prepares auth state on server
- 📤 PersistentAuthenticationStateProvider maintains auth state on client
- 🌐 Minimal API endpoint used for logout to access HttpContext
- 📃 Customizes login and register pages
- 🍪 Shows how auth state and cookies change on login/logout
- ⚙️ Registers services and components needed for custom authentication
- 🔐 Implements authorization check on Razor components using @attribute
Q & A
Blazor WebAssemblyのレンダーモードでカスタムCookie認証を実装する際の主なステップは何ですか?
-主なステップには、クライアントとサーバー側のパッケージのインストール、データベース接続文字列の作成、データベースサービスの追加、Identity DBコンテキストの設定、PersistentServerAuthenticationStateProviderとPersistentAuthenticationStateProviderクラスの作成、ログインと登録ページの作成が含まれます。
BlazorアプリケーションでカスタムCookie認証を実装する目的は何ですか?
-カスタムCookie認証を実装する目的は、デフォルトの認証メカニズムをカスタマイズして、アプリケーションに合わせた認証フローを提供することです。これにより、特定のユーザー認証要件に合わせて認証プロセスを細かく制御できます。
「PersistentServerAuthenticationStateProvider」と「PersistentAuthenticationStateProvider」クラスの役割は何ですか?
-「PersistentServerAuthenticationStateProvider」クラスは、サーバーサイドレンダリング時にユーザー認証を処理します。一方、「PersistentAuthenticationStateProvider」クラスは、クライアントサイドで認証状態を維持し、利用します。
Blazor WebAssemblyプロジェクトでIdentityを設定する際に必要なパッケージは何ですか?
-EF Core、SQL Server、EF Tools、Microsoft.AspNetCore.Components.WebAssembly.Authenticationなどのパッケージが必要です。
カスタム認証でユーザー情報をDBに保存するためにIdentity DBコンテキストに追加する必要があるクラスは何ですか?
-アプリケーションのユーザー情報を保存するために「AppUser」クラスをIdentity DBコンテキストに追加する必要があります。これにより、デフォルトのIdentityユーザークラスを拡張できます。
Blazorアプリケーションでカスタム認証のために必要なデータベースの設定はどのように行いますか?
-appsettings.jsonファイルに接続文字列を定義し、Program.csファイルでこの接続文字列を使用してEF Coreデータベースコンテキストをサービスに登録します。
ログインと登録ページをBlazorアプリケーションに追加する際の注意点は何ですか?
-ログインと登録ページには、適切なルート属性を設定し、ユーザー入力を受け取るためのフォームを含める必要があります。また、認証処理を実行するためのロジックも実装する必要があります。
Blazor WebAssemblyアプリケーションでログアウト機能を実装するためにはどうすればよいですか?
-
Outlines
😀 Introducing the video and goals
The speaker introduces himself and states the goal is to look at custom cookie authentication in Blazor using interactive web assembly.
😀 Installing necessary packages
The speaker walks through installing Entity Framework, SQL Server and other necessary NuGet packages.
😀 Setting up the database context
The speaker sets up the database context by creating an AppUser class that inherits from IdentityUser and an AppDbContext class.
😀 Implementing user authentication
The speaker implements authentication by creating classes to manage the authentication state on the server and client side.
😀 Building the login and register pages
The speaker builds out the login and register pages, including the necessary models, methods and UI.
😀 Adding the ability to log out
The speaker adds the ability to log out by implementing a minimal API endpoint and wiring it up correctly.
😀 Accessing user claims
The speaker accesses the user claims to display the user's name instead of their email on the nav bar after login.
😀 Wrapping up
The speaker concludes by summarizing the video and key things that were covered regarding custom cookie authentication.
Mindmap
Keywords
💡custom authentication
💡interactive web assembly
💡authentication state provider
💡identity services
💡claims
💡authentication token
💡cascading authentication state
💡custom cookies
💡login / logout
💡navigation manager
Highlights
Explains custom cookie authentication in Blazor web assembly interactive mode
Installs packages and sets up database services and identity context
Creates custom application user model
Sets up persistent authentication state providers
Implements login, register and logout pages
Secures routes with authorization
Registers services for authentication
Shows demo of register and login functionality
Displays logged in user's name
Tests logout and removes authentication cookie
Creates multiple test users
Fixes display name issue from database
Rebuilds and retests application
Verifies customized name display
Concludes overview of implementation
Transcripts
hey everyone welcome back to net code help Channel I am Frederick and I'm happy to have
you here today in this video we are going to look at custom cookie authentication in net8
Blazer web app with interactive web assembly render mode I've made a video on how to create
cookie authentication in interactive server render mode and on this video is focusing
on the web assembly render mode when we say cookie it is just a piece of um token which
is set to the cookie storage of a browser and now which holds the identity of the user
anytime a request is being made the token or the cookie has to be retrieved by the
server verify it and um grind access to the user and now in this case we have a default
one um that is when you use the individual account and this time around to we are going
to look at how to customize that into a small unit that you can implement it easily in your
application so before we Dive Right into this make sure you have subscribed already and also
click on the notification Bell to receive update as soon as I do upload new video like this also
like this video to support this Channel and this video as well the source code of this project
will be available as you know already so if you want to grab it to just guide you check the video
description and it will be available if you want to have a look on the authentication the custom
cookie authentication using the interactive server render mode then check the playlist it's all found
under the description so you can actually check it over there I do offer coaching session to people
who are interested in net Technologies talking about Blazer web assembly server net8 um web
API Mar Blazer hybrid and a lot so if you're interested check the video description I have
an email in there you can write to to me through it all right so let's Dive Right into this we're
going to create a new project so launch of Visual Studio 2022 and I click on new project I know by
now you know how to create project isn't it yes of course so click on Blazer web app and
here we're going to give the name as custom cookie Earth Blazer we assembly what I'm trying to mean
here C some Quicky authentication in Blazer web app with web assembly interactive um render mode
so choose a location here and I click on next to get this project created so once the project has
finished creating what we're going to do here is we're going to install our packages for the
client and also the server aside from installing the packages we are going to create our connection
strings and now add database services and Etc to get at the database of identity DB contest
because we're going to use identity manager in this so we have to add the services and
un perform migration good and I believe for that you know how to do it already isn't it now when
we are done we going to add idty DB contest this is not a um connection for database rather for
user manager okay you're going to add a service so wait after adding the services we're going to
create two classes one in the server and one in the client the server one you're going to name it
as persistent server authentication State provider and now the client one is going to be persistent
authentication State provider why are you creating these two classes forther research the persistent
server authentication State provider prepares authentication of the user in the server that is
when server side is rendering that is server side rendering and now it's sent it to the
client now when it gets a client the state of the authentication must be maintained and it must be
utilized as well and that is where the persistent authentication State provider comes in so it makes
sure that authentication which has been received from the server is intact and it then utilizes
in the client side rendering you see so we need these two classes one for each of the projects
okay once you're done we create our Pages log in and now register and now off you go so these are
the stages are going to pass through to finish this cookie or custom cookie authentication with
interactive web assembly render mode now you have the gist of it let's get going now when you go to
the solution you see we have two projects in here we have the client this one and that is the server
so that's where we're going to create our custom modication to we focus on the uh the server then
we're going to consume it in the client very simple one okay so all the work are going to
happen in the client not in the server and when you are done the client is just going to consume
it very simple way okay now let's install packages in here and you know since you're going to use um
idb context it means we need a ef ef tools and now SQL Server so right click on dependencies and now
let's add this packages so click on the browse Tab and in here we going to search for the efcom tools
um the tools and that's again we have toq server and the efq itself okay so here that's what we
have so for me since I have the package reference already I'll just close this then I I click on the
server site I go to unload project and now from this section the item group I'm going to paste it
in here so what I need to do here is just type in an item group and I'll paste this here this is the
one that I needs okay so I'll add them in here so we need three packages EF call SQL server and our
tools okay let's save this right click solution right click this and now reload project with
dependencies we then go to the client you right click on the client then go to unload project and
I'm going to add the same thing to this that is a component web assembly authentication so this
what we need then let's save this as well and now go to reload project with dependencies so
when you check dependencies packages you can see we have the packages in here right when
you check for the dependencies packages for the client we also have then here what left
here is to build this together so let's build solution all right so you can see that the the
project building is completed and our two suceeded it means that all the project are
built the next thing that we're going to do here is to create our application user now
we can defaultly when to use identity user it has a default buildin properties and here
maybe you like to add some properties to this so maybe you're going to extend the class and
we going to add maybe username okay so we have to do that let's come to and this must
be held in the server project so take note we let's add maybe class a folder here and
I'm going to say this of authentication so everything here is of authentication right
click on this you're going to add a class to and I'm going to name it as AB user for short
this app user is going to inherit from Identity
user identity user and now this is coming
from let's see so Microsoft as net code identity so this has
some default properties and we want to add name to
this so if case you have any extra properties you just add
it okay so this is what we need to do now aside from doing this let's
now go in and create our appdb contest so in authentication I'm going to add my abdb contest
class and now this class is going to H from Identity DB
contest and now within this you have to pass in the app user that
we created we can create Constructor for this then we pass in this appdb contest
class okay you need not to create any table here okay because this has it all that's all
that we need to do so let's save this the next thing that we're going to do is to
create our connection string in the app setting. Json so here we're going to say
that connection strings then you're going to be default connection so I like to name
it as only default now server is equal to local and database this equal to wasm ah
so I'm going to say cookie DB now aside from this I'm going to say trust server
certificate or this is trusted
connection set this to through and now trust server
certificate let's set this to through as well okay so this what that we need to do let's save
this the next to do is register the connection string in the program.cs file so go to the next
stage and then before the app build you're going to say builder. services. rdb contest we pass in
this appdb contest class that we created in that we're going to pass in an option
an option. use SQL server and in here we have to provide the class connection string that we
created so get connection string and that is this one and what is the name do you remember that is
default so default you must make sure it is the
same okay so default can just cross check it copy this go to app settings and I make sure it is the
same that's fine okay so now that we are done we need to register the identity manager service so
down here we're going to say builder. services do add identity call this one passing the app
user so here Dot add Entity framework store and the store will need an application appdb
contest class aside from this you passing add signning manager and the last one add default
token providers okay so we need to add this servic in here okay now that we are done we can go ahead
and app for my migration so let's save this we're going to build everything again so build
solution okay so now that this is built we going to perform migration we go to
package manager console and in here we're going to so add- migration we
want to put this so migration and I'm going to say this is
first now after this has been created we're going to update
database now this is going to create all tables that are necessary for this Identity or user
manager okay so you can see we have a lot of tables being created when you check here you
know this already so I need not to explain but if you don't know these are the tables that is
going to create and these are the columns I'm going to create for each and all these are
coming from this this guy this one okay good okay so we have the table we have a database
created if you want to actually check it click on SQL Server object Explorer then in here you
have to check the service my server here is a local so I'm going for this SQL service
and that's the last one desktop so go to database and you can see cookie DB cookb
this the database and if I open the tables you can see that you're going to have a lot of tables in
here so let's wait for the table to get loaded you can see you have all this table coming out from
theid DB contest class that's fine okay okay so this even the cookie DB so when you check cookie
DB it is the same okay so tables let's close this yeah can see we have the same thing in here so now
that we are done we're going to now prepare user authentication okay so in that we have to create
our persistent Ser authentication State provider as I said earlier on this going to inherit from
server authentication State provider and now this prepares the user authentication using the
persistent component State service okay then aside from that to repace it send to the client and I
in the client persistent authentication State provider also which in from the authentication
State provider receives it and I'll maintain it and utilize it in the client session when
the app is running in an um CS the client side rendering but in the server side rendering as
SSR it is the persistent server authentication State provider so let's go in then and create that
class so from the authentication we're going to
add a new class to this and I'm going to say that is persistent
server authentication States provider okay so that is a name very long persistent server
authentication State provider okay so we have this and now this class is inheriting
from server so server do you have it let's see Server Authentication State
provider okay and in that you have to implement the interface for ID
disposable then you know we need to implement something like this and interface in here okay
that's a dispos method to get rid of that that error okay so in here what I'm going to do
let's have our um private read only property for persistent component States so I'll this
this so that'll be this one and aside from that you have
this ping component State we also have to get
our identity options so let's also get this property also here the next one we need our
component State subscription so we need to get this guy so this are all property is that we
are setting and and the next one we need our authentication task so let's also have this
one so we have priate only because aside from this scope we don't want to be using this you
want to maintain it to the scope of this okay so you know we have to generate a Constructor
and we need to register so from here we create our constractor and this is a Constructor so
we pass in this persent components State and now we're initializing it in here so state is equal
to this person component state so we initialize it in here okay now authentication State change
we want to call this method we haven't called any method yet so we're going to write defination for
this method okay when authentication changes that's where you want to get this guy called
okay so on authentication State change we want to just assign the authentication task to the
current task that we have and that exactly what we doing from the next one so on authentication
State change you passing it's going to call or it's going to pass in this as a payload
and now we assign the property that we created in here to the outcome or the results of this
task okay good now we are done we go to the next one that's the UNP persistent async so in this
method what we're going to do here is we're going to extract because when the page loads
when the page refreshes the component state is going to be sent from here or we're going
to prepare the the user authentication and I'll send it to the client okay so we need to pass
in properties that we need such as our claims and Etc and the claim you could use an ID name
email and Etc so that's where you need to Pro provide or prepare all these um materials okay
that's what we're going to be using so here with un persistent async what are we doing we first
want to assign or get the authentication of the user and that's what we doing here so we assign
this authentication State provider to the tax that we have been assigned it in here and aside
from that we want to grab the principal of that user so we can get it from this authentication
State and quickly let's grab that okay so render mode we need to include this one so we get the
user so now when we get the user we can now go in and extract the user info so we going to extract
it let's first check if is authenticated that is where you want to do this because if it has not
authenticated it means you don't have any current claims and you cannot extract claims once they
are not there okay so we want to make sure they are there and here we need need maybe the user
ID you need the user ID in here we also need user email and maybe
we're going to need a name so we can add one now let's say this is
name so we can have an extension of name username okay so do we have username we have um username in
here so maybe since we are not having that uh we can use we can just get the name directly from the
claims which is coming from the principal and we can just search for the name that we added and I
get the value okay so we have these three claims and that's what we're going to be using okay but
here in order to send this three properties to the client we need to have a class that get to
handle all this because it is appropriate to put everything in a model so we can just send
it once and for all okay so in that we need to create a class and this class you can name it as
user info and Etc so maybe we can just go to the client and now since you're going to consume this
in the client we need to put it in a client so we can be using or you can add Modo to this and I'll
add it in here but don't worry you can actually add it from this so with this two we're going to
say this an authentication from the client and we going to to um add a class this class is going to
be an user info and that user info we definitely going to use user ID this user ID you know it is
supposed to be string and we need an email for this and email you know is also what string and
you can add last one and that's going to be name okay so so we need these three properties and now
in here we can just go in there and now check so before we checking we can before we assign
this or we populating this to the model we can just check it first to see if the claim that it
got none of them is null before we start working on it okay so if user ID to null and let's add
this let's add the name as well because we added that so and so this this time around is not going
to be name a email it's going to be what name so if they are not now that is only when you
want to prepare this from the component state so let's say we want to prepare them here so we grab
them and as the user info and now here you can see from this name space we are adding it from
here and that is from the client Authentication folder okay we are
not using Row for now so we change this to name and now we are making a reference of this
name if it is row that you want to also add then you add it to you add it as a
row and that's all okay so now that this is set and done when the page disposes we want
to dispose a subscription and also you want to uh remove the authentication State change yes
so this is all we need to do very simple one as well and that is it one okay so let's save this
then we can now Clos this after creating this you know definitely you have to register the
service isn't it yeah so we go to the solution program and now in here we can add the service
so br. services. add let's first add cascading authentication state before we forget it again
and let's add beta. Services dot this going to be scoop and I we need our what is the
name we have persistent authentication State provider and now this is coming
from you know this supposed to be here supposed to be provider because it is coming from this okay
so I it provider then press assistant allate provider so we are creating a scope depend
injection between this provider the main one and there's the fake one okay so that's what we need
to do in here okay so aside from that we go to our route and Route can be find the component
folder and in a route. Razer we never going to find it in here okay so inside this route we
need to make some few changes in here okay so in here I'm going to just replace this one and
um we have main. layout so you know where it's coming from we have to include the name space in
here using this authorization and now with this redir login we're going to create this later on
so for now we can comment this up okay so it is is a noral thing that we doing all that I did was
to add this authorized Rod View and now if it is not you want to redir to login okay that is all
thing all I did and now here we need not to at first when you check Net 7 net say and Below you
have to add cascad authentication State markup or the component to S this isn't it good but for now
since it has turned to a service and you have added a service then I don't think you need to
use that so you can skip it if you decide to also bring it well it will be there but if you escape
it it's going to work so the next thing that we're going to do here is um you're going to work on the
sign out now when using identity manager if you want to sign out you must sign out in an HTTP
contest and now this happens only when a call is being made to an API that's where you can have
access to this else when you decide to use an HTTP contest as a cascading um value and you want to
sign out it's not going to work okay because that instance answer is only read only if you want to
if you can have access to this to sign out then we have to use a Minima API okay so we're going
to create one Minima API and that's I'm going to use to sign out if you actually check the original
docs or the original implementation of this when you choose individual account you will see that
the same thing is what you're going to do here okay so no different the same thing just that
going to scrap all the one that we don't need and I maintain the only ones that we need and that's
only one here one for sign out okay so this going to happen in the server we are still you see that
we are still working in the server we haven't touched the client yet so we are still working
in here okay so let's right click on this and the name is too long for me so let me just copy this
from here so we click on the authentication we're going to add a class to this and this is going
to be identity component end point route Builder extension H very long okay so the reason why the
name is too long here is when you go to program.cs it is coming from this Builder extension okay so
we going to implement as a part of this and it's also idty is an end point so that's why
they combine it but well you can just modify this um to make it a small one for yourself okay so now
let's go back now we have this this must be an internal and it must be a static class so we're
going to use it in here only okay now within this we need to create a static method which at the
end is going to return our end point conversion Builder so let's say it's going to return our
endpoint convention Builder and now this is a name map additional entity end point and now
within this we can pass in the I end point right Bel that a parameter and now the extent that going
toate going to affect this so anytime or wherever we are we can grab the contest from this end point
throughout Builder straightforward okay so maybe would it be possible if I bring it here okay then
let's see so now that we have this what are you going to do very simple endpoint we're going to
check if it is now we can try an exception or we can skip this I don't think this is necessary for
now okay so let's create our account group we map the group in here so if you want to check this we
create an account group and now the account group the route here is an account SL account and we
have a method known as log out so the full roue going to be account SL logout okay we inject our
principal then our signing manager which coming from this app user not application you come
from the app user and then here we have a signing manager because that's the instance of the signing
manager and I know this manager can assist us in signing in and I'm signing out so while it gets
up to this with a context we can just rather sign out in here when we sign out you want to redirect
to the homepage so you can specify if you want to redirect to any page of your choice you can just
pass in maybe lock out then this and that but as soon as you sign out you go to the home home
page okay that's what we are doing for now okay now let's save this so we are done with this now
what we need to do is to register this so where can we do it what do you think H definitely going
to do the service what the service the program so go to program.cs file and now where we have
this um pipelines we're going to pipe it line in here so let say app. map identity the this
one okay we have to map it in this format very simple one and and that is all okay there comes
in our form so we need to create our login and our register forms right click on the pages and
let's add maybe we can add a folder here and name it as authentication or we can keep going and add
a page let's make this as login so in here on top we need to inject our signing manager user
manager and also navigation manager you need to inject this aside from that you can specify log to
this so maybe account SL login or just login only there's a route login okay now this must come from
microsoft. notore Identity so we have to include the name space in here okay let's save this and
now this must be an app user not application so app user and you know it must we must add the
reference so we must include this reference in here okay now we have to design our form
but before we design our form we have to create a model and maybe this is going to be a model we're
going to have we're going to maintain what we have already default one and down here we're going to
have our input model so this is a seed class and we have you have to include this data annotation
and we have email and password okay so we don't want to remember me for now we want to have email
and password okay so once you have this we going ahead to create an instance of this so you want
to say that from here we have form input model as input then we create a new now if I click on
or if I fill up the model and I click on login this what I want to execute I want to just log
in log in the user so let's have this method in here very simple one so log in a sync and
now if I log in user this what I'm doing okay so we have this public and I think we have to close
this yes and and for this error I think I have to you have to create a property to handle this on
top here string error and now you have it set okay now claim times we need to include system. claims
to get this also solved now can see from here that we find the user by the email that has been
entered if we find it uh we're going to get here we don't need to get rows here because you're not
adding rows for now so in case you add rows then you have to get the rows and also add it in here
so for now let me just remove the rules okay you want to just have only authenication for now so
we have um claims I have a list of claims and we have a name and email okay we have user ID
you can also add that then here we can sign in manager you can check the passw if they
correspond then we want to now sign in and I will tell me the errors to what success or this going
to be a message or anything else that you want to or you can just remove this in case you are
in this what you're doing so we're going to password signning and that's provide the the
name that's the app user then provide a password and now here we are checking if if I click on come
here tells you the next step is it persistent then it's a lock out on failure so it's no we
it for f and that's what that we need to do in here very simple one okay now let's have our
model created or there is a form an edit form we can create an edit form for this and I am
using the default login so this is a default login we have the the usern name we have the
password and that is it I want to remove this remember me cuz I don't want to integrate this
now okay then we have our button so edit form you have the model and the method
here it is post we have form name in here we provide the method and now the form name for
it to because this this is going to render in static way so this a static rendering and um
if you don't not improve provide this it's not going to work okay so we have to or if
you take out this one then you have to include interactive um render mode as what for assembly
okay so that's what we doing and here we're displaying an error to the user all right now
this is all that we have we have to work on the registration tool so let's create a registration
component the same Pages I'm going to right click on this and create a component known as
register so with this two we we need our user manager so this what we can
do we can just move the ones that we have inside this the login to um import rer or
we can still repeat this the best way okay so we should not repeat this because when
you check the login we have it already so we can just um grab it from here see the
register
okay so down here we need to also create our model for loog registration so we have name
email password and a confirm password okay now aside from having this in case I click on
register what do I want to do first let's create um an object out of this after the model so input
model for the register and now in if I click on register what am I going to do we want to execute
this we first have to create an instance of this app user and now pass in populate it so that's
what we are doing we ass signing to this and we can now keep moving so here must be an app user
as you know that is a model aside from doing that we're going to create user asnc so from
here once you have everything created because this password has is going to Hash the password of the
user automatically and we can now create the user account if it is access or in case it is not what
you want to do you can just retrieve it but let's assume it is Success then that is all okay so you
see this is very simple so register user and now create a user very simple one okay now let's save
this so we have our login we have our register now we have sign out so now let's go to the nav menu
and this can be found in the shared or the layout you see we have a nav menu in here and with this
we want to replace this one with this because here we have this authorized attributes surrounded with
and this we need to include the name space okay so at using this authorized view need to include
them here so what we're doing here is now when need check this authorized view okay now need
check this we want to this is an au requir if I click on this but for now you want to remove this
you didn't want that one so you want to display only the name okay so you can display this when
you when you log in you want to display the name that's all and also here this the most important
thing that's for the log out you know we is a form this is a PHP form so can see we there's
an action to account SL log out and remember then the API end point that we created the minimal API
I account SL logout the form what it is push so when it push the form it's going to return home
page isn't it going to return to the homepage yes so that's the log out and now once it get
the contest or the contest you can now sign out peacefully okay if I am not um authorized register
and login we have in there if I'm authorized then log out so with this we have to provide or maybe
you can say this is register this is log out this is login and that is all so let's have a register
and now login so this is a register we must provide the route this login from the register on
top so this is register okay so this is ready now now if I click on any page so for now don't
worry we're going to run this application and test it out first but before we test this app
we need to create a class that's going to H from the allate provider and that's going
to implement um the component State or the authentication state from the server okay
in the client so let's authentication we're going to add a class in here and now this
class going to be persistent Authentication State provider this has inher from the main
class that is out State provider we need to implement an abstract and that is the get
authentication State So within this we can have a default orate task so let's assign it on top
here then we going to check when a page is being called being rendered this method is
going to get fired that is the the instance of this so we need to create a property a
Constructor instance let's create Constructor for this one so generate Constructor okay so this is
our Constructor and now within the Constructor we going to specify this persistent component
State this is coming from the server Street and I contain the state of the user so in here we can
now check if the person is authenticated then we want to grab we want to create an instance
of this user info because this is what we are passing in so we have to get this as
an out variable okay and now if it is n then want to return return so we can just exclude
this and then make it just one line yes so if it is null then so if it is not now then we're
going to have this variable being um holding the values from the state then we can now create the
claims in here so we need to extract the claims so we have the username ID we have um the name
and on the email so after doing that then we need to call this aate and now we assign the
value to this this let me close this okay so we the a the authentication STX that we created
earlier on here you can see so um we are going to assign it to this because here we have a new
clim identity and that's a claim that is coming in okay so we assign it to this after assigning
what are we doing then lastly this method to get called which going to return authentication
State you see so we can now go ahead we can remove this con um the implementation
the class and now we are good to go so this is all that we need to do we get the claims
from here we assign them and then we pass on to the oate then we can now now tell the
state that yes we have what we need so please keep on okay very simple one so after doing
this you go to solution you go to program and now you need to register this in the
program so here we're going to register authorization call cascading upate then
we're going to add this as a single thing so authentication State provider then that's the
instance that we created now in here okay so that's all we need to do in here this now if
you are not authorized and want to access and authorize uh content we want to redirect you
okay to log in so when you check this from our route in here you can see that we added
this and this is the time for us to create a component we have to create that component in
here so in the pages let's add the new razor component Weir to login and now inside this
we need to inject our appdb content need inject a nav manager and now we want to navigate you
this only the login not the account so login slash and it's going to be the return URL so
we are passing into this right to the URL um to this lugin so we can actually remove all
this maybe in case we don't need this we can move it because I know using return URL for
now so all that you do here is navigate to login and now Force load very simple
one you see that good now let's save this so let's build the whole project again bu
solution so we have an issue here that we need to be fixed but could see it suceeded when you
click on this we need to include so to period let's add the reference okay let's test this
out yes we have an issue here because we have not added the token authentication Service that
is the let's see okay so that's identity so let's add it here so we services. add
authorization add authentication and we have to specify the default scheme and the default
signing scheme and now do add identic cookies you see that is this one now also let's check
from the register we did not create the UI you see this so we have to create the the UI and in
that it is just an edit form that we need to create which it's going to um have the form
for name email password and confirm password so here I'm going to past this this an edit
form and now it has this the input for email it has password it has confirm password okay
in that you know already that we have to create a string property to handle the an error in here to
display So within this you can have this string error in case we do have error but for now we
are not have we are not hand any error okay so we can just remove this up let's take out this
error if you want to manage your any the errors you can actually do that but we are not um doing
it now okay so this all we have a very simple one with a button as register and now we're
going to submit to this register user method now let's think let's run it again and then check it
out okay so the app is ready and now let's see we have a login and a register button in here
first of all you're going to register because you haven't register so let's c um next CoD up
that's the name as you know and here I'm going to use admin at admin password let me use admin at 1
2 3 admin at 1 23 click on register now let's see wow nothing happens but let's check it out
so from here I've opened the table if I refresh
this oh okay you see now we have it in here you see that is the name net code username and now
we have the noral usern name and the email okay so usern name and our name we have it now let's go to
login so if I click on login we have the email and password click on login and I can see we
have the email in here so since the names have appeared twice that is why it is taking the
first one and the first one I'm automatically it is an email address if you want to grab the
second one and that is the actual your name that we set then we have to look through the
claims and now we find out the names whereby going to have the results as two then we get
the last one let's see how to work on that to display not the email rather the name of the
authenticated person so go to our source code and now from here that's our na menu that's
where we are having this so we can rather use the next line so contest. user. claim. where
type is equal to our claim types. name and now when you make it first you're going to
have the email so that last going to give us the full name okay so let's re build this and
run it again and now let's check it out so you might see the email you might see the name as
well so let's log in again but before we log in you going click on this inspect element then
we go to the application so you can see from here the cookie we have no authentication in
here now click on login and now let's log in and let's watch it out and see what going to
happen in here yes so see we have an token that's a cookie token being up in here and
now you can see we have um admin at Gmail and no admin at admin and then we have net code Hub that
is the name isn't it if I click on log out what happens we see it is off and now this one is also
off let's create another account so this turn R is
going to be Fred then there going to be Fred at Fred password Fred at one
23 let's create the
account
okay now let's log
in okay so we are in now you see we have net code H Fred at Fred and it's supposed
to be Fredick but you're still having net code H you see this maybe let's
see why are you having the same net code when you go to the table
and now if you refresh this let's see what we have Okay so let's open this
again oh okay so it was let's go to up alleng we did we did not change it so let's this Fred
Rick okay so that is this one we can now save this and when we refresh the page let's see
what we're going to have since we change the database you must see I'm Fred in here okay
let's rebild this again and I'll test it out so I'll save this we run this okay and we have
Frederick
okay we still have this we're going
to around
this okay so let's log
in now let's wait and see you must see Fredick yeah that's what we have it let's log out let's
the account and maybe here we're going to say your name your name is your name so
u. U at1 23 U at three now we're going to create an account here
now you can see the name your name that is the name okay let's log
in let's see yes so you can see we have your name yeah this working okay so that is it
for this video we've seen how to create and consume this service authentication Service
using cie customize one in net a BL Las web app with interactive um web assembly render
mode I've made a video on the server mode and also how to use JWT token in the server
mode so if you want to check those out check the video description and you're
going to find it in there all right thank you so much for watching this and I believe
this is learned something and hopefully I'm going to catch up again so then take care
5.0 / 5 (0 votes)