Ping SDKs

Before you begin

To successfully complete this tutorial refer to the prerequisites in this section.

The tutorial also requires a configured PingOne instance.

Prerequisites

Node and NPM

This sample requires a minimum Node.js version of 18, and is tested on versions 18 and 20. To get a supported version of Node.js, refer to the Node.js download page.

You will also need npm to build the code and run the samples.

Server configuration

This tutorial requires you to configure your PingOne server as follows:

Task 1. Create a demo user

The samples and tutorials in this documentation often require that you have an identity set up so that you can test authentication.

To create a demo user in PingOne, follow these steps:

  1. Log in to your PingOne administration console.

  2. In the left panel, navigate to Directory > Users.

  3. Next to the Users label, click the plus icon ().

    PingOne displays the Add User panel.

  4. Enter the following details:

    • Given Name = Demo

    • Family Name = User

    • Username = demo

    • Email = demo.user@example.com

    • Population = Default

    • Password = Ch4ng3it!

  5. Click Save.

Task 2. Create a revoke resource

To allow the Ping SDKs to revoke access tokens issued by PingOne, you must create a custom resource that is assigned the revoke scope in your PingOne tenant.

To create a custom resource and assign the revoke scope, follow these steps:

  1. Log in to your PingOne administration console.

  2. In the left panel, navigate to Applications > Resources.

  3. Next to the Resources label, click the plus icon ().

    PingOne displays the Add Custom Resource panel.

  4. In Resource Name, enter a name for the custom resource, for example SDK Revoke Resource, and then click Next.

  5. On the Attributes page, click Next.

  6. On the Scopes page, click Add Scope.

  7. In Scope Name, enter revoke, and then click Save.

When you have created the custom resource in your PingOne instance, continue with the next step.

For more information on resources in PingOne, refer to Adding a custom resource.

Task 3. Register a public OAuth 2.0 client

To register a public OAuth 2.0 client application in PingOne for use with the Ping SDK for JavaScript, follow these steps:

  1. Log in to your PingOne administration console.

  2. In the left panel, navigate to Applications > Applications.

  3. Next to the Applications label, click the plus icon ().

    PingOne displays the Add Application panel.

  4. In Application Name, enter a name for the profile, for example sdkPublicClient

  5. Select OIDC Web App as the Application Type, and then click Save.

  6. On the Configuration tab, click the pencil icon ().

    1. In Grant Type, select the following values:

      Authorization Code

      Refresh Token

    2. In Redirect URIs, enter the following value:

      https://localhost:8443

    Also add any other URLs where you host SDK applications.

    Failure to add redirect URLs that exactly match your client app’s values can cause PingOne to display an error message such as Redirect URI mismatch when attempting to end a session by redirecting from the SDK.

    1. In Token Endpoint Authentication Method, select None.

    2. In Signoff URLs, enter the following value:

      https://localhost:8443

      Also add any other URLs that redirect users to PingOne to end their session.

      Failure to add sign off URLs that exactly match your client app’s values can cause PingOne to display an error message such as invalid post logout redirect URI when attempting to end a session by redirecting from the SDK.

    3. In CORS Settings, in the drop-down select Allow specific origins, and in the Allowed Origins field, enter the URL where you will be running the sample app.

      For example:

      https://localhost:8443

    4. Click Save.

  7. On the Resources tab, next to Allowed Scopes, click the pencil icon ().

    1. In Scopes, select the following values:

      email

      phone

      profile

      SDK Revoke Resource

      The openid scope is selected by default.

      The result resembles the following:

      Ensure you select the custom `revoke` scope.
      Figure 1. Adding scopes, including the custom "revoke" scope to an application.

  8. Optionally, on the Policies tab, click the pencil icon () to select the authentication policies for the application.

    Applications that have no authentication policy assignments use the environment’s default authentication policy to authenticate users.

    If you have a DaVinci license, you can select PingOne policies or DaVinci Flow policies, but not both. If you do not have a DaVinci license, the page only displays PingOne policies.

    To use a PingOne policy:

    1. Click Add policies and then select the policies that you want to apply to the application.

    2. Click Save.

      PingOne applies the policies in the order in which they appear in the list. PingOne evaluates the first policy in the list first. If the requirements are not met, PingOne moves to the next one.

      For more information, see Authentication policies for applications.

    To use a DaVinci Flow policy:

    1. You must clear all PingOne policies. Click Deselect all PingOne Policies.

    2. In the confirmation message, click Continue.

    3. On the DaVinci Policies tab, select the policies that you want to apply to the application.

    4. Click Save.

      PingOne applies the first policy in the list.

  9. Click Save.

  10. Enable the OAuth 2.0 client application by using the toggle next to its name:

    Enable the application using the toggle.
    Figure 2. Enable the application using the toggle.

The application is now configured to accept client connections from and issue OAuth 2.0 tokens to the JavaScript example PingOne applications and tutorials covered by this documentation.