Ping SDKs

Configure JavaScript apps for OIDC login

This section describes how to configure your Ping SDK for JavaScript application with centralized login:

  1. To initiate authentication using the OIDC-based centralized login method, call the getTokens() function:

    const tokens = TokenManager.getTokens({
      login: 'redirect', // Redirect to the server or the web app that handles authentication
      forceRenew: false, // Immediately return stored tokens, if they exist
      skipBackgroundRequest: true // Regardless of session status, redirect to the authorization server to initiate the OAuth 2.0 flow
    });
    javascript

    The parameters for getTokens() are as follows:

    login

    Specifies the method the Ping SDK for JavaScript uses to handle authentication.

    Supported values are as follows:

    Setting Description

    redirect

    Your app uses a redirect to your server, or another web application, to handle authentication.

    Use this option to perform centralized login.

    embedded

    Your app handles authentication natively using SDK functionality, and provides the user interface.

    If you do not specify a value, embedded is assumed, for backwards-compatibility.

    forceRenew

    When true, the Ping SDK for JavaScript revokes and deletes any existing tokens it has and contacts your authorization server to obtain new tokens.

    When false, or not specified, if existing tokens are present the Ping SDK returns these immediately for use. Otherwise it contacts your authorization server to obtain new tokens.

    skipBackgroundRequest

    When true, the Ping SDK for JavaScript redirects users immediately to your authorization server.

    When false, or not specified, the Ping SDK for JavaScript attempts to obtain OAuth 2.0 tokens within an iframe to prevent unnecessary page redirects.

    However requesting tokens in an iframe can cause errors with some authorization servers in certain environments. In these cases, we recommend setting skipBackgroundRequest to true.

  2. When the user is returned to your app, complete the OAuth 2.0 flow by passing in the code and state values that were returned.

    Use the query property to complete the flow:

    const tokens = TokenManager.getTokens({
      query: {
        code: 'lFJQYdoQG1u7nUm8 ... ', // Authorization code from redirect URL
        state: 'MTY2NDkxNTQ2Nde3D ... ', // State from redirect URL
      },
    });
    javascript

Compatibility with Content Security Policies (CSP)

A Content Security Policy (CSP) is a security standard implemented as an HTTP response header that gives developers control over the resources a browser is permitted to load for a given page.

Its primary goal is to prevent and mitigate client-side attacks like Cross-Site Scripting (XSS) and data injection.

By defining an allowlist of trusted content sources, a CSP instructs the browser to block any attempts to load assets from unapproved origins, effectively neutralizing many common attack vectors that rely on injecting malicious code.

The Ping SDK for JavaScript is compatible with common CSP configurations. However, a CSP can restrict which pages can be opened in an iframe. The Ping SDK can use an iframe to acquire OAuth 2.0 tokens in the background.

Your CSP might use the iframe-src property to prevent an iframe from loading pages from your Authorization Server. In this case the Ping SDK for JavaScript SDK will be unable to perform background, or silent, OAuth 2.0 token acquisition.

You can use either of the following methods to work around this restriction:

  • Explicitly declare the domain on which your Authorization Server is hosted in the iframe-src property of your CSP:

    Example CSP with frame-src property
    Content-Security-Policy: frame-src https://openam-forgerock-sdks.forgeblocks.com/
    http

    This allows the embedded iframe to make the request for OAuth 2.0 tokens, but disallows any other domains.

  • In the call to getTokens(), set skipBackgroundRequest: true, as shown above.

    The Ping SDK for JavaScript performs a full page redirect to obtain tokens, rather than attempt to load pages from your Authorization Server in an iframe.