【发布时间】：2017-07-19 17:16:56
【问题描述】：
我在构建 Angular4/Angular2 应用和 Azure AD 身份验证时遇到问题。
首先我使用 ADAL-Angular4 (https://www.npmjs.com/package/adal-angular4) 并且 angular 服务器在本地运行。 在 Azure 上，我有一个带有我想要保护的 API 的 Web 应用程序。 所以我创建了一个 Active Directory 应用程序，并将其与网络应用程序 (https://img15.hostingpics.net/pics/381684Capturedcran20170719094203.png) 链接。
第一个身份验证运行良好（访问网络应用程序）。 但是在调用 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})
在我的请求服务中，它不起作用，我得到同样的错误......
这是我的 app.component 上的 Adal 配置
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
服务器发送的响应是这个（来自天蓝色日志）：
</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> iisnode</td></tr>
<tr><th>Notification</th><td> ExecuteRequestHandler</td></tr>
<tr class="alt"><th>Handler</th><td> iisnode</td></tr>
<tr><th>Error Code</th><td> 0x00000000</td></tr>
</table>
</div>
<div id="details-right">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt"><th>Requested URL</th><td> https://XXXXX:80/app.js</td></tr>
<tr><th>Physical Path</th><td> D:\home\site\wwwroot\app.js</td></tr>
<tr class="alt"><th>Logon Method</th><td> aad</td></tr>
<tr><th>Logon User</th><td> 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&IIS70Error=401,0,0x00000000,9200">View more information »</a></p>
<p>Microsoft Knowledge Base Articles:</p>
</fieldset>
</div>
</div>
</body>
</html>
编辑2：
我使用 azure “easy API”，并将 get/post/request 权限设置为“Authenticated Users Only”
【问题讨论】：
-
缺少逗号还是打错字？ URL 后面应该有一个，因为 headers 是
http.get()的参数。我们有一个类似的解决方案并且正在运行，唯一的其他区别（您的代码视图有限）是我们附加了一个'Accept'标头以及'application/json'的值。 -
逗号出现在我的代码中，堆栈编辑器把它拿走我知道为什么。即使我添加了您的线路，它也会响应我的未经授权。也许我错过了配置我的 azure add 和 web 应用程序？ @DSN
-
应该有一个更长的消息和
401 error。你能分享那个消息吗？您是否还可以共享您的访问令牌的内容（删除任何敏感数据）？ -
我已经添加了@ShawnTabrizi
标签： angular azure http azure-active-directory