I am using Msal in Angular 9.1.1 version to load msal configuration for each environment dynamically.
$appSettings = [];
foreach ($_SERVER as $key => $value) {
if(preg_match('/^APPSETTING_/', $key)) {
$appSettings[str_replace('APPSETTING_', '', $key)] = $value;
}
}
header('Content-Type: application/json');
echo json_encode($appSettings);
?>
import { Injectable, isDevMode } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppSetting } from 'src/models/AppSetting';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class AppSettingsServiceService {
private appConfig: any;
public appSetting: AppSetting;
constructor(private httpClient: HttpClient) {
}
loadAppConfig() {
if (isDevMode()) {
this.appSetting = new AppSetting();
this.appSetting.ApiUrl = environment.ApiUrl;
this.appSetting.B2C = environment.B2C;
}
else {
return this.httpClient.get('appSettings.php', { headers: { skip: "true" } })
.toPromise()
.then(data => {
this.appConfig = data;
this.appSetting = new AppSetting();
this.appSetting.ApiUrl = this.appConfig.ApiUrl;
this.appSetting.B2C.UiClientId = this.appConfig.UiClientId;
this.appSetting.B2C.Tenant = this.appConfig.Tenant;
this.appSetting.B2C.SignInPolicy = this.appConfig.SignInPolicy;
this.appSetting.B2C.PasswordRestPolicy = this.appConfig.PasswordRestPolicy;
this.appSetting.B2C.ApiScopes = this.appConfig.ApiScopes.split(',');
this.appSetting.B2C.UiScopes = this.appConfig.UiScopes.split(',');
});
}
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, PLATFORM_INITIALIZER } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { NgbModule, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BaseUrlInterceptor } from './common/baseUrlInterceptor';
import { environment } from 'src/environments/environment';
import { Configuration } from 'msal';
import {
MsalModule,
MsalInterceptor,
MSAL_CONFIG,
MSAL_CONFIG_ANGULAR,
MsalService,
MsalAngularConfiguration
} from '@azure/msal-angular';
import { msalConfig, msalAngularConfig } from './app-config';
import { AppSettingsServiceService } from './services/app-settings-service.service';
import { NgHttpLoaderModule } from 'ng-http-loader';
function MSALConfigFactory(appConfigService: AppSettingsServiceService): Configuration {
//return msalConfig;
return {
auth: {
clientId: appConfigService.appSetting.B2C.UiClientId,
authority: appConfigService.appSetting.SignInAuthority,
redirectUri: window.location.origin,//'http://localhost:4200/',
postLogoutRedirectUri: window.location.origin + '/logout',
navigateToLoginRequestUrl: true,
validateAuthority: false,
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: false, // Set this to 'true' to save cache in cookies to address trusted zones limitations in IE
},
}
}
function MSALAngularConfigFactory(appConfigService: AppSettingsServiceService): MsalAngularConfiguration {
//return msalAngularConfig;
let protectedResourceMap = appConfigService.appSetting.protectedResourceMap;
return {
popUp: false,
consentScopes: [
...appConfigService.appSetting.B2C.UiScopes,
...appConfigService.appSetting.B2C.ApiScopes,
],
unprotectedResources: [], // API calls to these coordinates will NOT activate MSALGuard
protectedResourceMap, // API calls to these coordinates will activate MSALGuard
extraQueryParameters: {}
}
}
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
NgbModule,
MsalModule,
NgHttpLoaderModule.forRoot()
],
providers: [
{
provide: APP_INITIALIZER,
multi: true,
deps: [AppSettingsServiceService],
useFactory: (appConfigService: AppSettingsServiceService) => {
return () => {
//Make sure to return a promise!
return appConfigService.loadAppConfig();
};
}
},
{
provide: HTTP_INTERCEPTORS,
useClass: BaseUrlInterceptor,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_CONFIG,
deps: [AppSettingsServiceService],
useFactory: MSALConfigFactory
},
{
provide: MSAL_CONFIG_ANGULAR,
deps: [AppSettingsServiceService],
useFactory: MSALAngularConfigFactory
},
MsalService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I change the logic to get hosted environment php file in my development environment i found that below highlighted line i am getting exception.
![image](https://user-images.githubusercontent.com/4247402/97134041-f9863e80-1771-11eb-8347-e19f3627fb95.png)