Secure an Angular web application with IBM Security Verify SaaS

Security stands as a cornerstone in consumer-facing applications, whether web or mobile. Any compromise not only risks losing customers but also impacts revenue and brand reputation. It is important to not only prioritize security but also ensure a seamless user experience, avoiding user annoyance during application use.

In this tutorial, learn how IBM Security Verify SaaS can effectively address both security and user experience concerns, providing an enriching and secure end-user journey.

User journeys, including registration, authentication via social providers such as Google/Facebook, risk-based advanced authentication, and profile/password management, are intrinsic capabilities of IBM Security Verify SaaS. Additionally, multi-factor authentication (MFA) using SMS/Voice OTP and logout functionalities further fortify the platform's security, catering to both web and mobile applications.

Leverage the REST APIs of IBM Security Verify SaaS to create highly customizable and personalized user experiences. Alternatively, you can also use the default Verify IAM pages with the web application to deliver a seamless experience to end-users.

The web application uses the Authorization Code Flow to generate access tokens post-successful authentication. The generated tokens are validated to grant access to MongoDB. This ensures that only authorized users can access data from the database.

IBM Security Verify SaaS offers various authentication options, as shown in the figure below, enabling consumers to use their social identities (e.g., LinkedIn, Facebook, or Google) for login or to create a new account if they prefer not to use social options. Additionally, IBM Security Verify SaaS ensures compatibility with any SAML or OIDC compliant identity provider, providing enterprises with flexibility in authentication methods.

Figure: Authentication methods in IBM Security Verify SaaS

Implementing a second-factor authentication mechanism is crucial for strengthening security in the Customer Identity and Access Management (CIAM) user journey. IBM Security Verify SaaS offers support for a variety of methods including SMS/Voice/Email based OTP, Knowledge-based Q&A, TOTP, and Authenticator app. This step provides robust verification, ensuring that users are indeed who they claim to be.

The following figure shows the adaptive access capability of IBM Security Verify SaaS. To mitigate the risk of fraudulent access to the consumer application, organizations can establish access policies. These policies dynamically regulate access, blocking users with elevated risk profiles from accessing sensitive resources.

Figure:Risk-based adaptive access capability of IBM Security Verify SaaS

Learning objectives

In this tutorial, you will learn a step-by-step method for seamless integration of an Angular web application with IBM Security Verify SaaS. It covers authentication, authorization, multi-factor authentication (MFA), risk-based adaptive access, and other essential aspects of IAM tailored for the consumer space.

User registration and authentication process overview

A high-level overview of user registration and authentication process using IBM Security Verify SaaS follows:

• Users can sign up for an account on the customer website and authenticate using either their registered account credentials or through social identity providers such as Google/Facebook.
• The registration process uses Verify REST APIs to onboard customers. Alternatively, users can use Out-of-the-Box (OOB) registration forms provided by IBM Security Verify SaaS.
• Users authenticating via social identities are seamlessly onboarded into IBM Security Verify SaaS upon successful authentication, eliminating the need for explicit registration.
• Users have the capability to manage their profile and password, delete their account, update their username, and set up multi-factor authentication (MFA) using Email/Phone OTP.
• Upon logout, user sessions are cleared, requiring re-authentication to access app services.

This tutorial provides instructions on securing an Angular application using IBM Security Verify SaaS and Verify REST APIs.

Prerequisites

• Get a IBM Security Verify SaaS tenant. Register for a free IBM Security Verify SaaS trial.
• Ensure that you have Node.js installed locally, with version v18.18.0, or later.

Steps

Step 1. Clone the repository

Download the zip file from GitHub to your local machine and unzip it. Then, open a command prompt to install the project dependencies.

Step 2. Register a sample web application

1. Log in to your tenant and navigate to Applications -> Add Application.

2. Select Custom Application and proceed to add it.

3. In the Sign-on tab, specify the type as Open ID Connect 1.0.

4. Provide the application URL as http://localhost:4200 and set the redirect URI to http://localhost:4200.

   

5. Choose Authorization code as the grant type and proceed to create the application.

   

6. Select specific identity providers such as Google, Facebook, and Cloud Directory.

   

7. Under the Entitlements tab, opt for the first radio button - Automatic access for all users and groups.

8. Create an API client with the necessary permissions, which will be used in the properties file.

9. Save the settings.

   

Step 3. Update tenant details

Modify the environment.ts file located within the environments folder. Include the tenant name, client ID, and client secret of the registered application in this file.

Step 4. Configure identity providers

1. Ensure the Primary Identity Source is set to Cloud Directory.

2. Create identity sources for Google and Facebook.

   • Google

     Google serves as an example Social Sign-On provider integrated with the demonstration application via IBM Security Verify SaaS. You'll need a Google account to register your IBM Security Verify SaaS tenant as an application.

     Note: When creating the application definition on Google, ensure to enable the People API to avoid errors during single sign-on.

   • Facebook

     Facebook is another example Social Sign-On provider integrated with the demonstration application via IBM Security Verify SaaS. You'll require a Facebook account to register your IBM Cloud Identity tenant as an application.

To create identity sources for Google and Facebook, follow these steps:

1. Ensure you have accounts for these services and application definitions for Cloud Identity.
2. Provide redirect URIs, available in the IBM Security Verify SaaS Console (along with links to the developer consoles for these services).

3. Specify the following settings for Identity Linking:

   • Enabled: On
   • Unique User Identifier: email

   • Just-in-time Provisioning: On

     Note: Enabling Identity Linking is optional.

     After saving each Identity Source, revisit the properties and make a note of the Identity Source ID. This is necessary when updating the Cloud Identity template pages.

Step 5. HTML files customization

The HTML files required for customization are located in the GitHub repository. You can modify the registration, login, and other Verify pages to align with your brand's aesthetics. Alternatively, you can use the default template provided by IBM Security Verify SaaS for the user interface (UI).

Step 6. Executing the code

1. Navigate to the directory where the updated code is located.

2. To start the Angular application, run the following commands:

    npm install
    npm run start
   

   

3. Move to the server folder and start the server by running the followig command: node server.js

4. Open a web browser and enter the URL http://localhost:4200. This will display a web page similar to the following. You can add your email to create a local account, or if you prefer to use Google or Facebook for login, click on Login to continue.

   

Securing an Angular web application demo

Watch the following demonstration to learn how to integrate an Angular web application with IBM Security Verify SaaS:

Video will open in new tab or window

Summary

Use to the code provided in the GitHub repository as a reference to develop your first CIAM web application. Customize the pages to reflect the visual identity of your brand. Design intricate user journeys by harnessing the capabilities of Verify REST APIs, ensuring a tailored and personalized brand experience.

Next steps

• Explore our product documentation, which provides comprehensive insights into IBM Security Verify.

• Access our step-by-step guide to seamlessly integrate social IDPs.

• Check out instructions about UI branding and customization to tailor the interface to your brand's identity.

• Build your custom application using the comprehensive REST API Guide for IBM Security Verify SaaS.