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.
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, IdentityServer4 offers built-in support for OpenID Connent flows.
Links
The same scenarios are also supported by AspNet.Security.OpenIdConnect.Server and openiddict-core.
Links
Angular2SPAWebAPI ASP.NET Core Web API project
- wwwroot Root for Angular2 application deployment
- app Angular 2 application
- Controllers
- IdentityController.cs Identity APIs
- ValuesController.cs Resources APIs
- Data Entity Framework migrations
- Models
- ApplicationUser.cs Profile data for application users
- DBInitializer.cs Initial data for the db
- build.js Angular 2 app building process for production
- Config.cs IdentityServer4 configuration
- IdentityDB.sqlite SQLite database
- package.json Packages for Angular 2 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 2 app
- Check for .NET Core: ^1.0.0-preview2-003131
- Check for TypeScript for Visual Studio 2015: ^2.0.3
- Edit
ConnectionStrings
in appsettings.json - Wait for packages restoring and build the solution
- Start debugging
To use another database simply:
- Edit
ConnectionStrings
in appsettings.json - Edit
dependencies
in project.json:
"Microsoft.EntityFrameworkCore.Sqlite": "1.0.1",
"Microsoft.EntityFrameworkCore.Sqlite.Design": "1.0.1"
- Edit in Startup.cs:
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
From the command line or Package Manager Console, go to the folder that contains package.json.
- For development, we use JiT compilation & source map files, with files watching:
npm start
And from Visual Studio, start debugging. Make the changes, and simply refresh the page on the browser.
- For production, we use AoT compilation, tree shaking & minification:
npm run build
And from Visual Studio, start debugging.
- 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
- Add your strategy for refresh token
- 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
MIT