JavaScript Widget - The OptimalCloud Documentation

The Optimal JavaScript Widget is a JavaScript Widget that can be embedded in an HTML page to do the logic required to perform OpenID Connect SSO to the OptimalCloud. This provides a very low-code solution to enable federation in applications.

To use the Optimal JavaScript Widget, do the following:

Configure an OpenID Connect Application in the OptimalCloud. See the Create a Service Provider section of the OptimalCloud documentation for more information.
Include the Optimal JavaScript Widget JS and CSS files from CDN in your application html.

<!-- Include the CSS file from the OptimalCloud CDN -->

<link href="https://cdn2.theoptimalcloud.com/_downloads/SOFTWARE/OFIS/5.0/TOCWidget.css" type="text/css" rel="stylesheet"/>

<!-- Include the JavaScript file from the OptimalCloud CDN -->

<script src="https://cdn2.theoptimalcloud.com/_downloads/SOFTWARE/OFIS/5.0/TOCWidget-v1.0.js" type="text/javascript"></script>

The URLs for the CSS and JavaScript files are case sensitive!

Add an HTML container with ID “tocSignin-container” in your page where you want the Widget located. The Widget will automatically render in the container.

<div id="tocSignin-container"></div>

In the JavaScript for the page, call the tocFederationInit method, passing your OptimalCloud tenant URI, the Application URI from step 1, and the redirect_uri for the Application.

        const appID = "urn:myap:com";
        tocFederationInit(
            "https://mytenant.theoptimalcloud.com/v5.0",
             appID,
            "http://localhost:55000"
        );

When the page is rendered, the Optimal JavaScript widget will be automatically rendered in the “tocSignin-container” container with a button labeled Sign In.

If the user clicks on the Sign-In button they will be redirected to the OptimalCloud for SSO. After SSO, the user will be redirected back to the redirect_uri URL and the button will be labeled Sign Out. After SSO a local session will be created and will persist until the token lifetime for the Application has expired.

If the user clicks in the Sign Out button, Single-Logout (SLO) will be performed. The local session will be removed and SLO will be performed for all other Applications and IdPs that the user authenticated to in this session. The OptimalCloud session will also be removed.

While the local session is active, the subject from the SSO token can be retrieved using the tocGetSubject method:

let subject = tocGetSubject(appID);

Individual claims from the SSO token can be retrieved using the tocGetClaim method:

let last_name = tocGetClaim(appID, "family_name");

You can download sample code showing how to use the Optimal JavaScript Widget from the Developer Apps tab in the OptimalCloud Portal.