Getting 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.
 
SharePoint


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.   
  8. function requestToken() {  
  9.     $.ajax({  
  10.         "async"true,  
  11.         "crossDomain"true,  
  12.         "url""https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie  
  13.         "method""POST",  
  14.         "headers": {  
  15.             "content-type""application/x-www-form-urlencoded"  
  16.         },  
  17.         "data": {  
  18.             "grant_type""client_credentials",  
  19.             "client_id ""8baf0301-27df-44b1-b4fe-7911b9a918de"//Provide your app id  
  20.             "client_secret""DxSF1K+JKl7LWJK8+3Ibg4il5JM4qUvdwOtShsYNvEA="//Provide your secret  
  21.             "scope ""https://graph.microsoft.com/.default"  
  22.         },  
  23.         success: function(response) {  
  24.             console.log(response);  
  25.             token = response.access_token;  
  26.             getUserInformation();  
  27.         },  
  28.         error: function(error) {  
  29.             console.log(JSON.stringify(error));  
  30.         }  
  31.     })  
  32. }  
The below response is the outcome of the above code:
 
SharePoint
 
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) {});  
  12. }  
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/[email protected]",  
  5.         headers: {  
  6.             'Authorization''Bearer ' + token,  
  7.             'Content-Type''application/json'  
  8.         },  
  9.     }).success(function(response) {  
  10.         console.log(response);  
  11.     }).error(function(error) {});  
  12. }  
The below response is the outcome of the above code.
 
SharePoint
 
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/[email protected]",  
  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) {});  
  24. }  
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

SharePoint