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.

How to fetch access token from Microsoft Graph API

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.

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

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

The below response is the outcome of the above code:

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

Code

function getUserInformation() {
$.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/users/{userid | userprincipalname}",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
}).success(function(response) {
console.log(response);
}).error(function(error) {});
}

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

function getUserInformation() {
$.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/users/[email protected]",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
}).success(function(response) {
console.log(response);
}).error(function(error) {});
}

The below response is the outcome of the above code.

So, let's append the code into HTML.

Code

function getUser() {
$.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/users/[email protected]",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
}).success(function(response) {
console.log(response);
var Name = response.displayName;
var Title = response.jobTitle;
var email = response.mail;
var office = response.officeLocation;
var mobile = response.mobilePhone;
var business = response.businessPhones[0];
$('#one').append(Name);
$('#two').append(Title);
$('#three').append(email);
$('#four').append(office);
$('#five').append(mobile);
$('#six').append(business);
}).error(function(error) {});
}

HTML

Name:<p id="one"></p>
Job Title:<p id="two"></p>
Email:<p id="three"></p>
Office:<p id="four"></p>
Mobile:<p id="five"></p>
Business Phone:<p id="six"></p>

Result

6 Comments

Join the conversation! Your thoughts help the community grow.

Suhas Yerramsetty7y ago
How do you send the current logged in user id or principle name dynamically in the GET url?
Devang Mistry7y ago
Does not work
chetan chauhan8y ago
I am getting error: "The identity of the calling application could not be established". Do you have any idea?
- matt lung8y ago
  Same error here. Did you end up figuring out why?
Sravan Kumar8y ago
Nice Article.. Thanks
- Vinodh Narayanan8y ago
  Thanks for your valuable comment