2016-11-07 6 views
0

Я создал приложение API, которое размещено в Azure и защищено Active Directory (при открытии URL-адреса в браузере я перенаправляюсь на страницу входа с Microsoft). Теперь у меня есть угловое приложение, которое должно получить данные из api. Я также защитил угловое приложение с помощью каталога Actice. Таким образом, я хочу получить токен, который я могу использовать для аутентификации.Azure API call: response содержит html page

API вызова:

const auth = btoa("[my username]:[my password]"); 

var token; 
if((window.location.href).indexOf('/') != -1) { 
    var queryString = (window.location.href).substr((window.location.href).indexOf('/') + 1); 
    token = (queryString.split('='))[1]; 
    token = decodeURIComponent(token); 
} 

$http.defaults.headers.common['Authorization'] = 'Basic ' + auth; 
$http.defaults.useXDomain = true; 
$http.defaults.headers.common['x-ms-token-aad-id-token'] = token; 
delete $http.defaults.headers.common['X-Requested-With']; 


var erg = $http.get('http://[app name].azurewebsites.net/api/contacts') 
.success(function (data, status, headers, config) { 
     $scope.loggedIn = "LOGGED IN"; 
     $scope.responseData = data; 
}) 
.error(function (data, status, header, config) { 
     console.log("ERROR"); 
}); 

я должен был открыть Chrome с отключенным 'же политику происхождения'.

Данные, которые были возвращены:

<html><head><title>Working...</title></head> 
<body> 
    <form method="POST" name="hiddenform" action="https://[app name].azurewebsites.net/.auth/login/aad/callback"><input type="hidden" name="id_token" value="eyJ0[...]NBw" /> 
     <input type="hidden" name="state" value="/api/contacts#" /> 
     <input type="hidden" name="session_state" value="fdbe7ee3-[...]-b12663d39846" /> 
     <noscript><p>Script is disabled. Click Submit to continue.</p><input type="submit" value="Submit" /></noscript> 
    </form> 
    <script language="javascript">document.forms[0].submit();</script> 
</body> 
</html> 

Как я могу получить данные в формате JSON, что API должен фактически вернуть? Что я могу сделать с этим html-фрагментом?

+0

Вы должны проверить этот учебник: https://azure.microsoft.com/en-us/documentation/articles/active-directory-devquickstarts-angular/. Сначала вам необходимо выполнить аутентификацию с помощью Azure AD, чтобы получить токен доступа для вызова вашего API. И вы никогда не должны иметь свой пароль в интерфейсе JavaScript. – juunas

+0

Вы пытались использовать https://github.com/AzureAD/azure-activedirectory-library-for-js, чтобы получить токен и использовать его для вызова своего ресурса защищенный AAD –

+0

Да, я попробовал. Я получаю токен (в url ...), но я не могу получить доступ к API. На самом деле я не знаю, где я должен поставить токен. –

ответ

0

Вы можете следовать образцу в https://github.com/AzureAD/azure-activedirectory-library-for-js, чтобы интегрировать adal в свой SPA. SDK реализовал функции, приобретающие токен доступа от AAD. А также перехватит HTTP-запросы в Angularjs и добавит заголовок проверки подлинности.

Вы можете обратиться к http://www.cloudidentity.com/blog/2015/02/19/introducing-adal-js-v1/ & http://www.cloudidentity.com/blog/2014/10/28/adal-javascript-and-angularjs-deep-dive/ для дальнейшего понимания adal для js.

И убедитесь, что ваш SPA может вызывать ваши API на сервере. Вы можете попробовать следующие конфигурации в Angualrjs разделе конфигурации:

app.config(['$locationProvider', 'adalAuthenticationServiceProvider', '$httpProvider', function($locationProvider, adalAuthenticationServiceProvider, $httpProvider) { 
      $locationProvider.html5Mode(true).hashPrefix('!'); 
      $locationProvider.html5Mode(true).hashPrefix('!'); 
      var endpoints = { 
       "http://garycors.azurewebsites.net": "bce85948-9ea4-4738-b1e6-972f3d30f4da", 
       // "http://garycors.azurewebsites.net": "90e54701-ff93-414c-b7ee-c2d9b01417f3", 
      }; 
      adalAuthenticationServiceProvider.init({ 
        tenant: "<tenant_id>", // Optional by default, it sends common 
        clientId: "<client_id>", 
        cacheLocation: 'sessionStorage' 
       }, 
       $httpProvider // pass http provider to inject request interceptor to attach tokens 
      ); 
      $httpProvider.interceptors.push('httpRequestInterceptor'); 
    }]); 

app.factory('httpRequestInterceptor', function() { 
      return { 
      request: function (config) { 

       config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem("adal.idtoken"); 

       return config; 
      } 
      }; 
     }); 

Любое дальнейшее беспокойство, пожалуйста, не стесняйтесь, дайте мне знать.