Connect a SinglePage JavaScript app

With a few steps you can connect your SPA Javascript application to The Identity Hub using OAuth.

A. Create an App

  1. Create an App for your SPA Javascript application. See Create an App for details.
  2. For Redirect URI's set the URI of your website including the port number if it is different than the default 443.

B. Add logic to signin.

  1. Navigate to the Apps list (https://www.theidentityhub.com/{tenant}/Admin/App) and select the application you are connecting.
  2. Open the Single Page App section (you might need to scroll down to find the section).
  3. Expand the section and copy the following information:
  • Your ClientId
  • Your Redirection Uri
  • The authorization endpoint
  1. In your SPA add a sign in button or link.
  2. Bind a click event handler to the link and use the following code to form the url and redirect the browser.
    var url = [AUTHORIZATION_ENDPOINT] + "?response_type=token"
        + "&client_id=" + encodeURIComponent("[YOUR_CLIENT_ID]")
        + "&scope=" + encodeURIComponent("[ANY SCOPE]")
        + "&redirect_uri=" + encodeURIComponent("[YOUR_REDIRECT_URI]");
        + "&state=" + encodeURIComponent(window.location.pathname);

    window.location.href = url;

C. Add logic to retrieve the token.

Once a user clicks on the sign in link, the browser is redirected to the url you constructed above. After the user is authenticated the access token is returned using a redirect to the redirect uri you specified when registering your SPA.
Now we need to extract the access token from the uri fragment, by adding the following code to the page we registered as our redirect uri page.

    function getParameters() {
        var parameters = {};
        var queryString = location.hash.substring(1);
        var regex = /([^&=]+)=([^&]*)/g;
        var parameter;
        while (parameter = regex.exec(queryString)) {
            parameters[decodeURIComponent(parameter[1])] = decodeURIComponent(parameter[2]);
        }
        return parameters;
    };

    function parseResponse() {
        var parameters = getParameters();
        if (parameters) {
            if (parameters.error && parameters.error !== "") {
                // handle the error
            }
            else {
                var accessToken = parameters.access_token;
                if (accessToken && accessToken !== "") {
                    $.cookie("token", accessToken, { secure: true, path: '/' });
                }
            
                var state = parameters.state;
                if (state && state !== "") {
                        window.location.href = state;
                }
            }
        }
    }

When the page is loaded we call parseResponse to retrieve the access token and store it in a secure domain cookie.
We use the state parameter to return the user to the initial page from where he clicked the sign in link.

D. Use the token to call an API.

When you want to call an API you need to provide the access token in the HTTP Authorization header. If you are using the ajax functions of jQuery, this can easily be done by setting the header in the beforeSend callback. The following code demonstrates how to inject the access token in the header:

   function beforeSend(xhr, settings) {
        var accessToken = $.cookie("token");
        if (accessToken && accessToken !== "") {
            xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
        }
    };

    $.ajax("/{tenant}/api/identity/v1", { 
        type: "GET",
        data: null,
        beforeSend: beforeSend 
    });

The beforeSend function will retrieve the access token we stored in the cookie and if an access token is available, it will set the HTTP Authorization header. When invoking the ajax call, we set the beforeSend callback to the beforeSend function.