Part 1: Overview of the Architecture

When developing software, it’s crucial for developers to prioritize the core functionalities of their applications while being aware of security practices. Although security should ideally be handled by specialists, developers must still possess a foundational understanding of security concepts to mitigate risks during development.

Before diving deeper into the architecture, let’s briefly introduce Angular and Duende IdentityServer.

What is Angular?

Angular is a front-end web development framework, crafted and sustained by Google. It simplifies the creation of single-page applications (SPAs) that are fast, responsive, and easy to maintain.

What is Duende IdentityServer?

Duende IdentityServer is an open-source framework for establishing identity and access control systems. Built on .NET, it is user-friendly and adaptable, allowing developers to create authentication and authorization systems swiftly. IdentityServer secures applications and APIs using various methods, including OIDC, SAML, and WS-Federation, and is often employed in enterprise environments that require a centralized identity provider for managing access across multiple applications.

Are there any libraries available to ease the process for Angular developers integrating with Duende IdentityServer?

Yes, the NPM package angular-oauth2-oidc is designed for Angular, providing support for OAuth 2 and OpenID Connect (OIDC) authentication. OAuth 2 is an open standard for authorization that enables users to grant third-party applications access to their resources without revealing their credentials. OIDC extends OAuth 2, allowing developers to authenticate users and retrieve their identity information.

Part 2: Experimenting with the Sample Angular Application

2. Open the app in Visual Studio Code.
3. In the terminal, execute npm install.
4. In the terminal, execute npm start.

For detailed instructions on cloning a repository, refer to "How to git clone an Angular app on GitHub and run it on localhost."

Once the application is running, navigate to http://localhost:4200 to see the application in action.

Click the user icon in the top right corner to log in.

Upon successful login, IdentityServer will redirect you back to the Angular app. For example, if you log in with the username "bob" and password "bob," the user’s name will appear when you click on the user icon.

To log out, click the Logout link below the username, which will redirect you to Duende IdentityServer to complete the logout process.

For demonstration purposes, the About page is secured with Auth Guard and can only be accessed by authenticated users. When an unauthenticated user attempts to access this page, a message stating "Access denied" will be displayed.

Part 3: Analyzing Angular's Communication with IdentityServer

The Google Chrome Developer Console serves as a tool for developers to inspect and debug their web pages. It offers features that help analyze and resolve coding issues by monitoring network requests and responses.

Authentication Flow

Let’s examine the Network tab to observe the interactions between Angular and Duende IdentityServer. The angular-oauth2-oidc library manages the login process effectively.

Key Endpoints:

• openid-configuration: This metadata document provides information about an OIDC provider's configuration, including endpoint URLs and supported claims.
• token: This endpoint is utilized to exchange authorization codes and obtain access tokens.
• userinfo: This endpoint allows retrieval of authenticated user details, such as name and email, using an access token.

To view the JWT ID and access token, navigate to the Application tab in the Developer Console and check Local Storage. You can click on the id_token_claims_obj to inspect claims.

Automatic JWT Token Attachment in Headers

JWT Token Silent Refresh

The refresh token mechanism allows clients to obtain a new JWT access token when the existing token expires without requiring the user to re-enter their credentials.

The silent refresh process occurs in the background, utilizing a refresh token stored on the client side. The client sends the refresh token to the authorization server, which validates it and issues a new access token if the refresh token is valid.

Part 4: Source Code for Authentication Implementation

The primary source code enabling login to IdentityServer from the Angular app is located in the src > core directory.

Configuration settings for Angular to work with IdentityServer can be found in the file srcappcoreauthauth-config.ts, where you can update the details to point to your IdentityServer.

The complete working sample application (Angular v15, Bootstrap v5) is available for download on GitHub. The project’s source code is structured for easy integration into your own projects.