Introduction

In this article, I explain how to retrieve the items & files from SharePoint using Microsoft Graph API.
Why use Graph API?
Recently, I had a query from one developer. He needs to show the file information from a document library. It's always possible using SharePoint REST API, but they are facing a problem for certain users who not have access to the library.
Let’s achieve this using MS GraphAPI.
Endpoint: https://graph.microsoft.com/v1.0/sites/{siteid}/lists/{listid}/items
Permission Scope: Sites.Read.All
Follow the below article to learn how to fetch an access token using Microsoft Graph API:
In your tenant Azure portal, navigate to Azure active directory “App Registration”. Open your app to provide the permission for accessing the SharePoint site lists & libraries via Microsoft Graph API.
Once you navigate 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:
  1. function requestToken() {
  2. $.ajax({
  3. "async": true,
  4. "crossDomain": true,
  5. "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
  6. "method": "POST",
  7. "headers": {
  8. "content-type": "application/x-www-form-urlencoded"
  9. },
  10. "data": {
  11. "grant_type": "client_credentials",
  12. "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id
  13. "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
  14. "scope ": "https://graph.microsoft.com/.default"
  15. },
  16. success: function(response) {
  17. console.log(response);
  18. token = response.access_token;
  19. console.log(token);
  20. FetchSharepointLibraries();
  22. },
  23. error: function(error) {
  24. console.log(JSON.stringify(error));
  25. }
  26. })
  27. }
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
  1. function FetchSharepointLibraries(){
  3. var SPSiteID = "sharepointtechie.sharepoint.com,1a634409-8e14-4d07-b1a7-366eec870233,4047d743-691c-4578-9795-4c1458096e98"; // Sharepoint Site ID
  4. var ListID = "07f64111-6d12-47d0-9672-7124bdddce3b"; // List/LibraryID
  5. var GraphURL = "https://graph.microsoft.com/v1.0/sites/"+ SPSiteID +"/lists/"+ ListID +"/items"; //Constructed URL
  6. $.ajax({
  7. method: 'GET',
  8. url: GraphURL,
  9. headers: {
  10. 'Authorization': 'Bearer ' + token,
  11. 'Content-Type': 'application/json'
  12. },
  13. success: function(response) {
  14. var data = response.value;
  15. console.log(data);
  17. },error: function(error) {}
  18. })
  19. }
Let’s do some fancy work to display the files:
Full Code
  1. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  4. <script type="text/javascript">
  5. var token;
  6. $(document).ready(function () {
  7. requestToken();
  8. });
  10. function requestToken() {
  12. $.ajax({
  13. "async": true,
  14. "crossDomain": true,
  15. "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
  16. "method": "POST",
  17. "headers": {
  18. "content-type": "application/x-www-form-urlencoded"
  19. },
  20. "data": {
  21. "grant_type": "client_credentials",
  22. "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id
  23. "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
  24. "scope ": "https://graph.microsoft.com/.default"
  25. },
  26. success: function (response) {
  27. console.log(response);
  28. token = response.access_token;
  29. console.log(token);
  30. FetchSharepointLibraries();
  32. },
  33. error: function (error) {
  34. console.log(JSON.stringify(error));
  35. }
  36. })
  37. }
  39. function FetchSharepointLibraries() {
  41. var SPSiteID = "sharepointtechie.sharepoint.com,1a634409-8e14-4d07-b1a7-366eec870233,4047d743-691c-4578-9795-4c1458096e98";
  42. var ListID = "07f64111-6d12-47d0-9672-7124bdddce3b";
  43. var GraphURL = "https://graph.microsoft.com/v1.0/sites/" + SPSiteID + "/lists/" + ListID + "/items";
  44. $.ajax({
  45. method: 'GET',
  46. url: GraphURL,
  47. headers: {
  48. 'Authorization': 'Bearer ' + token,
  49. 'Content-Type': 'application/json'
  50. },
  51. success: function (response) {
  52. var data = response.value;
  53. var html = '';
  54. $.each(data, function (index, data) {
  55. var fileName = data.webUrl.split("Shared%20Documents/")[1];
  56. fileName = decodeURIComponent(fileName)
  57. html += "<li><a href="+ data.webUrl +">"+ fileName +"</a></li><br>";
  58. })
  60. $('#files').append(html)
  61. }, error: function (error) { }
  62. })
  63. }
  64. </script>
  66. <body>
  67. <ul id="files"></ul>
  68. </body>
Final output look like below:
keep Sharing …..