ForgeRock Developer Experience

Step 3. Configure the central login sample app

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-46df-9ee2-eeaf795650b2

    <OIDC Discovery Endpoint>

    The .well-known endpoint from your OAuth 2.0 application in PingOne.

    For example, https://auth.pingone.com/3072206d-c6ce-4c19-a366-f87e972c7cc3/as/.well-known/openid-configuration

    The result resembles the following:

    await Config.setAsync({
  clientId: "6c7eb89a-66e9-46df-9ee2-eeaf795650b2",
  redirectUri: `${window.location.origin}`,
  scope: "openid profile email address revoke",
  serverConfig: {
    wellknown: "https://auth.pingone.com/3072206d-c6ce-4c19-a366-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 Editing an application - OIDC.

With the sample configured, you can proceed to Step 4. Run the central login sample app.