Angular v5 Single Page Application with an ASP.NET Core Web API that uses token authentication. The OAuth 2.0 Resource Owner Password Credentials grant (ROPC) is implemented using IdentityServer4 and ASP.NET Core Identity as membership system with a SQLite database.

Get the Changelog.

Live example and its explanation.

Links

• IdentityServer4 | Protecting an API using Passwords
• ASP.NET Core - Security | Role based Authorization

ROPC grant requires the use of SSL.

For more complex scenarios, where web services are required by more than one application or third-party applications, you should use an OpenID Connect flow.

Links

• IDENTITYSERVER4, WEB API AND ANGULAR IN A SINGLE ASP.NET CORE PROJECT

The same scenarios are also supported by AspNet.Security.OpenIdConnect.Server and openiddict-core.

Links

• Creating your own OpenID Connect server with ASOS

AngularSPAWebAPI ASP.NET Core Web API project

• wwwroot Root for Angular application deployment
• app Angular application
• Controllers
  • IdentityController.cs Identity APIs
  • ValuesController.cs Resources APIs
• Data Entity Framework migrations
  • DbInitializer.cs Provides method to populate the db
• Models
  • ApplicationUser.cs Profile data for application users
• Config.cs IdentityServer4 configuration
• IdentityDB.sqlite SQLite database
• package.json Packages for Angular app
• Startup.cs Web API configuration
• tsconfig.json & tsconfig-aot.json TypeScript & ngc compiler options
• webpack.config.js Webpack configuration file for development & production of Angular app

• Requirements
  • At least .NET Core 2.0
  • At least node 6.9 and npm 4
• Edit ConnectionStrings in appsettings.json

• Make sure your configuration for external tools is correct: Tools > Options > Projects and Solutions > Web Package Management > External Web Tools

   .\node_modules\.bin $(PATH) ... 

• Wait for packages restoring and build the solution

Go to the AngularSPAWebAPI project folder:

• npm install
• Restore & build the solution:

   dotnet restore dotnet build

To run npm commands in Visual Studio you can use NPM Task Runner extension.

For the Angular app, we use JiT compilation, with source maps & Hot Module Replacement.

• Start debugging

• Set Development as environment variable: Working with multiple environments
• dotnet watch run: Developing ASP.NET Core apps using dotnet watch

Make the changes: the browser will update without refreshing.

For the Angular app, we use AoT compilation, tree shaking & minification.

• npm run build
• Use AngularSPAWebAPI profile that has Staging as environment variable
• Start debugging

• npm run build
• Set Staging as environment variable
• dotnet run

• Package Manager Console

   Add-Migration [Name] -OutputDir Data/Migrations Update-Database

• .NET Core CLI

   dotnet ef migrations add [Name] -o Data/Migrations dotnet ef database update

To use another database:

• Edit ConnectionStrings in appsettings.json
• Edit in Startup.cs:

services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));

• Navigate to http://localhost:5000/swagger/v1/swagger.json to see the document generated that describes the endpoints
• Swagger UI can be viewed by navigating to http://localhost:5000/swagger

To test the APIs, remove the policy from controllers.

MIT