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

【问题标题】：how to generate dynamic data for adal-angular6 configuration如何为 adal-angular6 配置生成动态数据
【发布时间】：2019-08-24 22:02:09
【问题描述】：

我目前正在连接到 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/ 我认为它与我想要实现的目标足够相关，但我就是想不通。

【问题讨论】：

标签： javascript angular azure adal

【解决方案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,
        }                
    }));
}

在上面的函数中，我返回了一个函数，它解析了一个 Promise（我将在 APP_INITIALIZER 中使用这个函数，它需要一个 Promise - 否则你会得到一个错误） Promise 来自我的 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 中的 providers 数组：


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

            MsAdalAngular6Service

APP_INITIALIZER 基本上停止了app的初始化，直到useFactory中提供的函数完成。下一节，我们使用提供者数组“给”我们的 adalConfig 对象，在它拥有相关数据之后。我们提供变量本身（提供：'adalConfig'），所以这个函数可以返回它（useFactory：getConfig，），因为 getConfig() 不使用传递给它的任何属性，deps: 是多余的。

我真的希望这会有所帮助，如果我有错误，请纠正我。

【讨论】：