jQuery SDK

Summary

In this topic you will get an overview how to use jQuery SDK to connect to The Identity Hub.

Contents

  • Installing the SDK
  • Configure the identityService
  • Authenticate
  • Getting information on the current user
  • Getting information on the current user's friends
  • Api

Installing the SDK

To install the SDK, run the following bower command in a command prompt



    bower install theidentityhub-jquery

Configure the identityService



    $.identityService.config({
        baseUrl: "https://www.theidentityhub.com/{tenant}",
        clientId: "[YOUR_CLIENT_ID]",
        redirectUri: "[YOUR_REDIRECT_URI]",
        popup: false
    });

To initialize the identityService, call the config method passing in your configuration options. See the API documentation for more information on the option parameters.

Authenticate

By default the identityService will automatically start the sign in process and redirect to The Identity Hub's Authentication page. If you want to control the sign in process yourself, you can add and set the manualSignIn option parameter to true when configuring the identityService (see above).

Use the signIn method to show the user the sign in page.



    $.identityService.signIn();

Getting information on the current user

The $.identityService has a propery principal, which is an object. This object contains 2 properties. isAuthenticated and identity.

Use the isAuthenticated property to check if the current user is successfully authenticated. For example you can bind to this property to show or hide content.

The identity property contains profile information on the current user. See the api documentation for a list of all the properties on the identity object.

Example of using the principal object.

First add some html code to your main page to show the name of the currently signed in user using knockout.


    <span data-bind="text: username"></span>

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.


    $.identityService.signIn().then(function() {
        viewModel.username($.identityService.principal.identity.displayName);
    }

Getting information on the current user's friends

The getFriends method of the identityService will retrieve the list of of friends of the current user.

Example

Add the following html code to your page.


    <section data-bind="foreach: friends">
        <div class="well" data-bind="foreach: friends">
            <h2 data-bind="text: displayName"></h2>
            <div>
                <img data-bind="attr: { src: largePictures[0] }" />
            </div>
        </div>
    </section>

To make this work we need the following code in the viewModel.


    identityService.getFriends().then(function (response) {
        viewModel.friends(response);
    });