Qodex.ai

Configure a Single-Page Application with PKCE and an AuthCode Grant

Number of APIs: 9

This activity shows you how to create an single-page application, configure its connection settings to use Proof Key for Code Exchange (PKCE) parameters in the authorization request for the authorization code grant, and initiate an authorization request.

The following operations are supported by the PingOne APIs:

  • Create an application
  • Create a user
  • Initiate an authorization code flow and use PKCE to authenticate the token request

Prerequisites

Get an access token from the worker application that you created in Getting Started with the PingOne APIs. To get a token from a different worker application in an alternate sandbox environment, run the token request endpoint using the client ID and client secret of your chosen worker app to authenticate the request. For more information, see GET a Worker Application Access Token.

Workflow order of operations

To configure a single-page application and initiate an authentication flow, the following tasks must be completed successfully:

  1. Make a POST request to /environments/{{envID}}/applications to add a new application to the specified environment.

  2. Make a POST request to /environments/{{envID}}/populations to create a new population resource.

  3. Make a POST request to /environments/{{envID}}/users to create a user who will be assigned to the new population resource.

  4. Make a POST request to /environments/{{envID}}/users/{{userID}}/password to set the new user's password.

  5. Make a POST request to /{{envID}}/as/authorize to obtain an authorization grant. This request starts the authorization flow.

  6. To initiate the authentication flow, make a GET request to GET /{{envID}}/flows/{{flowID}}.

  7. To complete the authentication flow, make a POST request to GET /{{envID}}/flows/{{flowID}} and provide the user's login credentials.

  8. Make a GET request to /{{envID}}/as/resume?flowId={{flowID}} to call the resume endpoint and return the token.

  9. Make a POST request to /{{envID}}/as/token to exchange the auth code for an access token.

  1. Step 1: Create a single-page application POST {{apiPath}}/environments/{{envID}}/applications

  2. Step 4: Set user password PUT {{apiPath}}/environments/{{envID}}/users/{{appUserID}}/password

  3. Step 7: Submit Login Credentials POST {{authPath}}/{{envID}}/flows/{{flowID}}

  4. Step 5: Send the authorize request GET {{authPath}}/{{envID}}/as/authorize?response_type=code&client_id={{SPAppWithAuthCodeGrantID}}&redirect_uri=https://example.com&scope=openid&code_challenge={{code_challenge}}&code_challenge_method=S256

  5. Step 6: Get the Flow GET {{authPath}}/{{envID}}/flows/{{flowID}}

  6. Step 8: Call the resume endpoint GET {{authPath}}/{{envID}}/as/resume?flowId={{flowID}}

  7. Step 9: Get the access token POST {{authPath}}/{{envID}}/as/token

  8. Step 3: Create user POST {{apiPath}}/environments/{{envID}}/users

  9. Step 2: Create a population POST {{apiPath}}/environments/{{envID}}/populations