Getting User Properties From Office 365 Using Microsoft Graph API


N Vinodh
SharePoint MVP
Published On :   04 Feb 2019
Visit Count
Today :  3    Total :   226


In this article, I have explained how to retrieve user properties from Office 365 using Microsoft Graph API

In my previous article, I have explained how to fetch the access token to consume graph APIs in web applications.

When we retrieve a user from Office 365 it returns the default properties such as - user id, business phone, display name, job title, mail, userprincipalname, mobilephone, and office location.

Use Microsoft Graph Explorer to retrieve the default properties of the below request.

Request

GET https://graph.microsoft.com/v1.0/{userid | userprincipalname}

It retrieves the properties of the current signer in user.

clip_image002

Now, I am going to retrieve the user information from the SharePoint site.

Open the SharePoint site.

Create a user.html file under siteAssets.

Step1
Create the function requesttoken() to fetch the access token and use it in the headers.

Code

  1. // refer jquery
  2. < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < /script> < script type = "text/javascript" > 
  3. var token; // create global variable holds the access token
  4. $(document).ready(function() { 
  5.     requestToken(); // call the requesttoken function on page load
  6. }); 
  7. function requestToken() { 
  8.     $.ajax({ 
  9. "async": true
  10. "crossDomain": true
  11. "url": "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie 
  12. "method": "POST", 
  13. "headers": { 
  14. "content-type": "application/x-www-form-urlencoded"
  15.         }, 
  16. "data": { 
  17. "grant_type": "client_credentials", 
  18. "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id
  19. "client_secret": "DxSF1K+JKl7LWJK8+3Ibg4il5JM4qUvdwOtShsYNvEA=", //Provide your secret
  20. "scope ": "https://graph.microsoft.com/.default"
  21.         }, 
  22.         success: function(response) { 
  23.             console.log(response); 
  24.             token = response.access_token; 
  25.             getUserInformation(); 
  26.         }, 
  27.         error: function(error) { 
  28.             console.log(JSON.stringify(error)); 
  29.         } 
  30.     }) 
  31. }

The below response is the outcome of the above code:

clip_image004

Now, create a function getUserProperties() and retreive the user properties from Microsoft Graph API.

Code

  1. function getUserInformation() { 
  2.     $.ajax({ 
  3.         method: 'GET', 
  4.         url: "https://graph.microsoft.com/v1.0/users/{userid | userprincipalname}", 
  5.         headers: { 
  6. 'Authorization': 'Bearer ' + token, 
  7. 'Content-Type': 'application/json'
  8.         }, 
  9.     }).success(function(response) { 
  10.         console.log(response); 
  11.     }).error(function(error) {}); 

After passing the user principalname, the code looks like below.

  1. function getUserInformation() { 
  2.     $.ajax({ 
  3.         method: 'GET', 
  4.         url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com", 
  5.         headers: { 
  6. 'Authorization': 'Bearer ' + token, 
  7. 'Content-Type': 'application/json'
  8.         }, 
  9.     }).success(function(response) { 
  10.         console.log(response); 
  11.     }).error(function(error) {}); 

The below response is the outcome of the above code.

clip_image006

So, let's append the code into HTML.

Code

  1. function getUser() { 
  2.     $.ajax({ 
  3.         method: 'GET', 
  4.         url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com", 
  5.         headers: { 
  6. 'Authorization': 'Bearer ' + token, 
  7. 'Content-Type': 'application/json'
  8.         }, 
  9.     }).success(function(response) { 
  10.         console.log(response); 
  11. var Name = response.displayName; 
  12. var Title = response.jobTitle; 
  13. var email = response.mail; 
  14. var office = response.officeLocation; 
  15. var mobile = response.mobilePhone; 
  16. var business = response.businessPhones[0]; 
  17.         $('#one').append(Name); 
  18.         $('#two').append(Title); 
  19.         $('#three').append(email); 
  20.         $('#four').append(office); 
  21.         $('#five').append(mobile); 
  22.         $('#six').append(business); 
  23.     }).error(function(error) {}); 

HTML

  1. Name:<p id="one"></p>
  2. Job Title:<p id="two"></p>
  3. Email:<p id="three"></p>
  4. Office:<p id="four"></p>
  5. Mobile:<p id="five"></p>
  6. Business Phone:<p id="six"></p>

Result

clip_image008

Categories