Question

我按照教程构建了一个Angular 6应用程序，该应用程序使用角色的ADAL包装器库从Azure AD获取承载令牌，并使用它来调用我的API。

教程： https://spikesapps.wordpress.com/2017/07/27/securing-an-angular-application-with-azure-ad/

身份验证和获取令牌工作正常，但我尝试调用我的API：

 this.http
                .get('https://foo.azurewebsites.net/' + this.url, this.prepareOptions())
                .pipe(
                map((r: Response) => {
                    const a = r['data'] as BIExplorerSettings;
                    if (a) {
                        this.BIExplorerSettings = a;
                        this.alreadyFetchedSettings = true;
                    }
                    return a;
                }))

prepareOptions(): any {
    let headers = new HttpHeaders();
    headers = headers
        .set('Content-Type', 'application/json')
        .set('Authorization', `Bearer ${this.adal6Service.userInfo.token}`);
    return { headers };
}

但我的应用不会在“https://foo.azurewebsites.net/”下调用API。相反，它导航到微软网站，如：

https://login.microsoftonline.com/foo.com/oauth2/authorize?response_type=token&client_id=xxxxxxx-xxx-xxx-xxxxx-xxxxx&resource=xxxxxxx-2342-xxxx-xxxx-0292xxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fframe%2Fportal%2Fhome&state=a99xxxx7-xxx6-xxxc-a7b5-9xxxxx4c%7Cbceb8191-2342-4xxx-b48b-029xxxxxd4a&client-request-id=50xxxx9-fa10-xxxx-9e36-bbf9062xxxx&x-client-SKU=Js&x-client-Ver=1.0.16&prompt=none&login_hint=username%40foo.com&domain_hint=foo.com

这让我很困惑。我只想将我的令牌转发给我的API。但由于某种原因，ADAL-wrapper客户端导航到微软页面。

任何道具为何会发生这种情况？

Answer 1

您需要验证网站是否具有对该API的访问权限，并且清单中的隐式流为true。

Answer 2

microsoft-adal-angular6如果您使用的是angular 6 +，则可以使用此软件包，它更加简单易用 https://www.npmjs.com/package/microsoft-adal-angular6

此外，您还需要在应用服务的Azure广告帐户中添加登录和注销重定向URL

使用ADAL Angular 6 Wrapper来调用API

2 个答案: