how to generate dynamic data for adal-angular6 configuration

Question

I'm currently connecting to AAD, and azure graph api, fetching all I need and its great. My problem is that my 'adalConfig' properties are written hard coded like this :

in app.module > imports:

         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,
    }),

This is very bad for me because we have several clients that ill need different information for each one of them. what I want to do is getting the information from the server with the correct details. So basically using the .forRoot somehow in an async way.

I've found this article : https://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/ I thought its related enough to what I want to achieve, but I just can't figure it out.

score 1 · Accepted Answer · answered Apr 08 '19 at 11:40

so I've finally did it, and it wasn't that difficult after all. ill walk through the steps that of all my "adal" configuration. please refer to the following article, which helped a lot : 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
}

the above function will be used (in the providers section) to provide the providers array with the adalConfig variable.

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,
        }                
    }));
}

in the above function, I return a function, that resolves a Promise (I'll use this function in the APP_INITIALIZER, who require a Promise - otherwise you'll get an error) the Promise is from My connectionService, which in my app responsible for connecting to out server. the getConfigs() is simple as this:

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

    }

the http /httpClient uses observables and subscription, but since I want a Promise, I use the .toPromise function.

if you've read the article, you saw that I didn't initiate the MsAdalAngular6Module with the forRoot(), because I wanted to get all my adalConfig information from the server.

imports: [

    c.MsAdalAngular6Module,

],

from my understanding, the MsAdalAngular6Module will use the provided variables in the providers array, to construct the MsAdalAngular6Service (again, insated using the hardcoded in the forRoot())

the providers array in app.modules :


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

            MsAdalAngular6Service

the APP_INITIALIZER basically stop the initiation of the app, until the the function provided in the useFactory finished. the next section, we use to "give" the providers array our adalConfig object, after it has the relevant data. we provide the variable itself ( provide: 'adalConfig') so this function can return it ( useFactory: getConfig,) since the getConfig() doesn't use any properties passed into it, the deps: is redundant.

I really hope this helped, and if I got something wrong, please correct me.

for more information you can refer to : https://angular.io/guide/dependency-injection-providers Angular: How to correctly implement APP_INITIALIZER

how to generate dynamic data for adal-angular6 configuration

1 Answers1