Post
Ask Question
Gowtham

Gowtham

  • NA
  • 516
  • 38.3k

Get access token form Azure Directory for Microsof Graph API

Feb 20 2019 12:52 AM
Hi there,
 
I have requirement to fetch planner details on sharepoint custom pages.As per the azure end points I have created the token but it is not valid one.I dont find any other refrence for clinet side to authenthicate the credentials.
 
So for I tried
  1. <!DOCTYPE>  
  2. <html>  
  3. <head>  
  4. <title>Sample For Browser</title>  
  5. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>  
  6. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  7. <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  8. <script type="text/javascript" src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script>  
  9. <script type="text/javascript">  
  10. $(function(){  
  11. console.log('Loading');  
  12. var accessToken = "";  
  13. var space = 20;  
  14. var child = 0;  
  15. var configOptions = {  
  16. clientId: "", //Required clientId to get accessToken  
  17. postLogoutRedirectUri: window.location.origin,  
  18. redirectURI: window.location.href, // Your page link  
  19. //cacheLocation: "localStorage", //Optional to save data in localStorage by defualt it store in session storage  
  20. }  
  21. window.authContext = new AuthenticationContext(configOptions);  
  22. if(authContext.isCallback(window.location.hash))  
  23. {  
  24. authContext.handleWindowCallback(); //Using this we can get user from getCachedUser() after login  
  25. }  
  26. var user = authContext.getCachedUser();  
  27. if(user == null){  
  28. authContext.login(); //Login if user not found in getCachedUser  
  29. }  
  30. else  
  31. {  
  32. //setTimeout(function(){ getToken(); }, 1000);  
  33. //setTimeout(function(){ getUser(); }, 3000);  
  34. getToken();  
  35. }  
  36. function getToken(){ //get accessToken  
  37. authContext.acquireToken("https://graph.microsoft.com",function(error, token){  
  38. console.log("Error =" +error);  
  39. console.log("Token =" +token);  
  40. accessToken = token;  
  41. if(accessToken && accessToken != "")  
  42. {  
  43. getOnedriveUser();  
  44. }  
  45. })  
  46. }  
  47. function getOnedriveUser(URL){  // get data based on passed url  
  48. $.ajax({  
  49. url: URL?URL:"https://graph.microsoft.com/v1.0/me/planner/tasks",  
  50. type: 'GET',  
  51. headers: {  
  52. "Authorization": "Bearer " + accessToken  
  53. },  
  54. async:false,  
  55. success: function(data) {  
  56. console.log(data);  
  57. allData = data.value;  
  58. $.each(allData,function(e,item){  
  59. item.parentReference.path.split('root:')[1].split('/').length == 0?child = 0:child = item.parentReference.path.split('root:')[1].split('/').length;  
  60. $('#oneDriveData tbody').append('<tr><td'+(URL?' style="padding-left:'+space*child+'px"':"")+'>'+  
  61. (item.file?"<i class='fa fa-file'></i>":"<i class='fa fa-folder'></i>")+'</td>'+  
  62. '<td>'+(item.name?item.name:" ")+'</td>'+  
  63. '<td>'+new Date(item.lastModifiedDateTime).format('dd/MM/yyyy')+'</td>'+  
  64. '<td>'+new Date(item.lastModifiedDateTime).format('dd/MM/yyyy')+'</td></tr>');  
  65. if(item.folder)  
  66. {  
  67. //child++;  
  68. var url = "https://graph.microsoft.com/v1.0/me/drive/items/"+item.id+"/children";  
  69. getOnedriveUser(url);  
  70. }  
  71. })  
  72. },  
  73. error: function(error)  
  74. {  
  75. alert("Error" + error);  
  76. }  
  77. });//ajax  
  78. }//get user  
  79. })  
  80. </script>  
  81. </head>  
  82. <body>  
  83. <div class="container-fluide">  
  84. <h1>OneDrive</h1>  
  85. <table id="oneDriveData" class="table table-striped">  
  86. <thead>  
  87. <tr>  
  88. <th>Folder OR File</th>  
  89. <th>Name</th>  
  90. <th>Created Date</th>  
  91. <th>Modify Date</th>  
  92. </tr>  
  93. </thead>  
  94. <tbody></tbody>  
  95. </table>  
  96. </div>  
  97. </body>  
  98. </html>  
Through client id i tried to get mircrosoft planner using Microsoft Graph api. Even though getting acess token But I am getting error on https://graph.microsoft.com/v1.0/me/planner/tasks 403 (Forbidden);
 
can any on suggest me based on this link I reffered https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/samples/browser/src/index.html.

Answers (2)