Angular SPA Web API

Angular v7 Single Page Application with an ASP.NET Core WebAPI 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.

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 implicit flow.

Features

• Angular v7 & ASP.NET Core 2.1
• Angular CLI
• AoT compilation in development & production mode
• Angular CLI, .NET Core CLI or Visual Studio 2017
• Angular Material
• IdentityServer4 & ASP.NET Core Identity
• Resource Owner Password Credentials grant
• Refresh token
• Role based Authorization
• Development, Staging & Production environments

Project structure

The structure of the project is based on Angular CLI ASP.NET Core.

AngularSPAWebAPI

• ClientApp Angular application
• Controllers
  • IdentityController.cs Identity APIs
  • ValuesController.cs Resources APIs
• Data Entity Framework migrations
• Models
  • ApplicationUser.cs Profile data for application users
• Properties
  • lanchSettings.json ASP.NET Core environments
• Services
  • DbInitializer.cs Provides method to populate the db
• wwwroot Root for Angular application deployment
• Config.cs IdentityServer4 configuration
• IdentityDB.sqlite SQLite database
• Startup.cs WebAPI configuration

Installing

• Requirements
  • At least .NET Core 2.1
  • Node.js and npm
  • At least Angular CLI 7.0.0

Command line & .NET Core CLI

• In ClientApp folder run: npm install
• dotnet build

Visual Studio 2017

• In ClientApp folder run: npm install
• Build the solution

Running

The app will be served on https://localhost:5001

Command line & .NET Core CLI

Development

• dotnet watch run

Staging

• In ClientApp folder run: npm run build:staging
• dotnet run --launch-profile Staging

Visual Studio 2017

Development

• Select AngularSPAWebAPI profile
• Start debugging

Staging

• In ClientApp folder run: npm run build:staging
• Select Staging profile
• Start debugging

Deployment

• In ClientApp folder run: npm run build:prod
• Publish

Changing db

To use another database, for example SQLServer:

• Edit in Startup.cs:

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

• Edit ConnectionStrings in appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=IdentityDB;Trusted_Connection=True;MultipleActiveResultSets=true"
}

License

MIT