javascript - 如何为 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,
        }                
    }));
}

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

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

    }

http/httpClient 使用可观察量和订阅，但由于我想要一个 Promise，所以我使用 .toPromise 函数。

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

imports: [

    c.MsAdalAngular6Module,

],

根据我的理解，MsAdalAngular6Module 将使用提供者数组中提供的变量来构造 MsAdalAngular6Service(再次使用 forRoot() 中的硬编码来初始化)

app.modules 中的提供者数组:

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

            MsAdalAngular6Service

APP_INITIALIZER 基本上停止应用程序的启动，直到 useFactory 中提供的函数完成。 在下一节中，我们将在提供相关数据后将我们的 adalConfig 对象“提供给”providers 数组。我们提供变量本身(provide:'adalConfig')，因此该函数可以返回它(useFactory:getConfig)，因为getConfig()不使用传递给它的任何属性，deps:是多余的。

我真的希望这对您有所帮助，如果我有什么错误，请纠正我。

更多信息您可以引用: https://angular.io/guide/dependency-injection-providers Angular: How to correctly implement APP_INITIALIZER