Get access token for Microsoft graph api using plain JavaScript - azure-active-directory

Question

I try to fetch planner data using Microsoft graph api using ajax call But I am getting https://graph.microsoft.com/v1.0/me/planner/tasks 400 (Bad Request):
function requestToken() {
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/common/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 ": "--REDACTED--", //Provide your app id
"client_secret": "--REDACTED--",
//Provide your client secret genereated from your app
"scope ": "https://graph.microsoft.com/.default"
},
success: function (response) {
console.log(response);
token = response.access_token;
$.ajax({
url: 'https://graph.microsoft.com/v1.0/me/planner/tasks',
type: 'GET',
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer '+token+'');
},
data: {},
success: function (results) {
console.log(results);
debugger;
},
error: function (error) {
console.log("Error in getting data: " + error);
}
});
}
})
}
Looking for json data from planner but getting error code
https://graph.microsoft.com/v1.0/me/planner/tasks 400 (Bad Request) while fetching from graph api.

Answer 1

Firstly there are a couple of major issues with the code you've shared right now:
You should not be using Client Credentials Grant, i.e. clientId and client secret to make the call to Microsoft Graph API from your client side JavaScript code, it's only meant for confidential clients like a daemon or service.
You are anyways trying to hit the endpont https://graph.microsoft.com/v1.0/me/planner/tasks, which includes the keyword me that is valid only for a user identity. So you should try to acquire token using identity of the user who is currently signed in or prompt the user if they're not signed in.
You can make use of Microsoft Graph JavaScript Client Library to call Microsoft Graph.
The link for client library also provides good step-by-step guidance with sample code.
NOTE: please don't put your client secret or any other sensitive information as part of your question on stackoverflow. I'll edit the question for now, but you should still delete this particular secret for your application and generate new ones for any future use.