Step 3. Configure connection properties

In this step, you configure the sample app to connect to the authentication tree/journey you created when setting up your server configuration.

Choose how you want to configure the sample app. You can either configure the sample by using dynamic configuration, or by create a .env file.
- Dynamic configuration
- Create a .env file
Open the /sdk-sample-apps/javascript/embedded-login/src/main.js file.

Update the call to Config.setAsync() with the following code:

await Config.setAsync({ serverConfig: { wellknown: '{WELL_KNOWN}' }, clientId: '{WEB_OAUTH_CLIENT}', tree: '{TREE}', scope: '{SCOPE}', redirectUri: `${window.location.origin}/callback.html` });

javascript

Replace the placeholder strings with the values you obtained when preparing your environment.

{WELL_KNOWN}

The .well-known endpoint of your server.

PingOne Advanced Identity Cloud example:

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

How do I find my PingOne Advanced Identity Cloud .well-known URL?

You can view the .well-known endpoint for an OAuth 2.0 client in the PingOne Advanced Identity Cloud admin console:

Log in to your PingOne Advanced Identity Cloud administration console.

Click Applications, and then select the OAuth 2.0 client you created earlier. For example, sdkPublicClient.

On the Sign On tab, in the Client Credentials section, copy the Discovery URI value.

PingAM example:

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

{WEB_OAUTH_CLIENT}

The client ID from your OAuth 2.0 application.

For example, sdkPublicClient

{TREE}

The simple login journey or tree you created earlier.

For example sdkUsernamePasswordJourney.

{SCOPE}

The scopes you added to your OAuth 2.0 application.

For example, address email openid phone profile

The result resembles the following:

main.js

await Config.setAsync({ serverConfig: { wellknown: 'https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/realms/root/realms/alpha/.well-known/openid-configuration' }, clientId: 'sdkPublicClient', tree: 'sdkUsernamePasswordJourney', scope: 'openid profile email address', redirectUri: \`${window.location.origin}/callback.html` });

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

Your .env file has the following initial contents:

Initial .env file

SERVER_URL=$SERVER_URL REALM_PATH=$REALM_PATH SCOPE=$SCOPE TIMEOUT=$TIMEOUT TREE=$TREE WEB_OAUTH_CLIENT=$WEB_OAUTH_CLIENT

properties

Replace the placeholder strings with the values you obtained when preparing your environment.

$SERVER_URL

The base URL of the server to connect to.

Identity Cloud example:

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

Self-hosted example:

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

$REALM_PATH

The realm in your server.

Usually, root for AM and alpha or bravo for Advanced Identity Cloud.

$SCOPE

The scopes you added to your OAuth 2.0 application.

For example, address email openid phone profile

$TIMEOUT

The time, in milliseconds, to allow for each request that communicates with your server.

The default value we recommend is 5000 milliseconds.

$TREE

The simple login journey or tree you created earlier, for example sdkUsernamePasswordJourney.

$WEB_OAUTH_CLIENT

The client_id of the OAuth 2.0 client profile to use , for example sdkPublicClient.

Here’s an example; your values may vary:

AM_URL=https://openam-forgerock-sdks.forgeblocks.com/am REALM_PATH=alpha SCOPE=openid profile email address TIMEOUT=5000 TREE=sdkUsernamePasswordJourney WEB_OAUTH_CLIENT=sdkPublicClient

properties

Ping SDKs

Step 3. Configure connection properties