JavaScript Frameworks

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. Full Source Code of this tutorial is available here Install PostgreSQL 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 ? 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 proceedGive 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 Server=localhost;Port=5432;Database=aspnetmembership;User Id=postgres;Password=121212 Update Dependencies Remove Microsoft.EntityFrameworkCore.SqlServer Now remove the reference to Microsoft.EntityFrameworkCore.SqlServer which is located under Dependencies -> PackagesAs 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 InstallClick on OK for the Preview Changes prompt. Ensure that all the dependent packages are having version compatibility 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 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 cd ClientApp 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. Add-Migration scripts Now we will generate PostgreSQL based migrations schema.Open the Package Manager Console by navigating toTools -> Nuget Package Manager -> Package Manager ConsoleType 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 schemaand 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 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 update-database This command will create a database named aspnetmembership which is configured in the connection string located in appsettings.jsonBased 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 ( Ctrl + Shift + B ) 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. Register 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. 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 PostgreSQL database,go back to pgAdmin andexpand 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. Video Tutorial You can follow along with this video tutorial if you have following prerequisites or you can just have a watch. PreRequisites Visual Studio 2019 (Community/Professional/Enterprise Edition) v16.4.0 or higherPostgreSQL Database Server installed. Version 11 or HigherInstall PostgreSQL on Windows PCA browser preferably Chrome, Firefox or IE 11 or higherPgAdmin to access PostgreSQL Server DatabaseWindows 10 PC