Azure API呼び出し：応答にhtmlページが含まれています

Azureでホストされ、Active Directoryで保護されたAPIアプリケーションを作成しました（ブラウザでURLを開くと、Microsoftのログインページにリダイレクトされます）。今私はAPIからデータを取得する角度のアプリを持っています。私はActice Directoryで角度アプリを保護しました。このようにして、認証に使用できるトークンを取得したいと思います。Azure API呼び出し：応答にhtmlページが含まれています

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>

がどのようにAPIが実際に返す必要があることをJSONデータを得ることができますか？このhtmlスニペットで何ができますか？

出典

2016-11-07 chocolate cake

このチュートリアルは、https://azure.microsoft.com/en-us/documentation/articles/active-directory-devquickstarts-angular/で確認してください。あなたのAPIを呼び出すためのアクセストークンを取得するには、最初にAzure ADで認証する必要があります。また、フロントエンドのJavaScriptにパスワードを設定しないでください。 – juunas

https://github.com/AzureAD/azure-activedirectory-library-for-jsを使用してトークンを取得し、リソースを呼び出すために活用しようとしましたか？ AADによって保護されています –

はい、私はそれを試しました。私はトークンを（URLで...）取得しますが、私はAPIにアクセスすることはできません。実際に私はトークンをどこに置くべきか分かりません。 –

https://github.com/AzureAD/azure-activedirectory-library-for-jsのサンプルに続いて、SPAにadalを統合することができます。 SDKは、AADからアクセストークンを取得する機能を実装しています。また、Angularjsでhttp要求をインターセプトし、認証ヘッダーを追加します。

jsのadalの詳細については、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/を参照してください。

また、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; 
      } 
      }; 
     });

さらに詳しいことがあれば教えてください。

出典

2016-11-21 05:37:03

Azure API呼び出し：応答にhtmlページが含まれています

答えて

関連する問題