Advanced Identity Cloud/PingAM Login Widget

Step 2. Configure connection properties

PingOne Advanced Identity Cloud PingAM Login Widget

There are two projects in this tutorial that require configuration:

Backend API server

A backend REST API server that uses a confidential OAuth 2.0 client to validate access tokens. The API server handles storage and retrieval of your personal Todo items.

Client ReactJS app

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

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.

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

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

    SERVER_TYPE

    Set to AIC for PingOne Advanced Identity Cloud or PingAM.

    SERVER_URL

    The URL of the server to connect to, including the deployment path of the Access Management component.

    PingOne Advanced Identity Cloud example

    https://openam-forgerock-sdks.forgeblocks.com/am

    PingAM example

    https://openam.example.com:8443/openam

    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

    The realm in which the confidential OAuth 2.0 client profile is configured.

    PingOne Advanced Identity Cloud example

    alpha or bravo

    PingAM example

    root

    REST_OAUTH_CLIENT

    The client ID of the confidential OAuth 2.0 application you created earlier.

    For example, sdkConfidentialClient

    REST_OAUTH_SECRET

    The secret of the confidential OAuth 2.0 application you created earlier.

    For example, 5tr0ngP@S5w0rd!

    The result will resemble the following:

    Example completed API server sdk-sample-apps/javascript/todo-api/.env file
    # 'AIC' or 'PINGONE'
SERVER_TYPE=AIC
# AM URL for AIC or PingOne base URL with env ID for PingOne
SERVER_URL=https://openam-forgerock-sdks.forgeblocks.com/am
PORT=9443
# 'alpha' or 'bravo' for AIC server type. Not used for PingOne.
REALM_PATH=alpha
# Confidential client ID for AIC or WebApp public client ID for PingOne
REST_OAUTH_CLIENT=sdkConfidentialClient
# Confidential client secret for AIC. Not used for PingOne.
REST_OAUTH_SECRET=5tr0ngP@S5w0rd!

  4. Save your changes.

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-login-widget folder and save it with the name .env within this same directory.

    Example client sdk-sample-apps/javascript/reactjs-todo-login-widget/.env file
    WELLKNOWN_URL=
WEB_OAUTH_CLIENT=
SCOPE=openid profile email
PORT=8443
API_URL=http://localhost:9443
DEBUGGER_OFF=true
DEVELOPMENT=true
JOURNEY_LOGIN=Login
JOURNEY_REGISTER=Registration

# required when PingOne Protect callbacks are present
PINGONE_ENV_ID=

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

    WELLKNOWN_URL

    The .well-known endpoint from your server.

    PingOne Advanced Identity Cloud

    Copy the discovery URI from the public OAuth 2.0 client in the admin console. For example:

    https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration

    PingAM

    Form the URL from the AM base URL, /oauth2, the complete realm hierarchy, and /.well-known/openid-configuration. For example:

    https://openam.example.com:8443/openam/oauth2/realms/root/.well-known/openid-configuration

    WEB_OAUTH_CLIENT

    The client ID of your public OAuth 2.0 application for the ReactJS web application.

    For example, sdkPublicClient.

    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'.

    PORT

    The port on which to serve the ReactJS client.

    Defaults to 8443.

    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 debugger statements in the app.

    These statements are for learning the Login Widget integration points at runtime in your browser. When you open the browser’s developer tools, the app pauses at each integration point.

    DEVELOPMENT

    When true, this provides better debugging during development.

    JOURNEY_LOGIN

    The name of the login journey in PingOne Advanced Identity Cloud, or login tree in PingAM.

    Defaults to Login.

    JOURNEY_REGISTER

    The name of the registration journey or tree.

    Defaults to Registration.

    PINGONE_ENV_ID

    The PingOne environment identifier.

    Set this value when your configured journey or tree uses PingOne Protect callbacks. Otherwise, leave it empty.

    The result will resemble the following:

    Example client sdk-sample-apps/javascript/reactjs-todo-login-widget/.env file
    WELLKNOWN_URL=https://example.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration
WEB_OAUTH_CLIENT=sdkPublicClient
SCOPE='openid profile email'
PORT=8443
API_URL=http://localhost:9443
DEBUGGER_OFF=true
DEVELOPMENT=true
JOURNEY_LOGIN=Login
JOURNEY_REGISTER=Registration
PINGONE_ENV_ID=

  4. Save your changes.