Click here to Skip to main content
15,867,141 members
Articles / Web Development / Blazor

Getting Started with Authentication and Authorization using Blazor Server Side

Rate me:
Please Sign up or sign in to vote.
4.59/5 (6 votes)
18 Jun 2019CPOL6 min read 20.7K   371   15   4
In this article, we will see in detail how to use Authentication and Authorization using Blazor ServerSide application.

Introduction

The wait is over and yes, now we can add the ASP.NET Core Authentication and Authorization functions to Blazor application.

In this article, we will see in detail how to use Authentication and Authorization using Blazor ServerSide application, Yes, now you can directly use Authentication and Authorization for Blazor Server Side application. The new preview version of .NET Core 3.0 and Latest Visual Studio 2019 allows us to use the ASP.NET Identity to work with Blazor application.

Here, we will see how to:

  • Create Database in SQL Server and use it for ASP.NET Table creations
  • Display menu based on Authenticated and Authorized

Image 1

For non-authenticated and authorized members, display different menu:

Image 2

ASP.NET Identity allows us to add login functionality to our system. Here, in this demo, we will be using SQL Server to store the user details and profile data. We will use ASP.NET Identity for new user registration, login, and to maintain the user profile data. If we talk about the login, the important part is whether the logged in user is authenticated and also authorized to view the pages.

Authentication and Authorization

Authentication

Check for the Valid User. Here, the question is how to check whether a user is valid or not. When a user comes to a website for the first time, he/she will register for that website. All their information like username, password, email, and so on will be stored in the website database. When a user enters his/her userID and password, the information will be checked with the database. If the user has entered the same userID and Password as in the database, then he or she is a valid user and will be redirected to the website's home page. If the user entered UserID or Password that does not match the database, then the login page will give a message, something like “Enter valid Username or Password”. The entire process of checking whether the user is valid or not for accessing the website is called Authentication.

Authorization

Once the user is authenticated, they need to be redirected to the appropriate page by his/her role. For example, when an Admin is logged in, then she/he need to be redirected to the Admin Page. If an Accountant is logged in, then he/she needs to be redirected to his Accounts page.

Background

Make sure you have installed all the prerequisites in your computer. If not, then download and install them all, one by one.

Prerequisites

Image 3

Using the Code

Step 1: Create a Database

Firstly, we will create a database and set the connection string in appsettings.json file for DefaultConnection with our new database connection. We will be using this database for ASP.NET Core Identity table creation.

Create Database: Run the following script to create our database:

SQL
USE MASTER   
GO   
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB   
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'BlazorDB' )   
DROP DATABASE BlazorDB   
GO   
   
CREATE DATABASE BlazorDB   
GO   
   
USE BlazorDB   
GO  

After running the DB Script, we can see as the database has been created and tables have not yet been created.

Image 5

Step 2 - Create a Blazor Server Side

After installing all the prerequisites listed above and ASP.NET Core Blazor extension, click Start >> Programs >> Visual Studio 2019 >> Visual Studio 2019 on your desktop. Click New >> Project.

Image 6

Click on ASP.NET Core Web Application and click "Next".

Image 7

Enter your project name and click the "Create" button..

Image 8

Now, we can see that for ASP.NET Core 3.0 has been listed. We select the Blazor (Server Side) and then we click on Change Authentication to set our Authentication for our project.

Image 9

Here, we select the Individual User Account to store all our User details to SQL server.

Image 10

After creating ASP.NET Core Blazor application, wait for a few seconds. You will see the below structure in the Solution Explorer. Here, we can see pages folder which contains all our razor pages and Shared folder which is similar to our ASP.NET MVC shared folder which will contain the Navigation Menu page, MainLayout page for the content display and LoginDisplay page which will be used for new user register and login to the site .appsetting.json page is to set our db connection string.

Image 11

Updating appsettings.json

Image 12

In appsettings.json file, we can find the DefaultConnection Connection string. Here, in connection string, change your SQL Server Name, UID and PWD to create and store all user details in one database.

Image 13

Step 3: Register and Create Your First User

Now our Blazor web application is ready for users to register in our website and also users can log in to our system after registration. Build and run your application to register your first user.

Image 14

Click on the Register link to register our first User.

Image 15

Migration

When we click on the Register button, we can see the below page. Don’t panic with this page as for the first time we run it, we need to do the Migration, just click on the Apply Migrations button.

Image 16

We can see the confirmation as Migration Applied and then click on the Try refreshing the page message.

Image 17

Refresh the page and we can see the newly registered user has been logged in to our web site.

Image 18

We can also update the user details by clicking on the user name at the top of the site.

Image 19

Refresh the Database

When we refresh our database, we can see all the Identity tables have been created.

Image 20

Step 4: Displaying Menu by Authentication

Now let’s see how to show the menu for non-authenticated user and Authenticated users. For this, first we add an razor page and named it as Userpage like below.

Right click on the Pages folder and click add new Pages.

Image 21

Name it as Usepage and click Add.

Image 22

In the page, we just add an H1 tag and some text as you are not Loggedin.

Image 23

Hide and Show Menu by Authentication

Now we will show and hide the menu by user authentication and authorization. For doing this, first we open the menu page. You can see NavMenu.razor under Shared folder.

Image 24

Now we can see as by default 3 menu has been added as Home, Counter and Fetch data. We will show Counter and Fetch data menu only for the Authenticated and Authorized users.

And for non-authorized users, we will show our newly created Userpage. For this, here we will be using the code like below:

XML
<AuthorizeView>
            <Authorized>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="counter">
                        <span class="oi oi-plus" aria-hidden="true"></span> Counter
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="fetchdata">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                    </NavLink>
                </li>
            </Authorized>
            <NotAuthorized>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="NonUser">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> 
                        Non Authorized Menu
                    </NavLink>
                </li>
            </NotAuthorized>
        </AuthorizeView>

Here, we can see as we have used the <Authorizeview> tag,This tag is used to check for the user is authorized or not. Inside the < Authorizeview> tag, we used the <Authorized> tag for checking the user is Authorized and display the message, same like that use <NotAuthorized> tag to display for not authorized users. Here, we show and hide the menus based on Authorized and NotAuthorized.

Points of Interest

Firstly, create a sample BlazorDB Database in your SQL Server. In the appsettings.json file, change the DefaultConnection connection string with your SQL Server Connections. Here, we have used our needed database to store all the ASP.NET identity information, by this way, we can also create our other needed tables in the database and make relation to store user ids in needed tables.

History

  • 2019/06/19: BlazorAuth.zip

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

Comments and Discussions

 
QuestionThis doesn't even work. Pin
Member 138193195-Mar-20 20:49
Member 138193195-Mar-20 20:49 
PraiseWhat about Identity replacing ? Pin
Win32nipuh2-Jan-20 2:56
professionalWin32nipuh2-Jan-20 2:56 
QuestionAuthentication vs. Authorization Pin
dkurok19-Jun-19 3:46
dkurok19-Jun-19 3:46 
AnswerRe: Authentication vs. Authorization Pin
syed shanu19-Jun-19 12:55
mvasyed shanu19-Jun-19 12:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.