Getting User Properties From Office 365 Using Microsoft Graph API

Vinodh
 
SharePoint MVP
February 4, 2019
 
Rate this article
[Total: 0    Average: 0/5]
 
Views
2562

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.

Graph API Request

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

It retrieves the properties of the current signer in user.

graph api properties

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 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-xxxx-xxxx-xxxx-7911b9a918de", //Provide your app id
             "client_secret": "xxxxxxil5JM4qUvdwOtShsYNvEA=", //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:
graph api outcome
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/vinodhvignesh@sharepointtechie.onmicrosoft.com", 
        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.

graph api code

So, let’s append the code into HTML.

Code

function getUser() {
    $.ajax({
        method: 'GET',
        url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com",
        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

Author Info

Vinodh
 
SharePoint MVP
 
Rate this article
[Total: 0    Average: 0/5]
 
Vinodh is a Microsoft MVP for SharePoint (Office Apps and Services) having 5+ years of experience in Microsoft Technologies. His interest and expertise includes SharePoint Online Development, PowerApps Development, Flows ...read more
 

Leave a comment