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 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.

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.

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.

Prerequisites

Setup WSO2 Identity Server

1. Install and start the WSO2 Identity Server.

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

3. Select +New Application > Single Page Application.

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

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

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

7. Click Update and restart the WSO2 Identity Server.

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.

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

Useful Links

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.