The Wayback Machine - https://web.archive.org/web/20160315060700/https://community.havenondemand.com/t5/Blog/Calling-the-User-Management-API-with-Angular-and-JQuery/bc-p/1868
Search our Blogs
Showing results for 
Search instead for 
Do you mean 
 

Calling the User Management API with Angular and JQuery

Please note that HP IDOL OnDemand is now HPE Haven OnDemand. The API endpoints have changed to Haven OnDemand. Please see the API documentation for more details.

 

---

 

IDOL OnDemand provides a lot of useful APIs that can take your web app to the next level. The User Management API makes it quick and easy to add a user system. In this tutorial, we’ll go over the syntax for calling the APIs using JQuery and Angular.

 

When you first sign on, you’ll be given an API Key which you’ll use to authenticate your API requests. You can generate additional keys which will also have access to your API data. You can name them for easier tracking but the names are inconsequential.

 

Image 1.png

 

First, let’s create a store. When you create users, they’re assigned to a store. Stores make it easy to group your users. For example, if you are building a marketplace website, you could organize your users into two separate stores, one for vendors and one for shoppers.

 

Image 2.png

 

The overview shows the url for calling the API and shows you the format of the json you will get in the response. This API requires a POST call with two parameters: a name for the store and an API key.

Calling this in JQuery:

 

It’s a good practice to store the parameters and the url in variables

 

var AddStoreAPI = 'https://api.idolondemand.com/1/api/sync/addstore/v1';
var mystore = 'anynameyouwant';
var apikey = 'yourapikey';

 

But for now, let’s write it out.

 

$.post('https://api.idolondemand.com/1/api/sync/addstore/v1', { 'store' : 'mystore', 'apikey' : '<API KEY>'})
//on success or error, print the message to console
    .success(function(message) {
        console.log(message);
    })
    .error(function(message) {
        console.log(message);
    });

 

Your console should print “store was added”

 

Angular provides the $http service which we’ll use in place of $.post

 

//let’s use those variables we created:
$http.post(AddStoreAPI, { 'store' : mystore, 'apikey' : apikey})
    .success(function(message) {
        console.log(message);
    })
    .error(function(message) {
        console.log(message);
    });

 

Note: the $http service has to be injected into the factory or controller before it can be called. 

 

Now that we have a store, let’s add a user. The overview of Add User API tells us that it takes a POST call with store, email, and password as parameters. Just replace the $http.post with $.post for JQuery.

 

//let's create variables for each parameter
var apiAddUser = "https://api.idolondemand.com/1/api/sync/adduser/v1";
//name the store we just created
var store = 'storename';
var email = '[email protected]';
var password = 'mypassword';
var apikey = 'myapikey';
$http.post(apiAddUser, {
    'store': 'users',
    'email': email,
    'password': password,
    'apikey': apiKey
}).
    success(function(message) {
        console.log(message);
    }).
    error(function(error) {
        console.log(error);
    });

 

Authentication API looks almost exactly the same as the Add User API. Just replace the ‘adduser’ in the API url with ‘authenticate’.

 

var apiAuthUser = "https://api.idolondemand.com/1/api/sync/authenticate/v1";
var userToken;
$http.post(apiAuthUser, {
    'store': 'users',
    'user': email,
    'password': password,
    'apikey': apiKey
}).
    success(function (message, token) {
        console.log(message);
        userToken = token;
    }).
    error(function(message) {
        console.log(message);
    });

 

You see here that we are doing something different with the response. On success, we’ll be taking the token that is returned and storing in the userToken variable. We’ll be passing this token to the Verify API.

The token should be in the following format:

 

{
    "expiry": 1434411014,
    "secretId": "secret",
    "data": {
      "user": "[email protected]"
    },
    "hash": "$2a$12$ztXm4JbO1y6hqCXa1C1Mi.smZoZO6NSJO9ZYxGLSsnCLNj67xK3XC"
  }

 

When you “Try” the API on idolondemand.com, make sure you pass this entire token from { to } in the parameter.

 

Next, we’ll verify the user with Verify API. This time, we’re sending a GET request, which looks like this:

 

var apiVerify = "https://api.idolondemand.com/1/api/sync/verify/v1?token=";
$http.get(apiVerify + userToken + "&apikey=" + apiKey).
    success(function(message) {
        console.log(message);
    }).
    error(function(message) {
        console.log(message);
    });

 

When you’re calling an API with a GET request, you can pass all of the parameters within the URL.

If we were to write it out, it would look like:

https://api.idolondemand.com/1/api/sync/verify/v1?token= "expiry": 1434411014, "secretId": "secret", "data": { "user": "[email protected]"},"hash":"$2a$12$ztXm4JbO1y6hqCXa1C1Mi.smZoZO6NSJO9ZYxGLSsnCLNj67xK3XC"}&apikey=<apikeyhere>

 

We can now add a user, authenticate, and verify. Let’s try one more API.

For the List Users API, we’ll be doing another GET request.

 

var apiListUser = "https://api.idolondemand.com/1/api/sync/listusers/v1?store=users&apikey=";
$http.get(apiListUser + apiKey).
    success(function(data) {
        return data['users'];
    });

 

This one is much simpler since it has only one parameter (store=users) and we can pass it right on the url since it is a GET request.

The response will return a list of users in json format:

{

    "users": [

        "[email protected]",

        "[email protected]",

        "[email protected]",

        "[email protected]",

    ]

}

data[‘users’] will return: [“[email protected]”, ’[email protected]’,  "[email protected]",  "[email protected]" ]

 

All of the API calls follow the same format. It’s just a matter of passing the right parameters. Try it with Delete User, Assign Roles, and other APIs.

 

 

Author: Kevin Nam 

Co-authors: Thang Nguyen-Le, Wayne TengPaolo Liwanag

Comments
CoolGuyThatCode | ‎06-21-2015 07:57

Awesome! Thank you so much.  

thangtheman New Member | ‎06-21-2015 07:58

One of the best tutorial on here! Thx guys! 

Social Media
Topics
† The opinions expressed above are the personal opinions of the authors, not of HPE. By using this site, you accept the Terms of Use and Rules of Participation