Programmtically setting AppId and redirection url for AAD in Augular 8

Question

question

SureshMathanMINDTREELIMITED-3225 asked · Feb 27 at 12:41 AM

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-msal dotnet-aspnet-spa

· 2

10 |1000 characters needed characters left characters exceeded

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

MarileeTurscak · Mar 03 at 06:07 PM

The recommended approach is using "Create app" in Microsoft Graph. https://docs.microsoft.com/en-us/graph/api/application-post-applications?view=graph-rest-beta&tabs=http

0 ·

MarileeTurscak MarileeTurscak · Mar 03 at 06:16 PM

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 ·

Answer 1 · 2021-03-04T05:08:54.373Z

JeevanManoj answered · Mar 04 at 05:08 AM

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

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

Answer 2 · 2021-03-04T22:58:04.657Z

SureshMathanMINDTREELIMITED-3225 answered · Mar 04 at 10:58 PM

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

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

question