API-Aufruf für Azure-API-App in JavaScript mit Active Directory-Authentifizierung erstellen

Question

Ich habe ein Java-API-Back-End implementiert, das in Azure als API-App gehostet wird. Ich habe die Authentifizierung von Active Directory eingeschaltet. In den CORS-Einstellungen der API-App habe ich konfiguriert, dass Anrufe von jeder Quelle nur Einstellungen ein Sternchen als URL erlauben.

Jetzt möchte ich von einer lokalen AngularJS App auf die API zugreifen. Mein Winkel Code sieht wie folgt aus:

angular.module('demo', []) 
    .controller('GetDataController', function($scope, $http) { 
     $scope.login = function(user){ 
      console.log("user: " + user, user); 

      $http.defaults.useXDomain = true; 
      delete $http.defaults.headers.common['X-Requested-With']; 

      $http.get('http://<myapiapp>.azurewebsites.net/api/contacts'). 
      then(function(response) { 
       $scope.greeting = response.data; 
       console.log("$scope.greeting: " + $scope.greeting, $scope.greeting); 
      }); 
     } 
    }); 

Aber ich erhalte immer noch die folgende Fehlermeldung in der Konsole:

XMLHttpRequest cannot load https://login.windows.net/ 
12141bed-36f0-4fc6-b70c-43483f616eb7/oauth2/autho… 
%2Fapi%2Fcontacts%23&nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547. 
Redirect from 'https://login.windows.net/12141bed-36f0-4fc6-b70c-43483f616eb7/ 
oauth2/autho…%2Fapi%2Fcontacts%23& 
nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547' to 
'https://login.microsoftonline.com/12141bed-36f0-4fc6-b70c-43483f616eb7/ 
oaut…%2Fapi%2Fcontacts%23&nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
Origin 'null' is therefore not allowed access. 

So, wie der Zugang von AngularJS Code zu bekommen?

Dies ist auch mit meinem Beitrag here verbunden, wo ich versuche, Zugang mit einem Lockruf zu bekommen.

Answer 1

Es scheint, dass Sie HTTP-Anfragen direkt in Ihren von Azure AD geschützten Web-Apps generieren. In diesem Szenario können Sie versuchen, ADAL for js in Ihrem angularJs-Client zu implementieren. Wenn Sie adal verwenden, um das Authentifizierungstoken zu erhalten, und wenn Sie Ihre Web Apps in Angular aufrufen, wird der Authentifizierungsheader in HTTP-Anfragen hinzugefügt.

Alle weiteren Bedenken, bitte zögern Sie nicht, lassen Sie es mich wissen.