In this article, we will implement AspNetCore Identity Authentication into an existing Blazor Server app.
(3) Now install 'Microsoft.EntityFrameworkCore.Design' Package.
After a successful scaffold, we can observe a few major changes to our project.
(2)Inside of 'Areas\Identity\Data' Identity Database context has been created like 'IdenitityDataContext'.
(3) In the 'Program.cs' file we can observe 'AddDbContext', 'AddDefaultIdentity', 'AddRazorPages()' services got registered.
Microsoft AspNetCore Identity Library:
AspNetCore Identity:
- Built-in login functionality library that supports authentication of all different .NET applications.
- Provides rich authentication UI pages and customizable as well.
- Adoptable for external authentication providers like 'Google', 'Facebook', 'Outlook'.
- Can be integrated with other authentications like 'IdentityServer4', 'Azure Active Directory', 'Azure Active Directory B2C(Azure AD B2C)'.
Blazor Server Project With No Authentication:
Our goal is to implement the AspNetCore Identity Authentication manually into an existing Blazor Server application(the project doesn't have authentication). So to accomplish our demo let's create a Blazor server application without any authentication.
We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor.
CLI command
dotnet new blazorserver -o Your_Project_Name
dotnet new blazorserver -o Your_Project_Name
Install Required Packages For AspNetCore Identity Authentication:
(1) Install the scaffolder globally into your system if it is not installed(This step is only for CLI users if using visual studio 2022 no need to run the below command).
dotnet tool install -g dotnet-aspnet-codegenerator
(2) Now install 'Microsoft.VisualStudio.Web.CodeGeneration.Design' package.
.Net CLI Command
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 6.0.1
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 6.0.1
Package Manager Command
Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design -Version 6.0.1
Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design -Version 6.0.1
.Net CLI Command
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.1
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.1
Package Manager Command
Install-Package Microsoft.EntityFrameworkCore.Design -Version 6.0.1
Install-Package Microsoft.EntityFrameworkCore.Design -Version 6.0.1
(4) Now install 'Microsoft.EntityFrameworkCore.SqlServer' Package. To support SQL database communication with entity framework core.
.Net CLI Command
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.1
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.1
Package Manager Command
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 6.0.1
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 6.0.1
(5) Now install 'Microsoft.EntityFrameworkCore.Tools' Package. This package helps to enable commands like 'Add-Migration', 'Scaffold-DbContext', 'Update-Database' etc.
.Net CLI Command
dotnet add package Microsoft.EntityFrameworkCore.Tools --version 6.0.1
dotnet add package Microsoft.EntityFrameworkCore.Tools --version 6.0.1
Package Manager Command
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 6.0.1
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 6.0.1
(6) Now install 'Microsoft.AspNetCore.Identity.EntityFrameworkCore' Package(Asp.NetCore Identity Provider that uses Entity Framework Core).
.Net CLI Command
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 6.0.1
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 6.0.1
Package Manager Command
Install-Package Microsoft.AspNetCore.Identity.EntityFrameworkCore -Version 6.0.1
Install-Package Microsoft.AspNetCore.Identity.EntityFrameworkCore -Version 6.0.1
(7) Now install 'Microsoft.AspNetCore.Identity.UI' Package.(Asp.NET Core Identity UI is the default Razor Pages built-in UI for the ASP.NET Core Identity).
.Net CLI Command
dotnet add package Microsoft.AspNetCore.Identity.UI --version 6.0.1
dotnet add package Microsoft.AspNetCore.Identity.UI --version 6.0.1
Package Manager Command
Install-Package Microsoft.AspNetCore.Identity.UI -Version 6.0.1
Install-Package Microsoft.AspNetCore.Identity.UI -Version 6.0.1
Scaffold Asp.NET Core Identity:
To set up an identity with the default UI and the minimum number of files run the following command.(Visual Studio 2022 can easily scaffold through UI options no need to run the following command).
dotnet aspnet-codegenerator identity --useDefaultUI
After a successful scaffold, we can observe a few major changes to our project.
(1) The 'Areas\Identity' folder create, so here we can add any files that can override the default structure of the ASP.NET Core Identity.
Additional Configurations:
Now we have to update our project with a few more manual changes for enabling successful identity authentication.
(1)Instead of manually writing all the code, let's do smart work where we can update more fastly without any errors. So now let's create one more Blazor Server application with authentication enabled, we will call this project 'Lookup-Project' in our demo. So we can copy the required authentication code from this 'Lookup-Project'.
CLI command
dotnet new blazorserver -o Your_Project_Name -au Individual
dotnet new blazorserver -o Your_Project_Name -au Individual
(2) Now add 'app.UseAuthorization()' middleware next to the 'app.UseAuthentication()' middleware.
(3) In 'Lookup-Project' copy all content of the 'App.razor' into our actual project. So in 'App.razor' component, we can observe 'CascadingAuthenticationState' is a parent component that will provide authenticated user information to the Blazor component.
(4) Now copy the file 'Shared/LoginDisplay.razor' and paste it into the same destination in our actual project.
Now add the 'LoginDisplay.razor' into the 'MainLayout.razor'.(5)Now copy the 'Areas\Identity\Pages\Account\LogOut.cshtml' & 'Areas\Identity\Pages\Shared\_LoginPartial.cshtml' files from 'Lookup-Project' and paste it into the same destination in our actual project.
(6) Now copy the 'Areas\Identiy\RevalidatingIdentityAuthenticationStateProvider.cs' and Paste it into the same destination in our actual project, and change the class namespace also.
Next register the 'RevalidatingIdentityAuthenticationStateProvider' in 'Program.cs'
Migration To Update SQL Database:
(1) Let's update the database connection string to "IdentityDataContextConnection" in the 'appsettings.json' file.
(2) The 'Asp.NET Core Identity' library had default authentication table entities like 'IdentityUsers', 'IdentityClaims', 'IdentityRoles'. On adding migration identity generate authentication table script.
Migration Add Command:
dotnet ef migrations add Your_migration_Name_It_Can_be_anything
dotnet ef migrations add Your_migration_Name_It_Can_be_anything
Migration Update Command:
dotnet ef database update
dotnet ef database update
After the update migration command ran, we can observe Identity authentication tables get created.
Test Authentication:
(1) Now run the application and click on the registration button and then complete the user registration.
(2)Now try to login into the application.
(3) After successful authentication, you can observe that Asp.Net Core Identity is a cookie-based authentication.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on Implementing AspNetCore Identity Authentication into an existing Blazor Server app. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment