AngularSPAWebAPI
AngularSPAWebAPI copied to clipboard
Angular Single Page Application with an ASP.NET Core Web API that uses token authentication
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