Integrating Auth Angular SDK with WSO2 Identity Server

Authentication SDK for Angular is the newest addition to the Asgardeo SDK family. It allows angular developers to add OIDC/OAuth2 authentication simply and securely to the applications. This blog will guide you through configuring and consuming the SDK with WSO2 identity and access management tools using the in-built sample applications.

Did You Know?: WSO2 IDENTITY SERVER named An Overall Leader in The KuppingerCole Leadership Compass: CIAM Platforms, 2020

LEARN MORE >

What Is Angular?

Angular Logo

Angular is a typescript-based web development framework initiated by Google. It has a huge open-source community along with many resources around. Therefore, this SDK will be useful to millions of angular web developers around the world to add secure authentication to their applications.

• Find more: https://angular.io/docs

SDK Structure

The top-level angular module of this is SDK is named as AsgardeoAuthModule. Users should add this module to the imports array of their app root module. SDK config parameters need to be passed by invoking the forRoot function of the auth module.

Auth module provides the following components and services.

1. AsgardeoAuthService — A service containing a wide range of authentication functions.
2. AsgardeoAuthGuard — A route guard to grant access to a page only after successful authentication.
3. AsgardeoSignInRedirectComponent — Handles the authentication flow and redirects the user back.

Integration with @angular/router for in-app navigation will help the angular developers to use this SDK much smoothly.

• API docs: #apis

Try out Samples

Auth angular SDK provides multiple sample applications to easily try out the use cases without much coding.

Download the Samples

This article uses an asgardeo-angular-app sample (Download here). Find more sample applications in the below link.

• SDK samples: /tree/main/samples

Prerequisites

• NodeJS
• npm
• @angular/cli (optional)

Setup WSO2 Identity Server

1. Install and start the WSO2 Identity Server.

• IS docs: Installing the Product

2. Navigate to the console app https://localhost:9443/console.

WSO2 Identity Server 5.11 Console App (beta)

3. Select +New Application > Single Page Application.

Select Application Type Dialog

4. Provide a suitable name for the application and add https://localhost:5000 as a Redirect URL. Click Register to proceed.

Single Page Application Registration Dialog

5. Add https://localhost:5000 as an Allowed Origin located under the Develop > Access tab of the application page.

Allowed Origins and Redirect URLs of the Application

6. Copy the Client ID to the clipboard for the sample app configuration.

Client ID and Client Secret of the Application

7. Click Update and restart the WSO2 Identity Server.

Update the Access Configurations

Add Configuration Parameters

Open the src/config.json file and modify the clientID and serverOrigin parameters as follows.

SDK configuration: #configuration

{
    "clientID": "{{Insert the Copied Client ID}}",
    "serverOrigin": "https://localhost:9443",
    "signInRedirectURL": "https://localhost:5000",
    "signOutRedirectURL": "https://localhost:5000"
}

Run the Application

1. Open a terminal (command prompt) in the application directory.
2. Run npm install to install dependencies.
3. Serve the angular application by running npm start. (or run ng serve with @angular/cli)
4. Navigate to https://localhost:5000 and click the login button to sign-in with the WSO2 Identity Server.

Sample application login page

5. Explore the application code to integrate the SDK for your own angular applications. (Angular version — 10 or higher)

Useful Links

• GitHub: https://github.com/asgardeo/asgardeo-auth-angular-sdk
• NPM: https://www.npmjs.com/package/@asgardeo/auth-angular
• Got questions?: Join us on Slack
• Video version: 2021 January WSO2 IAM community call session

ELK Analytics, Securing Flutter Apps, and Angular Authentication — IAM Community Call — 1/27/2021

Conclusion

This article’s target was to cover how to configure and consume the Auth Angular SDK properly with the help of built-in samples. We will be frequently updating our blogs along with future releases.