Help needed on the SDK configuration to connect to pega using Microsoft OpenID Connect

User Experience
,
1

Hello Experts,

I have setup an external Angular application with SDK capability to connect to pega and create cases.

With standard pega authentication service we are able to successfully connect and create cases in the angular application.

Now the existing pega application has Microsoft OpenID Connect authentication service which has to be utilized for the angular application as well.

I have setup a POC application where i have done the setup for OpenIDConnect authentication service successfully and able to connect to it using the login URL.

Now i need to integrate this authentication into the angular application through the SDK configuration file (sdk.config.json) which is where i am stuck at.

Need suggestions on the configuration steps

Appreciate your help

Regards

JC

2

Hi @JayachandraSiddipeta ,

I do not have much experience with OpenID Connect, but if it comes to sdk authentication you may want to use Custom Bearer flow. I have extensive article here: Custom Bearer Grant Type

Please take a look if it would fit.

3

Which bit are you stuck on? In the sdk.config.json have you put the authService that matches the Microsoft OIDC authentication service record configured in your POC Application?

image
image1056Ă—570 40.4 KB

4

Requirement is that the access token will be generated using the authentication service which i mentioned before when the angular application loads up and the same token has to used for all the subsequent DX API calls which will be triggered from the SDK.

I have looked at the below option when the initialization of the SDK happens in app.component.ts,

const tokenObject = {
“access_token”: “…”,
“refresh_token”: “…”,
“token_type”: “bearer”,
“session_index”: “…”,
“expires_in”: …
}

PCore.getAuthUtils().setTokens(tokenObject);
PCore.getAuthUtils().setAuthorizationHeader(`${tokenObject.token_type} ${tokenObject.access_token}`);

and it kind of seem to have worked in bits and pieces. But i am still searching for the standard process for this type of use case and the best practices to be followed.

Thanks in advance for the suggestions

Regards

JC

5

We were able to successfully achieve this requirement as part of the POC. Below are the details for everyone’s reference.

Use Case

We had a lightweight requirement:

  • Embed Pega case creation within an external Angular app
  • Only 2 assignments in the flow:
    • A form-based assignment
    • An attachment upload with additional details

To achieve this, we extracted the required SDK code and libraries from the Constellation SDK project and incorporated them into our Angular application.

Initial Setup (Working Scenario)

Using the standard Pega authentication service:

  • We successfully rendered the case screens in embedded mode on clicking a “Create New Request” button
  • Case processing (including completion) worked seamlessly
  • Localization also functioned as expected

Challenge

The requirement then evolved to use client-side authentication via Microsoft OpenID Connect (MSA). Specifically:

  • The token generated via Azure (MSA) needed to be used for authentication
  • This token had to be validated against a corresponding operator setup in Pega

The key challenge was during SDK initialization:

  • Pega requires user validation before loading Constellation bootstrap data
  • This happens via a DX API call to the data page D_pxBootstrapConfig
  • Since the SDK was not aware of the externally generated token at this stage, the bootstrap call was failing

Solution

The solution was to ensure that the SDK uses the Azure-generated token before any initialization or bootstrap calls are triggered.

Below is the minimal change we implemented in app.component.ts:

setCustomToken() {
    const tokenObject = {
        access_token: "..." // Token generated via Azure (MSA)
    };

    if (tokenObject?.access_token) {
        sdkSetAuthHeader(`Bearer ${tokenObject.access_token}`);
    }
}

ngOnInit() {
    this.initialize();
}

async initialize() {
    document.addEventListener('SdkCustomReauth', this.setCustomToken);
    this.setCustomToken();
}

What This Fix Achieves

  • The Azure (MSA) token is injected into the SDK before any Pega calls are made
  • The initial bootstrap request (D_pxBootstrapConfig) now carries this token
  • A custom authentication service in the Pega service package validates the token
  • Upon successful validation, the operator context is established

Once bootstrap is successfully loaded:

  • All subsequent DX API calls reuse the same token
  • Case creation and processing work seamlessly within the embedded Angular application

Key Takeaway

When integrating external authentication (like Azure OpenID Connect) with Constellation SDK:

  • Ensure the token is set early in the SDK lifecycle
  • Specifically, before the bootstrap call is triggered
  • This avoids initialization failures and ensures smooth downstream DX API interactions

Below pega documentation link helped us a lot for understanding the SDK working structure and methodology

This was just a POC which was done as part of the preparatory work and hopefully we will be able to overcome the challenges we face (if any) when we implement the full application and promote it to PROD.

Regards

JC

2 Likes
6

thanks for sharing :slight_smile: