Outlook REST API: V1IDToken is not applicable for the current protocol - rest

Question

I'm trying to retrieve my email messages from an Outlook account through Javascript.
I use ADAL to authenticate myself and that seems to work. However if I try to use the returned token in a GET request to the outlook REST API I get an unauthorised error back with following additional info in the header:
x-ms-diagnostics:2000001;reason="This token profile 'V1IdToken' is not applicable for the current protocol.";error_category="invalid_token"
My request looks like:
function test2(token) {
try
{
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://outlook.office.com/api/v1.0/me/messages');
// The APIs require an OAuth access token in the Authorization header, formatted like this: 'Authorization: Bearer <token>'.
xhr.setRequestHeader("Authorization", "Bearer " + token);
// Process the response from the API.
xhr.onload = function () {
// ...
}
// Make request.
xhr.send();
I both tried v1.0 and v2.0 REST api.

Answer 1

Based on the error message you were request the Outlook online REST using the id_token. The id_token is only used for the client to authenticate users. To request the Outlook online REST, we need to use the access token.
And if you were developing with angularJS, there is no need to append the token manually. Here is a code sample for your reference:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal-angular.min.js"></script>
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<div ng-app="myApp">
<div> Hello {{ userInfo.userName }}</div>
<div ng-controller="homeCtrl">
<ul class="nav navbar-nav navbar-right">
<li><a ng-click="getMessages()">Get Messages</a></li>
<li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
<li><a class="btn btn-link" ng-hide="userInfo.isAuthenticated" ng-click="login()">Login</a></li>
</ul>
<div>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="item in messages">
<td>
<p>{{item.Subject}}</p>
</td>
<td>
<p>{{item.Sender.EmailAddress.Address}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', ['AdalAngular'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
var endpoints = {
"https://outlook.office.com": "https://outlook.office.com",
};
adalProvider.init(
{
instance: 'https://login.microsoftonline.com/',
tenant: '{yourTenant}.onmicrosoft.com',
clientId: '{yourAppId}',
extraQueryParameter: 'nux=1',
endpoints: endpoints,
},
$httpProvider
);
}])
myApp.controller('homeCtrl', ['$scope', '$http', 'adalAuthenticationService', '$location', 'toGetMessagesSvc', function ($scope, $http, adalService, $location, toGetMessagesSvc) {
$scope.login = function () {
adalService.login();
};
$scope.logout = function () {
adalService.logOut();
};
$scope.getMessages = function () {
toGetMessagesSvc.getMessages().success(function (results) {
$scope.messages = results.value;
$scope.loadingMessage = "";
});
}
}]);
myApp.factory('toGetMessagesSvc', ['$http', function ($http) {
var apiEndpoint = "https://outlook.office.com/";
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
return {
getMessages: function () {
return $http.get(apiEndpoint + 'api/v1.0/me/messages');
}
};
}]);
</script>