How to add AAD Authentication To Azure Function and Call Function from Local Web App?

Question

My tutorial from 9781484250396 seems to missing some instructions on how to Call an authenticated Azure Func from an Authenticated WebApp.
I am hosting my web app on my development machine and calling an azure function. Both the azure function and the web app are authenticated with Azure AD.

I've been studying configure-authentication-provider-aad. I registered the Azure Function application in AAD and enabled ID tokens. For step 9 it says "Select Expose an API > Set. For single tenant app, paste the URL of your App Service app and select Save."

Questions:

(1) I click on "Expose an API". Where is the set?

(2) What do they mean by app service app? Since I'm hosting the client on my dev machine, that would be https://localhost:5001. Do they mean the Azure function? OK, where do I paste the URL of the app function?

(3) Please confirm that I don't need to specify a redirection URL for a Azure Function. I tried specify the URL of my local web app, but this did not help.
.

See the screen capture in the attachment for the C# source code. Line 40 is returning false.

Thanks

Siegfried

Answer 1

@Siegfried Heintze , Ok lets take few steps back and start from the part of understanding AAD and why are applications added to it? First thing, AAD is an IDM (Identity Management Service), which maintains users' identities. Now when you create an application in your dev machine and want users of AAD to login there, in that case, the user first needs to be authenticated by AAD. But then the question comes, get authenticated for what? The answer to that is to get authenticated for your App. Now does AAD know your app till now. The answer is no, AAD has no clue about your app. Hence to make AAD aware of you app, you need to register your App using the App Registration Portal (in case of OAuth Apps). Once the registration is done, AAD is aware of your app and hence when a request comes from this app to get a user authenticated, AAD trusts your app and hence would get the user authenticated for your app and send an access token back for your app to consume and know that the user is authenticated. This is how your app gets protected by AAD, irrespective of the platform it is hosted on (whether on Azure App Service Platform or on your on-prem WebServer).

The same concept holds true for your Function App acting as an API. The Function App's code works as an API, but then once you add this function app to AAD, AAD now knows your Function App, but it doesnt know whether this app is a normal app or an API. So once you expose this App as an API, AAD also has that information and treats this app as an API and makes it available for other registered Apps in AAD to consume.

Do let me know if this helps in any way. Also I would like to discuss this offline as not possible to explain to the entire application permission for apps here. Still you can refer to the following for understanding: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as Answer; if the above response helped in answering your query

Answer 2

@Siegfried Heintze , Thank you for reaching out. I would like to jump directly on your questions:

Questions:

(1) I click on "Expose an API". Where is the set?
Ans: As I understood from your description, you have exposed the Azure Function App's App registration as an API in AAD. The Expose as an API option works for APIs that you have created and want to get them protected by AAD and also use by other applications those are protected by AAD. Once you set the api i.e api://{app-id} it actually gets set on the Service Principal Object of the App Registration done (in your case for the Function App's App Registration)

(2) What do they mean by app service app? Since I'm hosting the client on my dev machine, that would be https://localhost:5001. Do they mean the Azure function? OK, where do I paste the URL of the app function?
Ans: By App Service App, what that article means is the App registration that you do for your App Service. By this it means you are protecting your App Service with AAD by registering the App Service in AAD. I wpould like to share some insights on the App Registration model in AAD. When you register an app in AAD, two objects get created simultaneously when created using the Azure Portal:
Application Object: Contains the app id and app related settings like multitenant or single tenant and what type of tokens this app needs to issue. This object basically is a connection that creates created between your code/application and AAD, so that AAD has a reference about this application.
Service Principal Object: Contains the Permissions and consents that are provided on this application during its registration in AAD.
You can read more on these objects and its behaviour here: https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-how-applications-are-added

So an app object mostly contians few basic requirements:
App ID: Unique guid that idenitfies the application registration in AAD.
App Secret: it is used to prove the authenticity of this app. This secret is created in AAD and is specified in the application code (mostly web.config file), so that when the app creates a request for AAD it sends this secret in that request for AAD to validate the application request.
Redirect URI: This is the place where your application expects AAD to post the response after authentication. In your case it can be either https://localhost:5001 or some other endpoint as you might have coded in your application.

So once using these information are fetched from the App registeration done in AAD, these details have to be provided in your app service as mentioned here: https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-provider-aad#-enable-azure-active-directory-in-your-app-service-app

Mostly all

(3) Please confirm that I don't need to specify a redirection URL for a Azure Function. I tried specify the URL of my local web app, but this did not help.
Ans: The redirect uri is not needed as such for your Function App. But you would need to add delegated or application permission for the function app api in your Azure web app's app registration done in AAD.

Hope this helps. I know this can be little confusing. I tried by best to explain but in case you have some queries on this I would be more than happy to help you further. In case you need further help, please do share the following details to azcommunity[at]microsoft[dot]com, so that we can connect offline on this to discuss this further.

• Tenant ID:
• Subscription ID:

Do not forget to share the reference of this post so that it is easier for me to get back to you.

Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as Answer; if the above response helped in answering your query.

Answer 3

Sorry -- I'm still not clear on some things.
Good news: My AAD/Azure Function tutorial is working with the source code above.
(1) It looks like my Azure Function is considered an API and it needs to be exposed. I have not clicked the "Set" button because I still cannot find it. Oh, I see I have not added a client application either. Hmmm... Why is my app working?
(2) Please confirm that I since I am hosting the Web App on my dev machine, I am not using an App Service App. Is it possible that my Azure Function is an App Service App? I have not registered it with App Service.

(3)

But you would need to add delegated or application permission for the function app api in your Azure web app's app registration done in AAD

I see I have done this for my Web App. What if I wanted to call my Azure function directly from Browser Resident Javascript (Angular/JQuery) instead of C# and my web app was just a static web page with javascript code. Would I still need to register this static web page in AAD?

(4) New Question: How do I confirm that AAD is protecting my Azure Function?

Thanks

Siegfried

Answer 4

Thank you soumi.

I was surprised to learn that my azure function is indeed an app service app as it is included in the list of app services.

After reviewing your responses with my buddy Bob, things are clearer now.

Siegfried