AngularJS SDK

Summary

In this topic you will get an overview how to use AngularJS 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 AngularJS SDK, run the following bower command in a command prompt


    bower install theidentityhub-angular

Configure the identityService


    angular.module('[YOUR_APP_NAME]', ['identityHub'])
        .config(function (identityServiceProvider) {
                identityServiceProvider.config({
                baseUrl: "https://www.theidentityhub.com/{tenant}",
                clientId: "[YOUR_CLIENT_ID]",
                redirectUri: "[YOUR_REDIRECT_URI]",
                popup: false
            });
        });

To initialize the identityService, call the identityServiceProvider object instance and call the init 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.


    <div ng-controller="IdentityController">
        <span ng-show="principal.isAuthenticated">Welcome {{principal.identity.displayName}}</span>
    </div>

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';

    angular.module('[YOUR_APP_NAME]')
           .controller('IdentityController', function ($scope, identityService) {
               $scope.principal = identityService.principal;
           }

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 a new or existing template view


<section ng-controller="FriendsController">
    <div class="well" ng-repeat="friend in friends">
        <h2>{{friend.displayName}}</h2>
        <div>
            <img src="{{friend.largePictures[0]}}" />
        </div>
    </div>
</section>

To make this work we need the following code for the controller.


(function () {
    'use strict';

    angular
        .module('[YOUR_APP_NAME]')
        .controller('FriendsController', function ($scope, identityService) {
            identityService.getFriends().then(function (response) {
                $scope.friends = response;
            });
        });
})();