Active Directory認証を使用してJavaScriptでAzure APIアプリケーションを呼び出す

Question

APIアプリケーションとしてAzureでホストされているJava APIバックエンドを実装しました。 Active Directoryによる認証を有効にしました。 apiアプリのCORS設定では、すべてのソースからの呼び出しにアスタリスクをURLとして許可するように設定しました。

今、私はローカルのAngularJSアプリからAPIにアクセスしたいと思っています。私の角度のコードは次のようになります。

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); 
      }); 
     } 
    }); 

しかし、私はまだ、コンソール内で次のエラーが表示されます。

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. 

AngularJSコードからのアクセスを取得するには、どのように？

これは私の投稿hereに関連しており、ここで私はカールコールでアクセスしようとしています。

Answer 1

Azure ADによって保護されているWebアプリケーションに直接HTTPリクエストを生成しているようです。このシナリオでは、angularJsクライアントにADAL for jsを実装しようとすることができます。 adalを利用して認証トークンを取得し、WebアプリケーションをAngularで呼び出すと、HTTPリクエストに認証ヘッダーが追加されます。

さらに詳しいことがありましたら、お気軽にお知らせください。