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