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.

• 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

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

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

• In ClientApp folder run: npm install
• dotnet build

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

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

• dotnet watch run

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

• Select AngularSPAWebAPI profile
• Start debugging

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

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

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"
}

MIT