3

So I have been looking at the video describing the static website/serverless architecture with blazor. I felt really inspired to create something like this. Unfortunately, I cannot find a decent source for how to actually authenticate against the secure Azure Functions backend with the Blazor web assembly.

The whole point here is to have just the static blazor site, with no backend API(just the azure functions), and to not worry about users, but leverage this part to azure and providers (In my case Facebook). So I have set up the authentication part in the Azure Functions authentication panel to Facebook. (ref image) I am also hopeful that I will be able to get the userid as an input binding somehow.

Azure Functions Authentication / Authorization

I never tried asking online for help before but I am at my last leg with this issue.‍♂️ If anyone has any tutorials, examples, or tips on how to make the blazor pages and httpclient authenticated against the azure functions in a static blazor webassembly project, it will be much appreciated.

JohnLBevan
  • 22,735
  • 13
  • 96
  • 178
Glenn-Vegar Sørensen
  • 31
  • 3
  • FYI: I've not yet played with the functions piece, but here's some useful starting info on static sites (just using a storage account, so cheaper than app services) with serverless API here: https://www.lunavi.com/blog/serverless-websites-in-azure-with-new-storage-account-static-websites and here: https://www.youtube.com/watch?v=G_gDYlRBAZw. For auth see https://learn.microsoft.com/en-us/shows/on-net/authentication-for-serverless-apps-with-easy-auth / https://learn.microsoft.com/en-us/azure/architecture/serverless-quest/functions-app-security – JohnLBevan Jan 20 '23 at 09:22

1 Answers1

0

From the screenshot, it appears you want to "Bring your own Function."

First, make sure your Static Web App is running in the "Standard Plan" - not the "Free" plan. The free plan does not allow Bring your own Function.

Second, all of your Azure Functions should be marked as Anonymous as the Static Web App will control access to the Azure Function using the routes parameter in the staticwebapp.config.json file.

Finally, you need to link the Azure Function to the Static Web App. This is explained in the Bring your own Function documentation. You will need to update the workflow definition file (ends in .yml) and set the api_location to blank which is api_location: ""

Your Azure Function will look like this when linked: enter image description here

What I did to get started was to follow the Microsoft instructions for the Managed Api to get familiar with the resources and then later split off to a Bring your own Function.

Hopefully this helps!

jassent
  • 529
  • 3
  • 10