I am building a Teams app using React. The backend is an Azure Functions app. This Teams app is meant for internal organization only and I need to allow Function backend to only accept API requests from this Teams app. How can I do that?
When deploying a Teams app, it actually creates a static web app hosted in an Azure storage container. I couldn't find a static IP address for this container endpoint to whitelist this IP.
Is there any other way to allow Azure Function to allow requests from this particular Teams app (static web app hosted in Storage container)
CodePudding user response:
As far as I can tell, you cannot limit the function to accept the requests only from a specific teams app. Your azure function is actually called not "from the static app" but from the user's browser (or Teams client) that can be anywhere.
I mean, the browser (or teams client) downloads the app javascript files from your static hosting, and then runs them. Running these files results in calling your azure function. So, the call to your azure function is coming from a browser, and not your static hosting.
What you could do, is to make your function authenticate your users, and allow only users from your organization to call it. All users who are logged in Teams are already authenticated by Teams, so you could use that identity (Teams can provide that identity in a form of a token to your app if the app asks for it).
CodePudding user response:
This is definitely possible, and the way to do this is to have a multi-tenant Azure AD app registration with an "api" capability. This article describes some of the background but unfortunately focuses mostly on Graph so it's a little incomplete for your scenario - nevertheless it's a good starting point. You would then use MSAL.js to request the tokens from the backend, and pass these as "bearer" tokens to your backend API. Your API is able to verify these signed tokens, to ensure they are issues from your own application, and to validate the user's AadOjectId, UPN, Tenant, and so on.