veneMarcos/AngularSPAWebAPI

Angular Single Page Application with an ASP.NET Core Web API that uses token authentication

Angular SPA Web API

Angular 2+ Single Page Application with an ASP.NET Core Web API that uses token authentication. The Resource Owner Password Credentials grant (ROPC) OAuth2 flow is implemented using IdentityServer4, Identity as membership system and claims based authorization with a SQLite database.

Get the Changelog.

Live example and its explanation.

Links

• Talk to a remote server with an HTTP Client
• angular2-jwt
• IdentityServer4 | Protecting an API using Passwords
• ASP.NET Core - Security | Claims-Based Authorization

For more complex scenarios, where web services are required by more than one application or third-party applications, you should consider to 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

Project structure

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
• Models
  • ApplicationUser.cs Profile data for application users
• Services
  • DbService.cs Provides method to populate the db
• build.js Angular app building process for production
• 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

Installing

• Use Visual Studio 2017 (VS 2015 code) and the latest Visual Studio Tools: https://www.microsoft.com/net/download/core
• Edit ConnectionStrings in appsettings.json
• Wait for packages restoring and build the solution
• Start debugging

Editing

Changing db

To use another database simply:

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

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

Changing the Angular app

Before running the following commands, make sure your configuration for external tools is correct:

• Tools > Options > Projects and Solutions > Web Package Management > External Web Tools:

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

and that you have the latest version of npm:

npm install npm@latest -g

From the command line or Package Manager Console or NPM Task Runner, go to the folder that contains package.json.

• For development, we use JiT compilation, with source maps & Hot Module Replacement:

npm start

And from Visual Studio, start debugging. Make the changes: the browser will update without refreshing.

• For production, we use AoT compilation, tree shaking & minification:

npm run build

And from Visual Studio, start debugging using AngularSPAWebAPI profile, that has Staging as environment variable: Working with multiple environments

EF Core commands

• 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

Swagger

• 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.

Advice

• You can change the strategy for refresh token
• You can enable account confirmation and the other Identity services
• Use a SSL certificate: Insecure passwords

License

MIT