Question

我一直在尝试按照以下指南设置具有ADAL身份验证的Angular SPA：https://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/

在完成它之后，我遇到了一些小问题（即无法从本地json加载应用程序配置，因为本文所述的拦截器拦截了我对json的调用，但由于adal-angular失败而失败）尚未加载）。但这是另一个问题-我现在通过对配置进行硬编码来解决此问题。

现在的问题是，在成功登录Microsoft并重定向到我的应用后，对我的后端的调用失败，并显示“ this.adal.GetResourceForEndpoint不是函数”。这是发生错误的地方：

我可以在调试器中看到确实没有定义函数，还有“ isAuthenticated”和“ acquireToken”应根据导入的服务进行定义：

我真的不知道自己可能做错了什么，为什么/如何定义这些功能，特别是在成功登录后。请问有ADAL专家帮忙吗？

这是相关的设置代码：

//APP.MODULE.TS--------------------------------------------
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, APP_INITIALIZER } from "@angular/core";
import {
  MsAdalAngular6Module,
  MsAdalAngular6Service,
  AuthenticationGuard
} from "microsoft-adal-angular6";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { DashboardModule } from "./modules/dashboard/dashboard.module";
import { AppConfig } from "./app.config";
import { InsertAuthTokenInterceptor } from "./insert-auth-token-interceptor";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";

let adalConfig: any; // will be initialized by APP_INITIALIZER
export function msAdalAngular6ConfigFactory() {
  return adalConfig; // will be invoked later when creating MsAdalAngular6Service
}

// refer to:
// https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/
// for a description of the AppConfig service
export function initializeApp(appConfig: AppConfig) {
  const promise = appConfig.load().then(() => {
    adalConfig = {
      tenant: AppConfig.settings.adalConfig.tenant,
      clientId: AppConfig.settings.adalConfig.clientId,
      redirectUri: window.location.origin,
      endpoints: AppConfig.settings.adalConfig.endpoints,
      navigateToLoginRequestUrl: true,
      cacheLocation: AppConfig.settings.adalConfig.cacheLocation
    };
  });
  return () => promise;
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule,
    HttpClientModule,
    MsAdalAngular6Module
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig],
      multi: true
    },
    {
      provide: "adalConfig",
      useFactory: msAdalAngular6ConfigFactory,
      deps: []
    },
    MsAdalAngular6Service,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InsertAuthTokenInterceptor,
      multi: true,
      deps: ["adalConfig"]
    },
    AuthenticationGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

//APP.CONFIG.TS-----------------------------------------------
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { environment } from "../environments/environment";
import { IAppConfig } from "./app-config.model";
@Injectable()
export class AppConfig {
  static settings: IAppConfig;
  constructor(private http: HttpClient) {}
  load() {
    return new Promise<void>((resolve, reject) => {
      AppConfig.settings = <IAppConfig>{
        env: {
          name: "dev"
        },
        adalConfig: {
          clientId: "xxx",
          tenant: "xxx",
          cacheLocation: "localStorage",
          endpoints: {
            api: "xxx"
          }
        }
      };
      resolve();
    });
  }
}

带有Angular问题的Azure AD身份验证调用后端

0 个答案: