question

SureshMathanMINDTREELIMITED-3225 avatar image
0 Votes"
SureshMathanMINDTREELIMITED-3225 asked ·

Programmtically setting AppId and redirection url for AAD in Augular 8

I have created a single-page using .net core web application with the Angular Template. This application requires AAD authentication. Hence I have integrated MSAL and Microsoft Graph API. The auth setting requires AppId, Redirection Url, and Scopes. When I try to set these values programmatically, it always considers the initial value, and the updated values are not taken. If anyone has suggestions, please let me know.

Code Snipet:

export const OAuthSettings = {
appId: '---*',
redirectUri: 'https://test-test.azurewebsites.net',
scopes: [
"user.read"
]
};

The SignIn call is not considering the update values.

To update these values, AppConfigService is created and called in the AppModule APP_INITIALIZER section.

{ provide : APP_INITIALIZER,
useFactory: (appConfigProvider: AppConfigService)=>{
return()=>appConfigProvider.loadConfig();
},
multi:true,
deps:[AppConfigService]}],





azure-ad-msaldotnet-aspnet-spa
· 2
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I've reached out to the product team as well to see if we have more guidance for this. (We don't have any Angular samples that I'm aware of that do this.)

0 Votes 0 ·
JeevanManoj avatar image
0 Votes"
JeevanManoj answered ·

Please refer to this sample here https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/tree/master/
In step 2 number at https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/tree/master/#setup
you can see that the configuration values are defined. You can edit them to your needs, for example

MsalModule.forRoot({
auth: {
clientId: 'Enter_the_Application_Id_Here',
authority: 'Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here',
redirectUri: 'https://test-test.azurewebsites.net',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // set to true for IE 11
},
},
{
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'profile',
],
unprotectedResources: [],
protectedResourceMap: [
['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
],
extraQueryParameters: {}
})

I don't see the need to set the values programmatically when you can easily configure it from this ts file. If this helps, please mark the answer as verified.


·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SureshMathanMINDTREELIMITED-3225 avatar image
0 Votes"
SureshMathanMINDTREELIMITED-3225 answered ·

Thanks, Jeevan for your suggestions. I have a similar configuration setup as you suggested. But while publishing to PPE and Prod, I need to update the configuration file as per the environment. Hence I'm looking for the option to push the same artifacts to both environments without any change and based on the environment config data should be collected from app configuration or key vault.

·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.