by In this part, we would be setting up the authentication, authorization, user login, registration and profile. We will cover the following here:
- Setup the Layout Page
- Setup the ASP.Net Core Identity
- Complete the Startup Configuration
- Customize the Login and Registration Layout
- Update Database Connections
- 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:
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.
