Connect a SinglePage jQuery app

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

A. Create an App

  1. Create an App for your SPA jQuery 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. Install theidentityhub-jquery package.

Install the package in your project using bower

bower install theidentityhub-jquery

C. Configure your SPA jQuery App.

  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. Include the following configuration to your project. Either in a separate file or in your app.js file.
    $.identityService.config({
        baseUrl: "https://www.theidentityhub.com/{tenant}",
        clientId: "[YOUR_CLIENT_ID]",
        redirectUri: "[YOUR_REDIRECT_URI]",
        popup: false
    });

Start your app. You will be automatically redirected to The Identity Hub to sign in.

D. Use the SDK to show info on the current user..

We will now use the identityService to show info on the current user.

  1. First add some html code to your main page to show the name of the currently signed in user.
    <div>
        <span data-bind="visible: isAuthenticated, text: identity.displayName"></span>
        <a data-bind="visible: !isAuthenticated(), click: signIn">Sign In</a>
    </div>
  1. To make this work we need the following code for the controller. Create a IdentityController.js file and reference it from your main html page.
    'use strict';

    var identityViewModel = (function() {
        var vm = {
            isAuthenticated: ko.observable(false);
            identity : {
                displayName: ko.observable('');
            },
            signIn: signIn
        }

        return vm;

        function signIn() {
            $.identityService.signIn().then(function() {
                vm.isAuthenticated($.identityService.principal.isAuthenticated);
                vm.identity.displayName(
            });
        }

    })();

Next start your App. You will be redirected to The Identity Hub to sign in.
After you have signed in, the browser will redirect you back to your App and you wil see the welcome message displayed.