OIDC login to PingFederate tutorial for JavaScript

In this tutorial you update a sample app that uses OIDC-based login to obtain tokens by redirecting to the PingFederate UI for authentication.

The sample connects to the .well-known endpoint of your PingFederate server to obtain the correct URIs to authenticate the user, and redirects to your PingFederate server’s login UI.

After authentication, PingFederate redirects the browser back to your application, which then obtains an OAuth 2.0 access token and displays the related user information.

Before you begin

Before you begin this tutorial ensure you have set up your PingFederate server with the required configuration.

For example, you will need to configure CORS, have an OAuth 2.0 client application set up.

Complete prerequisites

Step 1. Download the samples

To start this tutorial, you need to download the SDK sample apps repo, which contains the projects you will use.

Start step 1

Step 2. Install the Ping SDK

The sample projects need a number of dependencies that you can install by using the npm command.

For example, the Ping SDK for JavaScript itself is one of the dependencies.

Start step 2

Step 3. Configure connection properties

In this step, you configure the sample app to connect to the OAuth 2.0 application you created in PingFederate.

Start step 3

Step 4. Test the app

In the following procedure, you run the sample app that you configured in the previous step.

The sample connects to your PingFederate server to obtain the correct URIs to authenticate the user, and redirects the browser to your PingFederate server.