Post
Ask Question

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

Introduction

In this article series, we are focusing on accessing the Office 365 and Microsoft Cloud Services data, using graph REST API calls.

In this article, let us look at the samples for accessing the office 365 outlook events and outlook messages with the help of Microsoft graph API.

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

In my previous articles, you will have seen the basic introduction, app registration process, getting access token for the authentication and accessing Microsoft Services data over graph API, using AJAX call.

Get data 

There will be two calls to access Microsoft Cloud data. First call is to acquire the access token for any further authorizations and the second call is to access the data with the access token.

  1. On page load, using the condition; check if the URL consists of an access token parameter. Normally on the first page load, there will not be any parameters present on the URL).

  2. If an access token is not available, acquire the access token with the help of an authentication Server URL with the necessary parameters. This step was explained in my previous article with detailed steps. On success, the page will be redirected to the redirected URL specified with an access token.

  3. If the token is available on the URL, decode the response URL and extract the token.

  4. Once the token is extracted and available, access Microsoft Cloud data with an appropriate graph URL. The access token, which has been acquired, should be passed in the header for the authorizations while accessing the data with graph URL.

Note

The acquired token will be valid for one hour.

JavaScript code snippet given below shows the entire functionality to retrieve the calendar events with the explained authentication model given above.
  1. $(document).ready(function(){  
  2.     var token = getParameterByName['access_token'];   
  3.       
  4.     if(token == null || token == undefined){  
  5.         // On Page load or if token not available on the URL.  
  6.         requestToken();  
  7.     }  
  8.     else{  
  9.         // Token available, extract the data  
  10.         $.ajax({  
  11.             url: "https://graph.microsoft.com/v1.0/me/messages",  
  12.             type: "GET",  
  13.             headers: { "Authorization": "Bearer "+token },  
  14.             success: function (data) {  
  15.                 var messages = reactHandler.state.messages;  
  16.                 // Extract the data  
  17.                 for(var i=0;i<data.value.length;i++){  
  18.                     if(data.value[i].subject != null){  
  19.                         messages.push({  
  20.                             subject:data.value[i].subject,  
  21.                             weblink:data.value[i].webLink   
  22.                         })  
  23.                     }  
  24.                       
  25.                 }  
  26.                 reactHandler.setState({  
  27.                     messages: messages  
  28.                 });  
  29.             },  
  30.             error: function (sender, args) {  
  31.                 console.log("error");  
  32.             }  
  33.         });  
  34.   
  35.     }  
  36. });  
  37.   
  38. // Extract the access token from the URL  
  39. function getParameterByName(name, url) {  
  40.     if (!url) url = window.location.href;  
  41.     name = name.replace(/[\[\]]/g, "\\$&");  
  42.     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),  
  43.         results = regex.exec(url);  
  44.     if (!results) return null;  
  45.     if (!results[2]) return '';  
  46.     return decodeURIComponent(results[2].replace(/\+/g, " "));  
  47. }  
  48.   
  49. // Get the token using the redirect URL  
  50. function requestToken() {   
  51.   var clientId    = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';  
  52.   var replyUrl    = 'https://nakkeerann.sharepoint.com';   
  53.   var resource = "https://graph.microsoft.com";  
  54.   var authServer  = 'https://login.microsoftonline.com/nakkeerann.onmicrosoft.com/oauth2/authorize?';    
  55.   var responseType = 'token';   
  56.   
  57.   var url = authServer +   
  58.             "response_type=" + encodeURI(responseType) + "&" +   
  59.             "client_id=" + encodeURI(clientId) + "&" +   
  60.             "resource=" + encodeURI(resource) + "&" +   
  61.             "redirect_uri=" + encodeURI(replyUrl);   
  62.   // Redirect to the URL, which will have access token on successful authentication  
  63.   window.location = url;   
  64. }   

Summary

Thus, you have seen accessing Microsoft Cloud data, using Microsoft graph URL on SharePoint. In this sample, Office 365 Outlook calendar events are retrieved.


Similar Articles