In this tutorial we will see how to configure an ASP.NET Core 3.1 web application with AngularJS SPA as front end and Secure User membership implementation using Identity Server 4 on PostgreSQL database.
Full Source Code of this tutorial is available here
- Install PostgreSQL
- Update Visual Studio 2019 with .NET Core 3.1
- What Next ?
- Using Identity Server 4 on PostgreSQL database
- Create ASP.NET Core 3.1 Angular application with Individual User Accounts
- Delete Migrations directory
- Update Connection string
- Update Dependencies
- Update Startup.cs
- Update malformed .csproj file
- Install Angular CLI
- Add-Migration scripts
- View the PostgreSQL Database Created based on EntityFrameworkCore and Migration Command
- Build the solution ( Ctrl + Shift + B )
- Run the application
- Access non-authenticated page
- Access authenticated page
- Manage Profile
- Check registered users in database.
- Video Tutorial
- Visual Studio 2019 (Community/Professional/Enterprise Edition) v16.4.0 or higher
- PostgreSQL Database Server installed. Version 11 or Higher
- Install PostgreSQL on Windows PC
- A browser preferably Chrome, Firefox or IE 11 or higher
- PgAdmin to access PostgreSQL Server Database
- Windows 10 PC
First, we will install PostgreSQL on your PC or access remote PostgreSQL database.
To install PostgreSQL on your Windows 10 PC, check this video that details on how to install and configure PostgreSQL 11 on your Windows 10 PC.
Once the installation is done, launch pgAdmin. We will revisit the pgAdmin dashboard once the setup is completely done and a database with Asp.Net Core 3.1 membership authentication related schema will appear here.
Update Visual Studio 2019 with .NET Core 3.1
To get latest .NET Core 3.1, for that open Visual Studio Installer and update the installer itself if it prompts for an update. Update your Visual Studio 2019 to have .NET Core 3.1.
Now Click on update your Visual Studio to the version 16.3.10 or later. You can do this on community edition too and ensure you have .Net Core 3.1 version installed which got released in December 2019
What Next ?
Using Identity Server 4 on PostgreSQL database
Now lets create an ASP.NET Core 3.1 application that will talk to this PostgreSQL database. We will configure the creation of the ASP.NET Core application to have Authentication at the Individual User Accounts. And then we generate migration scripts that will dump the authentication related tables in to the database.
Create ASP.NET Core 3.1 Angular application with Individual User Accounts
Now launch the Microsoft Visual Studio 2019 IDE. From the Get Started section, select the option to Create a new project.
Look for and select the ASP.NET Core Web Application and click on Next to proceed.
Give Project name and location of your choice.
For example, name the project ASPNET-Core3-Angular-PostgreSQL-Authentication and click Create.
In the Create a new ASP.NET Core web application step, choose Angular template. Because we want our application to have an Angular based front-end. You may also choose React.js, Web Application to has ASP.NET razor Pages or Web Application (Model-View-Controller).
Now in the right pane click on Change hyperlink under Authentication label to configure our application to have Individual User Accounts and click on OK.
Now click on Create.
Now this template configuration will generate all the code related to Authentication that involves Migration Schema that will generate tables for users, roles, claims, logins etc.,
The template also has angular screens automagically generated for Register, Login, Forgot Password, Login Menu.
This scaffolded template eases the developer to focus on the application functionality rather than setting the user authentication from scratch.
Delete Migrations directory
As the default database this template is configured to work with is MSSQL, we want to change this to work with PostgreSQL.
For that, delete the Migrations directory which has MSSQL related migration schema that is located under the Data directory.
Update Connection string
Also update the default connection string present in
appsettings.json to point to the local or remote PostgreSQL database.
For local PostgreSQL server, the connection string goes like
Now remove the reference to Microsoft.EntityFrameworkCore.SqlServer which is located under Dependencies -> Packages
As we want to configure our application to target PostgreSQL instead of MSSQL.
In the solution explorer, navigate to Dependencies -> Packages right-click on
Microsoft.EntityFrameworkCore.SqlServer and remove.
Now install PostgreSQL package for EntityFrameworkCore.
To do that right click on the project ASPNET-Core3-Angular-PostgreSQL-Authentication in the solution explorer and click Manage NuGet Packages…
This will open up a window to manage the Nuget packages for our project.
Now navigate to Browse menu, search for
Npgsql.EntityFrameworkCore.PostgreSQL and from the version selector choose the latest stable version 3.1.0 and Install
Click on OK for the Preview Changes prompt.
Ensure that all the dependent packages are having version compatibility with .NET Core 3.1
Now open Startup.cs file and locate ConfigureServices method.
Find and replace UseSqlServer with UseNpgsql in order to point our DbContext to our PostgreSQL database.
Also set the lambda expression options.SignIn.RequireConfirmedAccount to false. This will disable the requirement to the registered users to confirm their email before they could login. This setting is suitable for development purposes only. And do not forget to enable it to true once you have email server configured for the customer facing applications.
Update malformed .csproj file
Now open the .csproj file of ASPNET-Core3-Angular-PostgreSQL-Authentication and ensure the execution commands are properly written. If you see repeated double hyphens like
npm run build -- --prod and npm run build:ssr -- --prod
then change it to
npm run build --prod and for ssr npm run build:ssr --prod
Install Angular CLI
Now install angular cli. For that in the search box at the top of IDE type developer command prompt and open it.
It will open up a command prompt window with current directory defaulted to project’s root directory.
Now set the current directory to ClientApp with the command
and then run the command to install Angular CLI
npm install --save-dev @angular/cli@latest
This will install latest version of angular cli and saves it as dev dependency in the
package.json located in ClientApp directory. This operation will take a while.
Now we will generate PostgreSQL based migrations schema.
Open the Package Manager Console by navigating to
Tools -> Nuget Package Manager -> Package Manager Console
Type in the command
This will generate Migrations directory adjacent to Data directory.
Migrations directory will have two c-sharp files named datetimestamp_migrationname.cs to create identity schema
and ApplicationDbContextModelSnapshot.cs that has the snapshot of the models that get migrated with this schema.
Now that we have migration schema with asp.net core 3.1 Authentication auto-generated for PostgreSQL, let’s update our newly created database aspnetmembership to have the tables created related to authentication.
For that run the following command to create or update database migration
This command will create a database named aspnetmembership which is configured in the connection string located in
Based on the auto-generated schema located in Migrations directory, the asp.net core 3.1 membership tables will be created in the aspnetmembership database.
View the PostgreSQL Database Created based on EntityFrameworkCore and Migration Command
To view the new database created, go to pgAdmin refresh the Databases node that is present under Servers -> PostgreSQL 11
You will find the new database named aspnetmembership created by the update-database migration command.
Look for the tables node present under Schemas node of the aspnetmembership database.
Build the solution (
Now in Visual Studio 2019 IDE, go to build menu and click on the Build Solution. This process will take a while as we are building the solution for the first time.
For the first time all the dependent packages for the front-end angular app will be downloaded in the node modules directory and then the entire solution will be built.
Run the application
Click on the dropdown next to Run button and select your favorite browser from which you want to launch the web app. Let’s proceed with chrome.
Now click on the IIS Express and wait for the application to open in default browser configured for your PC.
You can notice the Default home page with navigation menu having links for Register and Login pages.
Access non-authenticated page
The Counter navigation menu item is a non-authenticated page. Lets click on it to access it.
Access authenticated page
The Fetch Data navigation menu item is an authenticated page. As we have not yet registered, clicking on Fetch data menu will redirect the page to login.
In order for users to login, they must be registered.
So navigate to registration page and provide email, password and then provide confirm password.
Click on Register. Next click on login.
As we disabled email confirmation for registered users, clicking on login will automatically redirect us to the authenticated app.
Now that we are authenticated, click on Fetch data and you will be shown the default dummy weather data which is an authenticated page.
Notice the email in the navigation menu, click on it to customize your profile, change email, password and also an option to download all the personal data.
Click on Logout and you will see the navigation menu shows Register and Login links.
Check registered users in database.
Now in order to check the registered users in the PostgreSQL database,go back to pgAdmin and
expand the nodes aspnetmembership -> Schemas -> Tables right-click on AspNetUsers table and select the option View/Edit Data.
You will notice the user entry with the details we registered with.
You can follow along with this video tutorial if you have following prerequisites or you can just have a watch.