Configuring a popup window with OIDC

As a brand, you might want to leverage Open ID Connect (OIDC) native support for authorization flows that happen via a popup window versus redirection.

Developers or administrators of a web application using an authorization code flow via popup typically only need to know a few pieces of information to redirect to Strivacity for login and self-service-related activities.

1. The Domain Name of the Strivacity instance. In OIDC terms, this is generally referred to as the "authority." This is available in the Tenant Configuration --> General section of the Admin Console.

2. The Client ID associated with the Application Configuration. This tells Strivacity what application configuration to associate the login or self-service transaction with.

🚧

For this flow to work, the brand must add their designated Callback URL within the Application Configuration Allowed Callback URLs list. This typically resembles something like:

https://example.com/oidc/callback/

This flow works in the following manner.

1. A customer would visit the brand portal and invoke the login flow via some method specified by the brand, such as a login button.

2. The login button would open a popup window that would load the Strivacity login interface. For example, the popup could be opened up via javascript in the following manner:

const host = 'https://BRAND_DOMAIN.strivacity.com';
const clientId = 'CLIENT_ID';
const redirect = 'https://example.com/oidc/callback/';

let state = <random string>
        
popup = window.open(
    `${host}/oauth2/auth?response_type=code&display=popup&client_id=${clientId}&scope=openid&state=${state}&redirect_uri=${redirect}`,
    'Strivacity',
    'toolbar=no, menubar=no, width=600, height=700, top=100, left=100'
);

popup.window.focus();

3. The customer would complete the login in the popup. The popup will automatically send its result to the opening window with no coding by the brand. Here is a snippet of the code that Strivacity uses to achieve this:

const urlParams = new URLSearchParams(window.location.search);

let args: any = {};
urlParams.forEach((value, key) => args[key] = value)

if (window.opener) {
		window.opener.postMessage(args, '*');
}

The brand should hook to receive the callback message from the popup, similar to the following. The brand can also close the popup after receiving the message.

function onMessage(message) {
    let data = message ? message.data : undefined;

    if (popup) {
        popup.window.close()
    }
}

window.onload = function () {
    window.addEventListener("message", onMessage, false);
}

Upon successful completion of the login on the users' behalf, the popup would send a message back to the parent window using this method, containing the OIDC response with the authorization code.

4. To complete the authentication, the brand portal must exchange this authorization code for an id token using the authorization code and client secret. This call should be done by the brand's backend. It is advised to use a library to do this step, and not code it yourself. Here is a good list of libraries for this purpose. For example, in Golang this could be achieved with the following call in the oauth2 library.

5. Upon success, the brand portal can validate the id token as necessary and now consider this authentication complete. For example, in Golang, token validation could be achieved with the following library call in the oauth2 library:

6. The brand can create and manage its own session for the newly authenticated user.

7. The brand backend replies to the calling client with the result of the authentication and sets any necessary session cookies.