Configure JavaScript apps for OIDC login
This section describes how to configure your Ping SDK for JavaScript application with centralized login:
-
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
totrue
.
-
When the user is returned to your app, complete the OAuth 2.0 flow by passing in the
code
andstate
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 }, });