Set up a sample app using Angular - node.js

This topic describes how to set up a sample app using Angular - Node JS.

The Angular - Node JS sample application showcases the capabilities of the CyberArk Identity APIs and widgets. It also includes an OAuth and OpenID Connect playground with all possible grant flows. This app uses a Node JS back end and an Angular JS front end.

Configure the CyberArk Identity tenant

If you don't have any existing CyberArk tenants, you can try a free trial tenant here.

Step 1: Create a role

  1. Create a role, as described in Create roles.

  2. Ensure that User Management> Role Management Rights are added to the role under the Administrative Rights section.

Step 2: Set up an authentication profile

Set up an authentication profile and add it to the policy under the Authentication Policies section. For more information, see Configure MFA for the User Portal.

Step 3: Create a policy

Create a policy, as described in Create a policy set and assign it to users.

Ensure that the above-created role is added to the policy.

Step 4: Set up an OpenID Connect application

  1. In the Identity Administration portal, select Apps > Web Apps, then click Add Web Apps.

  2. In the Custom section, click Add OpenID Connect app.

  3. Open the OpenID Connect app that you created in the above step.

  4. In the Settings section, add an ID of your choice for the application ID.

  5. Navigate to the Trust section.

    Enter the client secret. For example, sample1234.

    Under Service Provider Configuration select the Login initiated by the app only option.

    Make sure you set the following feature flags to true:

    • Core.Enable.WidgetOIDCIntegration

    • Core.Enable.OAuthInOIDC

  6. Add the redirect destinations for the sample app.

    http://localhost:2200/api/RedirectResource

    Based on your app configuration, the URL configuration is changed.

  7. To set up permissions for OpenID Connect, add the above-created role and provide Run permission to generate tokens.

    For more Information on OpenID Connect, refer Use OpenID Connect.

  8. To specify trusted DNS domains for API calls, include the web App domain in trusted DNS domains for API calls:

    1. Navigate to Settings > Authentication > Security Settings > API Security in the admin portal.

    2. Add an entry under Trusted DNS Domains for API Calls.

localhost

Step 5: Create an Authentication widget and configure it

Link the widget with the OpenID connect app created above.

Deploy an Angular Node sample app

This section includes a step-by-step guide to set up a sample app environment. It describes how to install the prerequisite tools and deploy the Angular Node sample app. The minimum required version of Node is 16.15.0.

Step 1: Install NODE.js

  1. Download the Node.js installer from https://nodejs.org/en/download/ and run the file.

    It is highly recommended to download the 64-bit version.

    Node.js installer includes the NPM package manager.

  2. Ensure that the path of Node.js is configured into the system PATH environment variable.

  3. Use the commands below to check the Node.js installation.

    node -v

    npm -v

Step 2: Install the JS SDK

Install the SDK as described in Use the CyberArk Identity JavaScript SDK.

Step 3: Build and run the Angular Node application

  1. Navigate to the identity-sample-nodejs/angular folder.

    cd angular

  2. Install the dependencies.

    npm i

  3. Run the application.

    npm start

  1. Navigate to the identity-sample-nodejs folder.

  2. Install the dependencies.

    npm i

  1. Run the server as an administrator.

    npm start

Now, you can use the environment for the Angular Node sample app.

Open http://localhost:4200 and configure the settings to access the web application.

Explore the Sign Up and Sign In widget

Using the widget, the customer application does not redirect to the CyberArk Identity server for user authentication. The widget embeds the existing customer web application to perform user authentication.

Overview

CyberArk provides a widget that enables customers to use the sign up and sign in capabilities in their applications. The Sign Up and Sign In widget can be integrated into a custom application where the organization can authenticate the identity of end users using CyberArk Identity.

How it works:

  1. A user registers an account with the CyberArk Identity server.

  2. An admin maps the role in the CyberArk Admin portal for the newly registered user.

  3. The user authenticates to the CyberArk Identity server.

Create an account and log in using the widget

