Retrieve Files And Items From SharePoint Using Microsoft Graph API

Introduction

In this article, I have explained how to retrieve the items & files from SharePoint using Microsoft Graph API.

Why use Graph API?

Recently, I had the query from one developer who needs to show the file information from the document library, which is always possible using the SharePoint REST API. But they face problems for some users who not have access to the library. So let’s achieve the same using MS GraphAPI

Endpoint

https://graph.microsoft.com/v1.0/sites/{siteid}/lists/{listid}/items

Permission Scope

Sites.Read.All

In your tenant Azure portal, navigate to azure active directory “App Registration.” Open your app to provide permission for accessing the SharePoint site lists & libraries via Microsoft Graph API.

Retrieve Files And Items From SharePoint Using Microsoft Graph API

Once you've navigated to the registered application -> Click API Permissions

Now, choose Add Permission -> Select Microsoft Graph API ->Application Permission -> Under “Sites” node select “Sites.Read.All”

Finally, it looks like below:

Once done, let’s display file information in SharePoint Content Editor Webpart with the help of some HTML/JQuery.

Create the function name “requestToken()” to fetch the access token on a page load.

function requestToken() {
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://howling-crypt-47129.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": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
"scope ": "https://graph.microsoft.com/.default"
},
success: function(response) {
console.log(response);
token = response.access_token;
console.log(token);
FetchSharepointLibraries();
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}

Required Parameters

Client ID, Client Secret,Scope, Grant_Type: client_credentials by default

After successfully retrieving the access token, let’s create another function to query the SharePoint site lists/libraries:

function FetchSharepointLibraries(){
var SPSiteID = "sharepointtechie.sharepoint.com,1a634409-8e14-4d07-b1a7-366eec870233,4047d743-691c-4578-9795-4c1458096e98"; // Sharepoint Site ID
var ListID = "07f64111-6d12-47d0-9672-7124bdddce3b"; // List/LibraryID
var GraphURL = "https://graph.microsoft.com/v1.0/sites/"+ SPSiteID +"/lists/"+ ListID +"/items"; //Constructed URL
$.ajax({
method: 'GET',
url: GraphURL,
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
success: function(response) {
var data = response.value;
console.log(data);
},error: function(error) {
console.log(JSON.stringify(error))
}
})
}

Let’s do some fancy work to display the files.

Full Code

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript">
var token;
$(document).ready(function () {
requestToken();
});
function requestToken() {
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://howling-crypt-47129.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": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
"scope ": "https://graph.microsoft.com/.default"
},
success: function (response) {
console.log(response);
token = response.access_token;
console.log(token);
FetchSharepointLibraries();
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
}
function FetchSharepointLibraries() {
var SPSiteID = "sharepointtechie.sharepoint.com,1a634409-8e14-4d07-b1a7-366eec870233,4047d743-691c-4578-9795-4c1458096e98";
var ListID = "07f64111-6d12-47d0-9672-7124bdddce3b";
var GraphURL = "https://graph.microsoft.com/v1.0/sites/" + SPSiteID + "/lists/" + ListID + "/items";
$.ajax({
method: 'GET',
url: GraphURL,
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
success: function (response) {
var data = response.value;
var html = '';
$.each(data, function (index, data) {
var fileName = data.webUrl.split("Shared%20Documents/")[1];
fileName = decodeURIComponent(fileName)
html += "<li><a href="+ data.webUrl +">"+ fileName +"</a></li><br>";
})
$('#files').append(html)
}, error: function (error) { }
})
}
</script>
<body>
<ul id="files"></ul>
</body>

The final output look like below:

Happy Coding

1 Comment

Join the conversation! Your thoughts help the community grow.

Purna Chander4y ago
Hi Vinodh, Thanks for the post on graph api. Trying to use the same code to get the files from SharePoint library and getting below error in requestToken function. {"readyState":4,"responseText":"{\"error\":\"invalid_request\",\"error_description\":\"AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type Any idea on how to resolve this.?