To securely call an Azure Function from an Angular app deployed in either Azure App Service or Azure Storage Account (Static Website Hosting), Please recommend an approach

Use Azure Active Directory (AAD) Authentication. integrate Azure API Management for additional control. Use MSAL.js in Angular to acquire and pass access tokens securely.

To securely call an Azure Function from an Angular app deployed in either Azure App Service or Azure Storage Account (Static Website Hosting), Please recommend an approach

Use Azure Active Directory (AAD) Authentication. integrate Azure API Management for additional control. Use MSAL.js in Angular to acquire and pass access tokens securely.

• azure
• azure-functions
• azure-appservice

• Provide code what you have tried. – Aslesha Kantamsetti Commented Nov 19, 2024 at 3:33

1 Answer 1

Check below steps to call an Azure Function with Angular app deployed in an Azure App Service.

• You need to create two app registrations one for API and other for Webapp.

In API app registration you need to add a scope.

In your angular app registration, add API permission that you've created earlier.

Thanks to @Pshul for clear explanation, I've referred this doc for the code.

After deploying your angular app to Azure web app, make sure you add the web app URL to app registration.

Make sure you enable CORS in your Function app

• To add Azure Function app as an API Go to APIM -> APIs -> Add API -> Azure Function App.

Please refer this MSdoc for better understanding about adding an Azure Function App as an API in Azure API Management.