Ping SDKs

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.

  1. In the IDE of your choice, open the sdk-sample-apps folder you cloned in the previous step.

  2. Open the /javascript/central-login-oidc/src/main.js file.

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

    Replace 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,

    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:

    1. Log in to your PingOne administration console.

    2. Go to Applications > Applications, and then select the OAuth 2.0 client you created earlier.

      For example, .

    3. 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: "",
      serverConfig: {
        wellknown: "https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration",
        timeout: 3000
      },
    });
    javascript
  4. Alter the logout object as follows:

    1. 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.

    2. 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
  5. 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 the getTokens method that has a login: 'redirect' parameter and add an additional acr_values query parameter:

    await TokenManager.getTokens({
      login: 'redirect',
      query: {
        acr_values: "<Policy IDs>"
      }
    });
    javascript

    Replace <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.