Accessing Office 365 / Microsoft Cloud Data On SharePoint Using Graph API

Introduction

In this article series, we are focusing on accessing the Office 365 and Microsoft cloud services data using Graph REST API calls. Here, in this article, let us see how to access the Office 365 Outlook calendar events with the help of Microsoft Graph API.

Microsoft Graph exposes Office 365 and other Microsoft cloud services data like Outlook mail, Outlook calendar, OneDrive, tasks, groups, SharePoint, etc. through single endpoint URL (https://graph.microsoft.com).

In my previous article, you have seen the basic introduction and app registration process for accessing the Microsoft Graph data.

The data can be extracted by the following flow.

Get access token for authentication.
Access the Microsoft services data over graph API.

Acquire Access Token

There are two ways to get an access token. Here, I am only focusing on single approach. In this approach, we will be getting the access token using authentication server URL (https://login.microsoftonline.com/<yourdomain.onmicrosoft.com>/oauth2/authorize) with GET method.

The parameters passed for getting the token are,

Client ID
Response type
Resource URL
Redirect URL

Fire the constructed URL in the browser using window.location script, and the page will be redirected to the redirect URL specified. In the response URL, the access token will be available. The response URL will be redirect URL specified for redirection.

function requestToken() {
var clientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
var replyUrl = 'https://yourdomain.sharepoint.com';
var resource = "https://graph.microsoft.com";
var authServer = 'https://login.microsoftonline.com/yourdomain.onmicrosoft.com/oauth2/authorize?';
var responseType = 'token';
var url = authServer +
"response_type=" + encodeURI(responseType) + "&" +
"client_id=" + encodeURI(clientId) + "&" +
"resource=" + encodeURI(resource) + "&" +
"redirect_uri=" + encodeURI(replyUrl);
window.location = url;
}

Extract the access token from the response URL. The token will be retrieved once the page is redirected. The following code snippet shows retrieving the token.

var token = getParameterByName['access_token'];
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Get the Cloud Data using Graph API

In the AJAX call, set the required graph URL. In this case, we are trying to extract the calender events of the logged in user, so the graph URL will be outlook calendar events. Set authorization bearer token (access token) in the header property. Using the get method, access the required events for the logged in user.

The graph URL for accessing logged in user events will be https://graph.microsoft.com/v1.0/me/calendar/events.

The following snippet shows the extraction of events using Graph API.

$.ajax({
url: "https://graph.microsoft.com/v1.0/me/messages",
type: "GET",
headers: { "Authorization": "Bearer "+token },
success: function (data) {
for(var i=0;i<data.value.length;i++){
// extract the event subject, web link, etc.
}
},
error: function (sender, args) {
console.log("error");
}
});

Summary

Thus, you learned accessing the Microsoft cloud data using the Microsoft graph URL on SharePoint. In this sample, Office 365 Outlook calendar events are retrieved. Likewise, other Microsoft cloud data can also be accessed.

In the next article, you will see a full sample code of extracting the Microsoft cloud data.

3 Comments

Join the conversation! Your thoughts help the community grow.

Prashanth9y ago
Hi Nakkeeran , any alternate using "window.location = url;" to get access_token ?
- Nakkeeran Natarajan9y ago
  Should look at the work arounds. this can be played well with javascripts, but should see the actual implementation.
- Prashanth9y ago
  Hi Nakkeeran , Thank you for your response. As I'm using "window.location = url;" to get "access_token" page is getting reloaded twice as the reply URL is the home page.I'm getting the information from Graph. Disadvantage is when user login into SharePoint again it redirects to get access_token.