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

For more complex scenarios, where web services are required by more than one application or third-party applications, IdentityServer4 offers built-in support for OpenID Connent flows.

Links

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

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

Links

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

Check for .NET Core 1.1: ^1.0.0-preview2-1-003177 and the latest Visual Studio Tools: https://www.microsoft.com/net/download/core
Check for the latest TypeScript for Visual Studio: https://www.typescriptlang.org/#download-links
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 dependencies in project.json:

"Microsoft.EntityFrameworkCore.Sqlite": "1.1.0",
"Microsoft.EntityFrameworkCore.Sqlite.Design": "1.1.0"

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:

Customize external web tools in Visual Studio 2015

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.

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
If more than one client app requires the Web API, use an interactive flow: IdentityServer4 or the other libraries allow you to scale your application

License

MIT

cdoru / angularspawebapi Goto Github PK