Adal Angular5 Adal5Service.acquireToken 落在 "Token renewal operation failed due to timeout"，但网络中有成功的请求

Question

尝试使用 adal-angular5 并且 Adal5Service.acquireToken 方法有问题：它总是落在：

Token renewal operation failed due to timeout

StackBlitz 上的在线完整示例。测试：

粘贴你的租户
粘贴您的 clientId
在 Azure Portal 中为您的应用注册 URL https://angular-96tws9.stackblitz.io
新开window

这里是app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Adal5Service } from 'adal-angular5';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private adalSvc: Adal5Service) {
    let config: adal.Config = {
      tenant: 'XXX.onmicrosoft.com',
      clientId: '21efffd5-29fc-XXX',
      postLogoutRedirectUri: window.location.origin,
      endpoints: {
        graphApiUri: "https://graph.microsoft.com",
      },
      cacheLocation: "localStorage",
      redirectUri: ''
    };

    this.adalSvc.init(config);
  }

  ngOnInit(): void {
    this.adalSvc.handleWindowCallback();

    if (!this.adalSvc.userInfo.authenticated) {
      this.adalSvc.login();
      return;
    }

    // work correct
    console.log(this.adalSvc.userInfo.username);

    this.adalSvc.acquireToken("https://graph.microsoft.com")
      .subscribe(
        token => console.log(token), // never comes
        error => console.log(error)); // error: Token renewal operation failed due to timeout
  }
}

网络中有正确获取的令牌：

页面错误

这里是package.json:

{
  "name": "angular-template",
  "description": "",
  "homepage": "https://stackblitz.com/edit/angular-96tws9",
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "core-js": "2.5.1",
    "rxjs": "5.5.2",
    "zone.js": "0.8.18",
    "adal-angular5": "1.0.36"
  },
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "devDependencies": {
    "@angular/cli": "1.5.4",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.4.2"
  }
}

Answer 1

我不确定这是否是你的实现，但似乎其他人 this issue as well. This issue on ng2-adal 指出 adal-angular@1.0.16 的 acquireToken() 存在问题（阅读最后一条评论） .

adal-angular 是这两个 adal 实现的基础包。我运行自己使用 ng2-adal 并降级到 adal-angular@1.0.14 并让 acquireToken() 工作。不过不确定 adal-angular5 是如何处理的。

Here is example I used with ng2-adal package (using Angular/.NET Core) and another（独立版）如果您想尝试 ng2-adal。希望这有帮助。

Answer 2

终于让它工作了，没有 adal-angular5 库。这是 full example 的

授权用户
为 Microsoft Graph 获取令牌 Api
从 Microsoft Graph 获取用户消息Api
沉默更新令牌

示例仅使用标准 Adal.js (without wrappers) and typings from @types/adal-angular。

Angular 路线正在运作。此外，更新令牌时没有双重请求。

Answer 3

错误来自依赖项的引用：adal-angular 在库 adal-angular5 中依赖性不好。您不必使用 adal-angular 重新启动。这个主题拯救了我的一天：benbaran issue comment

Adal Angular5 Adal5Service.acquireToken 落在 "Token renewal operation failed due to timeout"，但网络中有成功的请求

Adal Angular5 Adal5Service.acquireToken falls with "Token renewal operation failed due to timeout", but there are successful requests in network

azure-active-directory

adal

adal.js

angular

angular5