Step 3. Configure connection properties
In this step, you configure the sample app to connect to the OAuth 2.0 application you created in PingOne.
-
In the IDE of your choice, open the
sdk-sample-apps
folder you cloned in the previous step. -
Open the
/javascript/central-login-oidc/src/main.js
file. -
Locate the
forgerock.Config.setAsync()
method and update the properties to match your PingOne environment:await forgerock.Config.setAsync({ clientId: process.env.WEB_OAUTH_CLIENT, // e.g. 'ForgeRockSDKClient' or PingOne Services Client GUID redirectUri: `${window.location.origin}`, // Redirect back to your app, e.g. 'https://localhost:8443' or the domain your app is served. scope: process.env.SCOPE, // e.g. 'openid profile email address phone revoke' When using PingOne services
revoke
scope is required serverConfig: { wellknown: process.env.WELL_KNOWN, timeout: process.env.TIMEOUT, // Any value between 3000 to 5000 is good, this impacts the redirect time to login. Change that according to your needs. }, });javascriptReplace the following strings with the values you obtained when you registered an OAuth 2.0 application in PingOne.
- process.env.WEB_OAUTH_CLIENT
-
The client ID from your OAuth 2.0 application in PingOne.
For example,
6c7eb89a-66e9-ab12-cd34-eeaf795650b2
- process.env.SCOPE
-
The scopes you added to your OAuth 2.0 application in PingOne.
For example,
openid profile email phone revoke
- process.env.WELL_KNOWN
-
The
.well-known
endpoint from your OAuth 2.0 application in PingOne.How do I find my PingOne .well-known URL?
To find the
.well-known
endpoint for an OAuth 2.0 client in PingOne:-
Log in to your PingOne administration console.
-
Go to Applications > Applications, and then select the OAuth 2.0 client you created earlier.
For example, sdkPublicClient.
-
On the Configuration tab, expand the URLs section, and then copy the OIDC Discovery Endpoint value.
For example,
https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration
-
- process.env.TIMEOUT
-
Enter how many milliseconds to wait before timing out the OAuth 2.0 flow.
For example,
3000
The result resembles the following:
await forgerock.Config.setAsync({ clientId: "6c7eb89a-66e9-ab12-cd34-eeaf795650b2", redirectUri: `${window.location.origin}`, scope: "openid profile email phone revoke", serverConfig: { wellknown: "https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration", timeout: 3000 }, });
javascript -
Alter the
logout
object as follows:-
In the
forgerock.FRUser.logout()
method, add the following parameter:{logoutRedirectUri: `${window.location.origin}`}
The presence of this parameter causes the SDK to use a redirect flow for ending the session and revoking the tokens, which PingOne servers require.
-
Remove or comment out the following line:
location.assign(`${document.location.origin}/`);
The result resembles the following:
const logout = async () => { try { await FRUser.logout({ logoutRedirectUri: `${window.location.origin}` }); // location.assign(`${document.location.origin}/`); } catch (error) { console.error(error); } };
javascript -
-
Optionally, specify which of the configured policies PingOne uses to authenticate users.
In the
/javascript/central-login-oidc/src/main.js
file, find each instance of thegetTokens
method that has alogin: 'redirect'
parameter and add an additionalacr_values
query parameter:await TokenManager.getTokens({ login: 'redirect', query: { acr_values: "<Policy IDs>" } });
javascriptReplace <Policy IDs> with either a single DaVinci policy, by using its flow policy ID, or one or more PingOne policies by specifying the policy names, separated by spaces or the encoded space character
%20
.Examples:
- DaVinci flow policy ID
-
acr_values: "d1210a6b0b2665dbaa5b652221badba2"
- PingOne policy names
-
acr_values: "Single_Factor%20Multi_Factor"
For more information, refer to Authentication policies.