Getting Started With Authentication And Authorization Using Blazor Server Side

USE MASTER
GO

-- 1) Check for the Database Exists. If the database exists 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

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

After creating the ASP.NET Core Blazor application, wait for a few seconds. You will see the below structure in the Solution Explorer. Here, we can see the pages folder which contains all our razor pages and the 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 the LoginDisplay page which will be used for the new user register and login to the site .appsetting.json page is to set our database connection string.

Updating appsettings.json

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

Step 3. Register and create your first User.

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

Click on the Register link to register our first User.

Migration

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

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

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

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

Refresh the Database

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

Step 4. Displaying Menu by Authentication.

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

Right-click on the Pages folder and click "Add New Pages".

Name it as UsePage and click "Add".

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

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.

Now we can see as by default 3 menu has been added as Home, Counter and Fetch data. We will show the 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.

<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 if the user is authorized or not. Inside the < Authorizeview> tag we used the <Authorized> tag for checking if the user is Authorized and displayed the message, in the same way use <NotAuthorized> tag to display non-authorized users. Here we show and hide the menus based on Authorized and NotAuthorized.

Conclusion

Firstly, create a sample BalzorDB 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. In this way, we can also create our other needed tables in the database and make relations to store user ids in needed tables.