Build a Complete App with ASP.Net, C#, SQL Lite – Part 8

In this part, we would be setting up  the authentication, authorization, user login, registration and profile. We will cover the  following here:

  1. Setup the Layout Page
  2. Setup the ASP.Net Core Identity
  3. Complete the Startup Configuration
  4. Customize the Login and Registration Layout
  5. Update Database Connections
  6. Add the Migration

 

1. Setup the Layout Pages

Remember that we already have a layout page for our application which contains the navigation sidebar and other components. However, we would like to have a different layout for these pages:

  • Login page
  • Registration Page
  • Password Reset Page

The reason for this is because these pages should be accessible without any authentication. So they don’t contain the sidebar  or header. You can check them out from the original template we downloaded.

Follow the steps below to set up the Layout:

Step 1 – Create a new layout page in the Shared folder by duplicating the _Layout.cshtml page. Name it _LayoutLogin.cshtml

We would later customize this page using the Login.html page from out downloaded template.

 

2. Setup ASP.NET Core Identity

Follow the steps below to add ASP.NET Core Identity:

Step 1 – Right-click on your project and choose Add > New Scaffolded Item

Step 2 – In the Window that appears, Choose Identity and click Add

Step 3 – In the selections, check Account/Login, Logout, Register, ResetPassword as AccessDenied. See the figure below. Also check ‘Use SQL Lite instead of SQL Server’

Step 4 – In the Layout selected at the upper section of the page, click and select the _LayoutLogin.cshtml we created earlier.

Step 5 – In the Add Identity Window, click on the + sign to add a new Context. Repeat to add a new User class.

The final window with all the selections is shown below:

Add Identity Selection for Login and Register
Add Identity Selection for Login and Register

 

Step 6 – Click on Add

After a few seconds, the Identity is successfully added to the application. So if you look at the solution explorer, you will see a new folder called Areas. This contains all the necessary artifact for user identity as selected.  Expand and check the content of this folder.

 

3. Complete the Startup Configuration

There are a few more configuration we have to make to enable authentication in our application. Follow the steps:

Step 1 – Open the Startup.cs file. In the ConfigureServices method add the support for Razor page like so:

services.AddRazorPages();

 

Step 2 – In the Configure method, enable useAuthentication() just before the useAuthorization() line

app.UseAuthentication();

 

Step 3 – Inside useEndpoints call, added the following:

endpoints.MapRazorPages();

 

At this point you can launch the application and visit /identity/account/login. You will see the login page. Do same for registration.

 

4. Customize the Login and Registration Pages

First, we would now use the Login.html page to customize the LoginLayout.cshtml page. Follow the steps below:

Step 1 – Open the LoginLayout.cshtml page and delete the header and the sidebar.

Step 2 – Open the Register.cshtml page,  and delete the second column. Next, change the first column class to col-md-12.

Step 3 – Repeat Step 2 for the Login.cshtml page

Step 4 – Copy the content of the <body> section from the register.html (without the scripts section) to the body section of the LoginLayout.cshtml.

Step 5 – Delete the <form> section and in it’s place add the @RenderBody. Now, you’re done with the register page.

Step 6 – Add background images to the pages using the code below in the <body> tag of the _LayoutLogin.cshtml. You can find the image bg-login3.jpg in my Github repo. You should place it inside the wwwroot/assets/img directory.

<body style="background-image: url('/assets/img/bg-login3.jpg'); 
background-repeat: no-repeat; 
background-size:cover">

You can now do some testing to make sure it displays correctly.

 

5. Update Database Connection

We would have to allow the the AuthContext to use the existing database connection. To do this, follow the steps:

Step 1 – Open the IdentityHostingStartup.cs file and change the name of the connection string to the HospitalConnectionString

Step 2 – Open the appSettings.json file and delete the AuthContextConnection

 

6. Add Database Migration

We would like to database tables for user to be created for us. We would also want  to have some initial user database added to the database. Remember Seeders from Part 4? Now, let’s do this.

Step 1 – First open the Package Manager console and run the following command to add the migration for the AuthContext

add-migration AuthData -Context AuthContext

If this code executes successfully, you can check inside the Migrations folder, you’ll see a new folder called Auth and new migration created inside.

Step 2 – Now run the following command to update the database:

Update-Database -Context AuthContext

 

Step 3(Optional) – To enable migration at startup:  open the WebHostExtensions.cs file and modify it adding the following two lines:

var authContext = services.GetRequiredService<AuthContext>();
authContext.Database.Migrate();

At this point, you can launch the application. If it works successfully, great! You can stop it and check the database. You’ll see that new tables have been created.

Also try to register a new user to see the confirmation. However, there still much to be done. So let’s move on to the next part.

Admin bar avatar

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published. Required fields are marked *