How To: Sign into your AngularJS 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 AngularJS App at The Identity Hub.
  • Step 2 - Install the theidentityhub-angular package
  • Step 3 - Configure your AngularJS App.
  • Step 4 - Use the SDK to show info on the current user.
  • Troubleshooting

Objectives

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

Summary of Steps

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

Step 1 - Register your AngularJS App with the Identity Hub

In this step you will register your AngularJS 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-angular package.

Install the package in your project using bower


bower install theidentityhub-angular

Step 3 - Configure your AngularJS 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.


    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
                });
           });

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

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.