Orchestration SDKs

Step 2. Configure connection properties

PingOne JavaScript

There are two projects in this tutorial that require configuration:

Client ReactJS app

The front-end client app, written in ReactJS, that handles the UI and authentication journeys.

Backend API server

A backend REST API server that uses a confidential OAuth 2.0 client to contact the authorization server. The API server handles storage and retrieval of your personal "Todo" items.

Configure the ReactJS client app

  1. In the IDE of your choice, open the sdk-sample-apps folder you cloned previously.

  2. Copy the .env.example file in the sdk-sample-apps/javascript/reactjs-todo-oidc folder and save it with the name .env within this same directory.

    Example client sdk-sample-apps/javascript/reactjs-todo-oidc/.env file
    API_URL=
DEBUGGER_OFF=true
DEVELOPMENT=
REALM_PATH=alpha
WEB_OAUTH_CLIENT=
SCOPE=
WELLKNOWN_URL=

  3. Update the configuration block with the details of your server environment.

    API_URL

    The URL and port number on which you are running the TODO API backend server.

    For example, http://localhost:9443

    DEBUGGER_OFF

    Set to true, to disable debug statements in the app.

    These statements are for learning the integration points at runtime in your browser.

    When you open the browser’s developer tools, the app pauses at each integration point. Code comments are placed above each one explaining their use.

    DEVELOPMENT

    When true, this provides better debugging during development.

    REALM_PATH

    This value is not required for PingOne servers.

    WEB_OAUTH_CLIENT

    The client ID of the public OAuth 2.0 application in PingOne.

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

    SCOPE

    The scopes you added to your public OAuth 2.0 application.

    Scopes should be space-separated, and the entire value should be enclosed in single-quotes.

    For example, 'openid profile email address'

    WELLKNOWN_URL

    The .well-known endpoint from your server.

    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 your OAuth 2.0 client.

      For example, sdkPublicClient.

    3. On the Overview tab, expand the Connection Details section, and then copy the OIDC Discovery Endpoint value.

      Locating the .well-known URL in a PingOne client profile.

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

    The result will resemble the following:

    Example client sdk-sample-apps/javascript/reactjs-todo-oidc/.env file
    API_URL=http://localhost:9443
DEBUGGER_OFF=true
DEVELOPMENT=true
REALM_PATH=
WEB_OAUTH_CLIENT=6c7eb89a-66e9-ab12-cd34-eeaf795650b2
SCOPE='openid profile email address'
WELLKNOWN_URL=https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration

  4. Save your changes.

Configure the API server app

  1. In the IDE of your choice, open the sdk-sample-apps folder you cloned previously.

  2. Copy the .env.example file in the sdk-sample-apps/javascript/todo-api folder and save it with the name .env within this same directory.

    The file contains configuration to connect to the same public OAuth 2.0 client as the TODO app itself:

    Example default API server sdk-sample-apps/todo-api/.env file
    # 'AIC' or 'PINGONE'
SERVER_TYPE=
# AM URL for AIC or PingOne base URL with env ID for PingOne
SERVER_URL=
PORT=
# 'alpha' or 'bravo' for AIC server type. Not used for PingOne.
REALM_PATH=
# Confidential client ID for AIC or WebApp public client ID for PingOne
REST_OAUTH_CLIENT=
# Confidential client secret for AIC. Not used for PingOne.
REST_OAUTH_SECRET=

  3. Update the configuration block with the details of your server environment.

    SERVER_TYPE

    Ensures the sample app uses the correct behavior for the different servers it supports, for example the endpoint to use for introspecting tokens received from the client app.

    For PingOne tenants, specify PINGONE.

    SERVER_URL

    The URL of the authorization server to connect to. Enter the base URL of the authentication endpoint for your PingOne instance, followed by the environment ID.

    For example, in the Canada region, your server URL value might be https://auth.pingone.ca/3072206d-c6ce-ch15-m0nd-f87e972c7cc3

    Do not use the console URL (https://console.pingone.ca) or app URL (https://apps.pingone.ca) for this property.
    PORT

    The port number on which to run the TODO API server.

    You’ll need this port number when configuring the client app to connect to the TODO API server.

    If not specified, the TODO API server defaults to running on port 9443

    REALM_PATH

    This value is not required for PingOne servers.

    REST_OAUTH_CLIENT

    Enter the ID of the same public client you used for the client application earlier.

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

    REST_OAUTH_SECRET

    This value is not required for PingOne servers.

    The result will resemble the following:

    Example completed API server sdk-sample-apps/todo-api/.env file
    # 'AIC' or 'PINGONE'
SERVER_TYPE=PINGONE
# AM URL for AIC or PingOne base URL with env ID for PingOne
SERVER_URL=https://auth.pingone.ca/3072206d-c6ce-ch15-m0nd-f87e972c7cc3
PORT=9443
# 'alpha' or 'bravo' for AIC server type. Not used for PingOne.
REALM_PATH=
# Confidential client ID for AIC or WebApp public client ID for PingOne
REST_OAUTH_CLIENT=6c7eb89a-66e9-ab12-cd34-eeaf795650b2
# Confidential client secret for AIC. Not used for PingOne.
REST_OAUTH_SECRET=

  4. Save your changes.