如何为 adal-angular6 配置生成动态数据

Question

我目前正在连接到 AAD 和 azure graph api，获取我需要的一切，它很棒。我的问题是我的 'adalConfig' 属性是这样硬编码的：

在 app.module > 进口：

         c.MsAdalAngular6Module.forRoot({
         tenant: '080werg-1e3r-5dnb-8c3b-e37ttrr8ee8',
         clientId: '080werg-080werg-080werg-080werg-080werg',
         redirectUri: window.location.origin,
         endpoints: {
            "https://cloudcrp-client.azurewebsites.net": "080werg- 80werg- 
             080werg- 080werg- 080werg",
         },
         navigateToLoginRequestUrl: false,
    }),

这对我来说非常糟糕，因为我们有几个客户，每个客户都需要不同的信息。我想要做的是从服务器获取具有正确详细信息的信息。所以基本上以异步方式以某种方式使用 .forRoot。

我找到了这篇文章：https://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/ 我认为它与我想要实现的目标足够相关，但我就是想不通。

Answer 1

所以我终于做到了，毕竟没有那么难。我会逐步介绍我所有 "adal" 配置的步骤。请参考以下文章，这对您有很大帮助： https://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/

app.module.ts :

export let adalConfig

export function getConfig(){
    return adalConfig
}

将使用上述函数（在提供程序部分）为提供程序数组提供 adalConfig 变量。

export function loadConfigurations(connectionService: ConnectionService) {
    return () => connectionService.getConfigs().then(((adalConficObj: azureActiveDirectoryModel)=> {
        adalConfig = {
            tenant: adalConficObj.Tenant,
            clientId: adalConficObj.ClientID,
            redirectUri: window.location.origin,
            endpoints: {
                [adalConficObj.EndPoint]: adalConficObj.ObjectID,
            },
            navigateToLoginRequestUrl: false,
        }                
    }));
}

在上面的函数中，我 return 一个函数，它解析了一个 Promise（我将在 APP_INITIALIZER 中使用这个函数，它需要一个 Promise - 否则你会得到一个错误) Promise 来自 My connectionService，它在我的应用程序中负责连接到服务器。 getConfigs() 很简单：

    getConfigs(): Promise<Object> {
        return this.HttpClient.get(this.getURL('GetAzureActiveDirectoryconfiguration')).toPromise()

    }

http /httpClient 使用 observables 和订阅，但因为我想要一个 Promise，所以我使用 .toPromise 函数。

如果您阅读了这篇文章，您会发现我没有使用 forRoot() 启动 MsAdalAngular6Module，因为我想从服务器获取我所有的 adalConfig 信息。

imports: [

    c.MsAdalAngular6Module,

],

根据我的理解，MsAdalAngular6Module 将使用 providers 数组中提供的变量来构造 MsAdalAngular6Service（同样，使用 forRoot() 中的硬编码插入）

app.modules 中的供应商数组：


        {
            provide: APP_INITIALIZER,
            useFactory: loadConfigurations,
            deps: [ConnectionService], // dependancy
            multi: true
        },
        {
            provide: 'adalConfig',
            useFactory: getConfig,
            deps: []
        },

            MsAdalAngular6Service

APP_INITIALIZER 基本上停止应用程序的启动，直到 useFactory 中提供的功能完成。下一节，我们使用 "give" providers 数组我们的 adalConfig 对象，在它具有相关数据之后。我们提供变量本身 (provide: 'adalConfig') 所以这个函数可以 return 它 (useFactory: getConfig,) 因为 getConfig() 不使用传递给它的任何属性，deps: 是多余的.

真心希望对您有所帮助，如有不妥，请指正。

更多信息您可以参考： https://angular.io/guide/dependency-injection-providers

如何为 adal-angular6 配置生成动态数据

how to generate dynamic data for adal-angular6 configuration

javascript

angular

azure

adal