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 /central-login/src/main.js file.

  3. Replace the forgerock.Config.set method with this code:

    await Config.setAsync({
      clientId: "<PingOne Client ID>",
      redirectUri: `${window.location.origin}`,
      scope: "openid profile email address revoke",
      serverConfig: {
        wellknown: "<OIDC Discovery Endpoint>",
      },
    });

    Replace the following strings with the values you obtained when you registered an OAuth 2.0 application in PingOne.

    <PingOne Client ID>

    The client ID from your OAuth 2.0 application in PingOne.

    For example, 6c7eb89a-66e9-ab12-cd34-eeaf795650b2

    <OIDC Discovery Endpoint>

    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, sdkPublicClient.

    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

    The result resembles the following:

    await Config.setAsync({
      clientId: "6c7eb89a-66e9-ab12-cd34-eeaf795650b2",
      redirectUri: `${window.location.origin}`,
      scope: "openid profile email address revoke",
      serverConfig: {
        wellknown: "https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration",
      },
    });
  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);
      }
    };
  5. Optionally, specify which of the configured policies PingOne uses to authenticate users.

    In the /central-login/src/main.js file, on line 80, add an acr_values query parameter to the getTokens() call:

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

    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.