015 Preparing projects for application launch - chempkovsky/CS82ANGULAR GitHub Wiki

• additional packages
  • package for mssql server
  • package for mysql server
  • package for PostgreSQL server
• appsettings json file
  • appsettings for MsSql server
  • appsettings for MySql server
  • appsettings for PostgreSQL server
• Program csharp file
  • ConfigurationManager
  • Dbcontext definition
    • for mssql server
    • for mysql server
    • for PostgreSQL server
  • Adding Cors

• AppConfig json
• Folders to generate the Angular componets
• Security is disabled by default
• Loading AppConfig json file before bootstrap app

• In this article, we will consider configuring only one DbContext, which corresponds to PhBkConnection-connection string. Other DbContexts we will configure later.
• In the current configuration, security will be disabled. We will enable security later.
• In the current configuration, JwtBearer will be disabled. We will enable JwtBearer later.

• to add required packages run cmd and execute the commands

C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>

using command prompt execute the command

dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.EntityFrameworkCore.SqlServer

using command prompt execute the command

dotnet add PhBkWebApp/PhBkWebApp.csproj package Pomelo.EntityFrameworkCore.MySql

using command prompt execute the command

dotnet add PhBkWebApp/PhBkWebApp.csproj package Npgsql.EntityFrameworkCore.PostgreSQL

• appsettings.json-file will be used to setup Database connection strings and JWT-settings
• we assume that you have already installed MsSql(or/and MySql, or/and PostgreSQL) in your local network or virtual environment.

• suppose
  • The name of MsSql server is SVR2016SQL2017
  • the password of sa-user is my_Password_here
• At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
  • for the PhoneBook tables (PhBkConnection-connection string)
  • for AsbNet standard security (AspNetConnection-connection string). It's a role based implementation, where each Web Api method is protected with Role-attribute.
  • for security extension used by Angular-part of the App (AuthConnection-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View + Role + Permission bitmask).
• JWT-section is for configuring jwtbearer-authentication

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "PhBkConnection": "Data Source=SVR2016SQL2017;Initial Catalog=PhBkDbDef;Persist Security Info=True;User ID=sa;Password=my_Password_here"
  },
  "JWT": {
    "ValidAudience": "PhBkAudience",
    "ValidIssuer": "PhBkIssuer",
    "Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
  }
}

• suppose
  • The IP-address of MySql server is 192.168.100.3
  • The port of MySql server is 3306
  • the name of the root user is rt
  • the password of rt-user is myPss@wrd
• At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
  • for the PhoneBook tables (PhBkConnection-connection string)
  • for AsbNet standard security (AspNetConnection-connection string). It's a role based implementation, where each Web Api method is protected with Role-attribute.
  • for security extension used by Angular-part of the App (AuthConnection-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View + Role + Permission bitmask).
• JWT-section is for configuring jwtbearer-authentication

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "PhBkConnection": "Server= 192.168.100.3;Port=3306;Database=PhdctDbDef;User Id=rt;Password=myPss@wrd"
  },
  "JWT": {
    "ValidAudience": "PhBkAudience",
    "ValidIssuer": "PhBkIssuer",
    "Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
  }
}

• note
  • After installing MySql, by default, root-user has permission to connect to the server from the localhost only. To overcome this limitation we have created another user with a script shown below:

CREATE USER 'rt'@'%' IDENTIFIED BY '*********';
GRANT ALL PRIVILEGES ON *.* TO 'rt'@'%' WITH GRANT OPTION;

• suppose
  • The IP-address of PostgreSQL server is 192.168.100.3
  • The port of PostgreSQL server is 5432
  • the name of the root user is postgres
  • the password of postgres-user is myPss@wrd
• At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
  • for the PhoneBook tables (PhBkConnection-connection string)
  • for AsbNet standard security (AspNetConnection-connection string). It's a role based implementation, where each Web Api method is protected with Role-attribute.
  • for security extension used by Angular-part of the App (AuthConnection-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View + Role + Permission bitmask).
• JWT-section is for configuring jwtbearer-authentication

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {

    "PhBkConnection": "Server=192.168.100.3;Port=5432;Database=PhdctDbDef;User Id=postgres;Password=myPss@wrd"
  },
  "JWT": {
    "ValidAudience": "PhBkAudience",
    "ValidIssuer": "PhBkIssuer",
    "Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
  }
}

• in the Program.cs-file of the PhBkWebApp-project
  • right after the line of code

var builder = WebApplication.CreateBuilder(args);

we declare configuration-variable as follows

#region configuration
ConfigurationManager configuration = builder.Configuration;
#endregion

• At the begging of the Program.cs-file of the PhBkWebApp-project add the lines of code

using Microsoft.EntityFrameworkCore;
using PhBkContext.PhBk;

After declaration of configuration-variable add the lines of code

#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
    options.UseSqlServer(configuration.GetConnectionString("PhBkConnection")));
#endregion

After declaration of configuration-variable add the lines of code

#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
    options.UseMySql(configuration.GetConnectionString("PhBkConnection")), ServerVersion.AutoDetect(configuration.GetConnectionString("PhBkConnection"))));
#endregion

After declaration of configuration-variable add the lines of code

#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
    options.UseNpgsql(configuration.GetConnectionString("PhBkConnection")));
#endregion

• In the Program.cs-file of the PhBkWebApp-project right BEFORE the line

var app = builder.Build();

add the lines of code

builder.Services.AddCors(options => {
    options.AddDefaultPolicy(
        builder => {
            builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
        });
});

• In the Program.cs-file of the PhBkWebApp-project right AFTER the line

var app = builder.Build();

add the lines of code

app.UseCors();

• Open the file Properties/launchSettings.json of the PhBkWebApp-project to get the port of the WebApi under "profiles":"PhBkWebApp":"applicationUrl"-var copy http (or https) port (BUT NOT BOTH) and use it to define webApiUrl-var of the src/assets/app-config.json-file of the Angular project.

• for instance, having Properties/launchSettings.json of the PhBkWebApp-project

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:9904",
      "sslPort": 44331
    }
  },
  "profiles": {
    "PhBkWebApp": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      "applicationUrl": "https://localhost:7163;http://localhost:5165",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

• we should modify src/assets/app-config.json-file as follows:

{
  "webApiUrl": "http://localhost:5165",
  "securityUrl": "https://localhost:7229/",
  "permissionWebApi": "https://localhost:7229/"
}

• so webApiUrl of src/assets/app-config.json is equal to "profiles":"PhBkWebApp":"applicationUrl"

• Under the src/app-folder of the Angular project we create two subfolders:
• src/app/componets to generate the Angular components and interfaces
• src/app/services to generate the Angular services

• open the file src/app/shared/services/app-glbl-settings.service.ts. There two methods getDashBrdMask and getViewModelMask

 getDashBrdMask(dshBrd: string): number {
   return 1; // delete this line when dshBrds is ready
   ...
 }

 getViewModelMask(vwModel: string): number {
   return 31; // delete this line when vwModels is ready
   ...
 }

• to load src/assets/app-config.json the following service is used
  • src/app/shared/services/app-config.service.ts
• since this service is loaded before the application bootstrapped, it has constructor as follows

  constructor (private injector: Injector) { }

• we will modify the body of src/app/shared/services/app-config.service.ts-service and src/assets/app-config.json-data file later as the number of application's Urls becomes more than 3.