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 });
javascriptThe 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
.Learn more in Compatibility with Content Security Policies (CSP).
-
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 }, });
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 withframe-src
propertyContent-Security-Policy: frame-src https://openam-forgerock-sdks.forgeblocks.com/
httpThis allows the embedded iframe to make the request for OAuth 2.0 tokens, but disallows any other domains.
-
In the call to
getTokens()
, setskipBackgroundRequest: 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.