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
});

    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
  },
});