Angular4和Azure AD：無法從API捕獲數據：401未經授權

Question

我在構建Angular4 / Angular2應用程序和Azure AD身份驗證時遇到問題。

首先，我使用ADAL-Angular4（ https://www.npmjs.com/package/adal-angular4 ），Angular服務器在本地運行。 在Azure上，我有一個要保護的帶有API的Web應用程序。 因此，我創建了一個Active Directory應用程序，並將其與Web應用程序鏈接（ https://img15.hostingpics.net/pics/381684Capturedcran20170719094203.png ）。

第一個Auth運作良好（可訪問Web App）。 但是，當談到調用API（僅限於經過身份驗證的用戶）時，我每次都會收到以下響應

401 error : Unauthorized

似乎我無法訪問資源，因為我沒有授予的訪問權限。 但是我的帳戶是所有應用程序的管理員，我在Azure上的任何地方都可以訪問。

我當時以為ADAL不能捕獲所有請求，但是即使我放了

let head = new Headers({Authorization: 'Bearer '+this.service.userInfo.token})
head.append( 'Host' , 'xxx.azurewebsites.net' )
return this._http.get('https://xxx.azurewebsites.net/api/getColumnsName/'{headers: head})

在我的請求服務上，它將無法正常工作，我得到了相同的錯誤...

這是我的adal配置放在我的app.component上

const config = {
  tenant: 'XXXXXX.onmicrosoft.com',
  clientId: 'XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX' //authApp ID
}                                   

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent { 
     constructor(private service: Adal4Service) {      // <-- ADD
    this.service.init(config);                      // <-- ADD
  }                              
}

編輯：

進行身份驗證時，我會得到這些參數（出於安全原因，其中一些參數已被隱藏並且令牌已被切斷）

[Log] username toto@hotmail.fr (main.bundle.js, line 2436)
[Log] authenticated: true (main.bundle.js, line 2437)
[Log] name: toto (main.bundle.js, line 2438)
[Log] token: eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Il

服務器發送的響應就是這個（來自azure日志）：

</head> 
<body> 
<div id="content"> 
<div class="content-container"> 
<h3>HTTP Error 401.0 - Unauthorized</h3> 
<h4>You do not have permission to view this directory or page.</h4> 
</div> 
<div class="content-container"> 
<fieldset><h4>Most likely causes:</h4> 
<ul>    <li>The authenticated user does not have access to a resource needed to process the request.</li> </ul> 
</fieldset> 
</div> 
<div class="content-container"> 
<fieldset><h4>Things you can try:</h4> 
<ul>    <li>Create a tracing rule to track failed requests for this HTTP status code. For more information about creating a tracing rule for failed requests, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li> </ul> 
</fieldset> 
</div> 

<div class="content-container"> 
<fieldset><h4>Detailed Error Information:</h4> 
<div id="details-left"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Module</th><td>&nbsp;&nbsp;&nbsp;iisnode</td></tr> 
<tr><th>Notification</th><td>&nbsp;&nbsp;&nbsp;ExecuteRequestHandler</td></tr> 
<tr class="alt"><th>Handler</th><td>&nbsp;&nbsp;&nbsp;iisnode</td></tr> 
<tr><th>Error Code</th><td>&nbsp;&nbsp;&nbsp;0x00000000</td></tr> 

</table> 
</div> 
<div id="details-right"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Requested URL</th><td>&nbsp;&nbsp;&nbsp;https://XXXXX:80/app.js</td></tr> 
<tr><th>Physical Path</th><td>&nbsp;&nbsp;&nbsp;D:\home\site\wwwroot\app.js</td></tr> 
<tr class="alt"><th>Logon Method</th><td>&nbsp;&nbsp;&nbsp;aad</td></tr> 
<tr><th>Logon User</th><td>&nbsp;&nbsp;&nbsp;toto@hotmail.fr</td></tr> 

</table> 
<div class="clear"></div> 
</div> 
</fieldset> 
</div> 

<div class="content-container"> 
<fieldset><h4>More Information:</h4> 
This is the generic Access Denied error returned by IIS. Typically, there is a substatus code associated with this error that describes why the server denied the request. Check the IIS Log file to determine whether a substatus code is associated with this failure. 
<p><a href="http://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=401,0,0x00000000,9200">View more information &raquo;</a></p> 
<p>Microsoft Knowledge Base Articles:</p> 


</fieldset> 
</div> 
</div> 
</body> 
</html>

edit2：

我將獲得/發布/請求權限設置為“僅限經過身份驗證的用戶”使用azure的“簡單API”

Answer 1

似乎您已經通過IIS或其他某種類型的機制（不確定哪種）在Web API上配置了身份驗證。 但是通常，如果要驗證由Azure AD發行並由ADAL庫獲取的令牌，則可以在ASP.NET應用程序中使用WindowsAzureActiveDirectoryBearerAuthenticationMiddleware處理令牌並驗證傳入的呼叫。 這是一個基本示例，顯示了如何使用此中間件。 或者，您也可以使用System.IdentityModel.Tokens.Jwt庫從Azure AD驗證令牌，如本代碼示例所示。

Angular4和Azure AD：無法從API捕獲數據：401未經授權

問題描述

編輯：

edit2：

1 個解決方案

解決方案1
0 2017-07-19 23:53:39

Angular4和Azure AD：無法從API捕獲數據：401未經授權

問題描述

編輯：

edit2：

1 個解決方案

解決方案1 0 2017-07-19 23:53:39

解決方案1
0 2017-07-19 23:53:39