How To: Sign into your Single Page jQuery App with The Identity Hub

Summary

In this topic you will learn the how to integrate the sign in features of The Identity hub in your AngularJS Apps.

Contents

  • Objectives
  • Summary of Steps
  • Step 1 - Register your JavaScript App at The Identity Hub.
  • Step 2 - Install the theidentityhub-jquery package
  • Step 3 - Configure your App.
  • Step 4 - Use the SDK to show info on the current user.
  • Troubleshooting

Objectives

  • Secure sign in to your JavaScript app using The Identity Hub - {tenant}

Summary of Steps

  • Step 1 - Register your JavaScript App at The Identity Hub.
  • Step 2 - Install the theidentityhub-jquery package
  • Step 3 - Configure your JavaScript App.
  • Step 4 - Use the SDK to show info on the current user.

Step 1 - Register your JavaScript App with the Identity Hub

In this step you will register your JavaScript App as an App at The Identity Hub.

For more information about Apps see How To: What is an App?.

  • Navigate to the Apps Admin Page and click on New.

  • Provide the following information
    • Name: The name of the app. Give a name to identify your SPA

    • Description: The description of the app.

  • Open the OAuth parameters section by clicking on the arrow.

  • Provide the following information
    • Token life time The life time of the issued token.

    • Redirection Uri: One or more redirection uri's. Only https is allowed. After the token is issued it will be passed as a parameter in the fragment of the redirection uri.

      For the moment, register your start html page here.

  • Click Save. You will navigate to the detail page of the just created App.


Step 2 - Install theidentityhub-jquery package.

Install the package in your project using bower


bower install theidentityhub-jquery

Step 3 - Configure your JavaScript App.

Expand the Single Page App section, and copy the following information

  • Your ClientId
  • Your Redirection Uri
  • The authorization endpoint

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.


Step 4 - Use the SDK to show info on the current user..

We will now use the identityService to show info on the current user. 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>

To make this work we need the following code for the viewmodel. Create a identityViewModel.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.