AngularASPNETCoreOAuth

Sample project based on the blog post demonstrating how to build out an Implicit Grant OAuth flow utilizing OAuth2/OpenID Connect protocols implementing IdentityServer4 as our OpenID Connect Provider and then using it to authenticate an Angular SPA client to authorize access to an independent ASP.NET Core Web API.

Development Environment

• Visual Studio 2019 Community
• Visual Studio Code 1.32.3
• .NET Core SDK 3.1
• Angular 8
• IdentityServer4 3.0.1
• SQL Server Express 2016 LocalDB

Setup

To run the demo:

1. Clone/Fork/Download this repository.

2. Create the database on your SQL Server Express LocalDB by using the dotnet cli to run the migrations from within the AuthServer.Infrastrucuture project folder.

AuthServer.Infrastructure> dotnet ef database update --context AppIdentityDbContext

AuthServer.Infrastructure> dotnet ef database update --context PersistedGrantDbContext

3. Install Angular CLI if necessary. npm install -g @angular/cli

4. Install Angular SPA dependencies.

Spa\oauth-client> npm install

5. Run the Angular CLI dev server to build and run the Angular app.

Spa\oauth-client> ng serve

• Important: This must be running on the default http://localhost:4200

6. Build/Run the AuthServer.sln solution using your preferred method: Visual Studio, VSCode, dotnet CLI.

• Important: This must be running on http://localhost:5000

7. Build/Run the Resource.Api.sln solution using your preferred method: Visual Studio, VSCode, dotnet CLI.

• Important: This must be running on http://localhost:5050

8. Point a browser to http://localhost:4200 to access the Angular client.

9. Use the Signup and Login functions to perform the authentication flow, then try and access the Top Secret Area to hit the protected ASP.NET Core Web API.

Contact

[email protected]