Wanted: Sample code for calling Serverless Azure Function with Angular/AJAX & Authenticating with Azure Active Directory (AAD)

Question

I'm looking at sample-v2-code and I see lots of AAD angular examples but they all call razor apps and none call Azure Functions.

1. Is there an AAD Angular/AzureFunc example somewhere that I missed? If not, would 2-call-api-b2c be the best candidate to modify to call an azure function instead of a razor app?
2. It just dawned on me that a Function App that is an AJAX back end would look quite different than a C# ASP.NET Core REST (MVC) controller generated by Visual Studio... Can someone point me to a sample Function App that implements an REST API for an Angular/AJAX front end?
3. Now what about that sample ms-identity-dotnet-webapi-azurefunctions. Would this be the best candidate for the Azure Function back end for Angular AJAX? I see some nice examples of using curl... Can I expect to blindly use the AAD angular examples to call this instead of the razor app? In other words, are those fancy curl commands doing the same thing as Angular AJAX with MSAL? If not, what would I have to change?
4. I was surprised to see the clientId hard coded (see Constants.cs) in the source code. Is this secure? I'm thinking a malicious user could create another identical (and malicious) site if he had my tenantid and client id: is this true? After creating an Azure Function App in the portal.azure.com, I see I can define appsettings and connection strings and I see the connection strings are encrypted (but only available if you are using entity frameworks)... Are either of these candidates? (are app settings secure for clientids)? If not, where can we store them? A razor app can fetch a client id from a key vault which takes about 10 seconds to fetch is this OK if it only does it once at startup... This does not sound like a good option for a serverless Azure function. Is there a better option?
5. What about using a serverless durable Azure function which has a startup function (that could fetch the client id from the key vault) and a context that could hold the clientid. Would this be a secure approach? Are there any examples of how to do this?
6. Just exactly what AAD parameters are sensitive? Is it sufficient to keep the client ID secret or are there other parameters that should be kept secret?
7. I found "angular-8-app-with-cosmos-db-and-azure-function" and I will be studying this... It is a bit old, however, and I was hoping to find a Microsoft example...

Thanks

Siegfried

Answer 1

Hello @Siegfried Heintze

Thank you for sharing this question on this community space.

I have to say that this post is a challenge, but I do want to assist you on this one and feel free to correct me if any detail could be mistaken : )

For now, I would like to gather the next articles on which you shall find more details or answers to your previous statements as well as how to get this done in the right track.... So please direct yourself down below:

https://www.pshul.com/2020/02/07/azure-ad-authentication-from-angular-to-azure-functions/

https://medium.com/@sumindaniro/azure-function-app-as-the-backend-api-for-webapps-reactjs-c6a6ce26246

https://github.com/AzureAD/azure-activedirectory-identitymodel-extensions-for-dotnet/wiki

I hope you can find this helpful to address most of your concerns.

Looking forward to your feedback,

Cheers,

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.