In this tutorial we will see how to configure an ASP.NET Core 3.1 web application with AngularJS SPA as front end and PostgreSQL as database with Secure User membership implementation using Identity Server 4.
You can follow along with this video tutorial here (http://bit.ly/2EkotL5) as it is step by step detail providied you have following PreRequisites satisfied.
PreRequisites:
Visual Studio 2019 (Community/Professional/Enterprise Edition) v16.4.0 or higher
PostgreSQL Database Server installed. Version 11 or Higher
How to install PostgreSQL on Windows PC http://bit.ly/2LYxk9z
A browser preferrably Chrome, Firefox or IE 11 or higher
PgAdmin to access PostgreSQL Server Database
Windows 10 PC
Install PostgerSQL
Install PostgerSQL on your PC or access remote PostgerSQL db.
To install PostgerSQL on your Windows 10 PC, check out the link in the description below that details on how to install and configure PostgerSQL 11 on your Windows 10 PC.
Once the installation is done, Open pgAdmin
Once the setup is completely done a database with asp.net core3.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 and then update your Visual Studio to have .NET Core 3.1.
Now Click on update your Visual Studio to the version 16.3.10. 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 ?
Now lets create an ASP.NET Core 3.1 application that will talk to this PostgerSQL 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-1-Angular-PostgreSQL-Identity-Server 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 the 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 PostgerSQL.
For that, delete the Migrations directory which has MSSQL related migration schema that is located under the Data directory.
Update Connection string to point to PostgreSQL Database
Also update the default connection string present in appsettings.json to point to the local or remote PostgerSQL database. For local PostgerSQL server, the connection string goes like
Server=localhost;Port=5432;Database=aspnetmembership;User Id=postgres;Password=mysupersecret!
Update Dependencies
Remove Microsoft.EntityFrameworkCore.SqlServer
Now remove the reference to Microsoft.EntityFrameworkCore.SqlServer which is located under Dependencies -> Packages
As we want to configure our application to target PostgerSQL instead of MSSQL.
In the solution explorer, navigate to Dependencies -> Packages right-click on Microsft.EntityFrameworkCore.SqlServer and remove.
Now install PostgerSQL package for EntityFrameworkCore.
To do that right click on the project ASPNET-Core3-1-Angular-PostgreSQL-Identity-Server in the solution explorer and click on 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 compatiability with .NET Core 3.1
Update Startup.cs
Now open Startup.cs file and locate ConfigureServices method.
Find and replace UseSqlServer with UseNpgsql in order to point our DbContext to our PostgerSQL database.
Also set the lamba 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-1-Angular-PostgreSQL-Identity-Server and ensure the execution commands are properly written. If you see repeated double hypens like npm run build -- --prod and npm run build:ssr -- --prod 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
cd ClientApp
and then run the command
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.
Add-Migration scripts
Now we will generate PostgerSQL based migrations schema.
Open the Package Manager Console by navigating to
Tools -> Nuget Package Manager -> Package Manager Console
Type in the command
add-migration PostgreSQLIdentitySchema
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.
Update-Database
Now that we have migration schema with asp.net core 3.1 Authentication aut-generated for PostgerSQL, lets create our new database aspnetmembership to have the tables created related to authentication.
For that run the command
update-database
This command will create a database named aspnetmembership which is configured in the connection string located in appsettings.json
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.
To view the new database created, go to pgAdmin refresh the Databases node that is present under Servers -> PostgerSQL 11
You will find newly created aspnetmembership database.
Look for the tables node present under Schemas node of the aspnetmembership database.
Build the solution
Now in Visual Studio 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. Lets 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.
Register
So navigate to registeration 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.
Manage Profile
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.
Logout
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 PostgerSQL 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.
Latest comments (0)