我一直在尝试按照以下指南设置具有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();
});
}
}