The Sign Up widget in the sample web app secures end-user registration and the Sign In widget secures the end-user authentication.

  1. Click Get Started in the widget card, to navigate to the Login protocols page.

  2. Click Get Started in the Login protocols page. The Sign up and Sign in widgets show how the widget can be integrated into a client app.

  3. Click Sign up to open the CyberArk Identity Sign Up widget. Fill in the details to register and create an account.

  4. After the user is created, use the Sign In widget to sign in to the sample app.

  5. Click Next. The authentication challenges appear.

On a successful response, we use the OAuth authorization with PKCE flow to get an access token. Use the access token in the authorization header for subsequent requests in a sample application.

View user info

After a successful authentication using the widget, the user can navigate to the application to explore the additional functionalities provided.

Explore OIDC flows

Using the OpenID Connect Web application connected with the widget that was used above for login, you can explore the following OIDC flows:

As part of the authorized redirect URIs of the OpenID Connect web application, we have http://localhost:4200/RedirectResource.

Explore sample application functionalities

After successful authentication, a user logs in to the Node js - Angular Sample app and sees demo functionalities as a menu in the top-right corner of the page.

These functionalities are included as part of the sample app to demonstrate how a client application can integrate CyberArk Identity authentication and authorization services in their application features/tasks, or perform activities such as updating the user profile, resetting the password, TOTP registration, or transferring funds.

Some of these use cases added in the sample app are discussed below.

Transfer funds

Clients can integrate CyberArk Identity into their applications to authenticate and authorize users for crucial activities such as transferring funds.

  1. Click the Fund Transfer tab to navigate to a page where an input field is provided.

  2. Enter the amount and description (optional) and clicks the Transfer button. This initiates the process of using the CyberArk Identity platform to authorize the user.

  3. Enter the password or responds to the various challenges corresponding to the user account and clicks Next.

    • The transaction is successful if the TransferFunds scope is present in the OIDC scope section on the Settings page.

    • After a successful authorization, the process of fund transfer is marked completed, and the Fund Transfer screen displays a success message.

    • If it is not successful, anunauthorized error is displayed.

  4. Click Fund Transfer to display a summary of the transaction details.

    The Transaction Summary details are displayed only if TransferSummaryData scope exists in the access token.

The value of the amount entered on this page is for demonstration purposes only, and no actual transaction takes place in the database. This part is integrated into a sample app to showcase how CyberArk Identity can be used to provide authorization mechanisms for crucial activities such as fund transfer at the client end.

Display the enroll factors

Click Enroll Factors to display a drop-down with TOTP Registration and Change Password.

Configure the TOTP registration

TOTP authentication mode is also provided as part of the CyberArk Identity product. This time-based one-time password is used to authorize users in the sample app to showcase how clients can use it to authenticate and authorize users to their application or platform using CyberArk Identity.

TOTP registration is configurable from the admin portal provided by CyberArk at the time of availing the services.

  1. Click the TOTP Register tab under Enroll Factors to navigate to the TOTP Registration page.

  2. See the steps to register to receive the OTP along with a QR code and a verification code input field.

Configure the TOTP authentication

  1. Following the steps on the page, a user first needs to install a third-party authenticator app (for example, Google authenticator or Microsoft authenticator) and scan the QR code.

  2. A one-time password is displayed on the authenticator app. Enter this OTP in the Code field and click Verify to proceed.

Change passwords

Click the Change Password tab to reset the password.

The UserMgmt/ChangeUserPassword() endpoint is invoked to update the password for an authenticated user.

View and update a user profile

This page displays the current user account details and provides an option to update the profile information. The profile information includes username, email address, display name, and mobile number. The user can edit the details and click the Update button to submit the details.

Updating the user profile invokes the /user/UpdateProfile endpoint, which updates the cloud user properties and the local database user properties to the latest updated values, depending upon the scenario in use.

For example:

After a successful update, a success popup message is displayed on the screen.

Log out

Click Logout to revoke the access token and end the session, to log the user out.