angular - 使用 ADAL Angular 6 Wrapper 调用 API

Question

我按照教程构建了一个 Angular 6 应用程序，该应用程序使用 Angular 的 ADAL 包装器库从 Azure AD 获取不记名 token 并使用它来调用我的 API。

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

身份验证和获取 token 工作正常，但随后我尝试调用我的 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。相反，它会导航到 microsoft 网站，例如:

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

这让我很困惑。我只想将我的 token 转发到我的 API。但由于某种原因，ADAL 包装客户端导航到 Microsoft 页面。

有什么建议为什么会发生这种情况吗？

Answer 1

您需要验证网站是否具有 API 的访问权限以及 list 中的隐式流程是否正确。