How to Secure a Blazor WebAssembly App Using Azure Active Directory

In this video, I'll guide you through the step-by-step process of securing your Blazor WebAssembly app with Azure Active Directory.
Subscribe for more content like this: kzread.info...
Support the channel: www.buymeacoffee.com/itsmepat...
Learn more :
learn.microsoft.com/en-us/asp...
Where you can find me:
💻 Github: github.com/techwithpat
🌐 Website: www.techwithpat.com
🕴️ LinkedIn: / patrick-tshibanda-4310...
#Blazor #WebAssembly #Azure #ActiveDirectory #Security #Tutorial #HowTo #StepByStep #Guide #Authentication #Authorization

Пікірлер: 29

  • @user-tx2gu7wb6z
    @user-tx2gu7wb6z4 ай бұрын

    Thank you, this is a very good explanation of exactly what i need.

  • @Rajeshsingh-ws5th
    @Rajeshsingh-ws5th10 ай бұрын

    extremely good.

  • @aminsaadati3809
    @aminsaadati38097 ай бұрын

    🙂it was really nice to know. Thank you for this valuable teach

  • @MarownIOM
    @MarownIOM2 ай бұрын

    Could you do another video on passing the ad credentials to an API having it's own app registration?

  • @itaylorm
    @itaylorm5 ай бұрын

    This is great for .NET 7. Would even better if it covered .NET 8

  • @FearGod123
    @FearGod1234 ай бұрын

    Very good video. Can you please create a tutorial of using Azure Active Directory for both Blazor serve and WebAssembly in .NET 8?

  • @lufve12

    @lufve12

    3 ай бұрын

    Kann dazu nur Ja sagen. zu beiden Aussagen.

  • @user-bq3jd2ud7w
    @user-bq3jd2ud7w9 ай бұрын

    Can you make a video of creating CustomAuthendicationStateProvider in MSAL Authenticated Blazor wasm Application(without any super user). I was just trying to add some details of the user from my Db into the AuthendicationState. So I'm planning to add that after getting the token email everything from Azure Add & later made a request to my api to get the data to Add in Authendication State. please help me .

  • @stavvers
    @stavvers3 ай бұрын

    This was great! But can someone advise me here, im not too sure where to start searching this but I want to achieve this workflow: I have a blazor web assembly app I have an azure functions app user logs into web assembly app, and then with that same token, makes authenticated calls to the azure functions app. How would i set up this workflow? where would i start to look?

  • @pyrekg
    @pyrekg9 ай бұрын

    Thank you for the video, it works for me. I have a question. How I can add an audience using AddMsalAuthentication? With AddOidcAuthentication I can set my API as audience but I cannot find this option in case you shown.

  • @TechWithPat

    @TechWithPat

    9 ай бұрын

    I think you should be able to add additionnal configuration in the "AddMsalAuthentication" : options.ProviderOptions.DefaultAccessTokenScopes.Add("{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}/{DEFAULT SCOPE}");

  • @pyrekg

    @pyrekg

    9 ай бұрын

    thank you!

  • @eliewithlove
    @eliewithlove2 ай бұрын

    I am getting when registering the policy Warning CS8604 Possible null reference argument for parameter 'value' in 'bool string.Contains(string value)'

  • @joelrcc
    @joelrcc8 ай бұрын

    With exactly this configuration, how can i get the access token?

  • @user-ct9bt8sp8k
    @user-ct9bt8sp8k10 ай бұрын

    First let me say Great video. My project is a Blazor Server application, can i use this method on that? And if you could tell me how to show the user email also in the mainlayout file next to name, that woild be great.

  • @TechWithPat

    @TechWithPat

    10 ай бұрын

    You can certainly adapt the concept discussed in the video for a Blazor Server app. To display the user's email address, you'll need to retrieve the email claim. One way to achieve this is by using a cascaded parameter of type Task which provides you with the user's ClaimsPrincipal. For an example, you can refer to this blog post: trystanwilcock.com/2022/02/06/how-to-get-the-current-user-in-blazor-c/? It demonstrates how to work with user claims in a Blazor application."

  • @jvdub22
    @jvdub2210 ай бұрын

    Is there a way to do this with a custom login page and domain instead of Microsofts page?

  • @TechWithPat

    @TechWithPat

    10 ай бұрын

    Unfortunately, no

  • @sinnistar99

    @sinnistar99

    8 ай бұрын

    Thankfully, no.

  • @csunstudent148
    @csunstudent1483 ай бұрын

    I think that there have been changes to how Active Directory makes group claims available, is there anyone who's able to get the superusers claim in this case to work? The option for Manage > Token Confirguration is no longer even available in the App Registration within Azure AD B2C. I've gone through the debugger and confirmed that the line 23 in Program.cs does not actually ever trigger the c.Value.Contains(builder.Configuration["groups:superusersid"]);, as c.Value will no longer include the group claim. Anyone have a fix?

  • @arunprabha1244

    @arunprabha1244

    2 ай бұрын

    I faced the same problem now and found the fix. Looks like group membership claims are not included in the token by default by AAD and needs to be opted in by the developer. In the client app registration, go to "Token Configuration" section and click on "Add groups claim" and choose "Security groups" in the Edit groups claim blade. Save and run the app again, the groups are now available in the code!

  • @cenkyenikoylu2670
    @cenkyenikoylu26707 ай бұрын

    So, is the Active Directory service free? Is it within the scope of free 12 months? (The name of the new service is Entra ID.)

  • @mustafasabur
    @mustafasabur10 ай бұрын

    Are you sure what you are doing is correct? Since the whole wasm application runs in de browser, you cannot assume that your authorizedRoute cannot be bypassed. Authorization checks should be done server side. I’m new to blazor so maybe that’s what is happing but you also didn’t checked “aspnet hosted” at project creation, so I fail to see how this can work as it’s a static spa app

  • @TechWithPat

    @TechWithPat

    10 ай бұрын

    Have you tried? Security involves both Authentication and Authorization. App authentication is managed by AAD. When a user accesses the app, they are redirected to the Azure AD sign-in page. After successful authentication, Azure AD issues two crucial tokens: an authentication token and an access token. These tokens contain vital user information and details about their authorization level. Authorization checks should be carried out on both the client side and the server side. But, since the tutorial is centered around a Blazor WebAssembly App, authorization is evaluated on the client side through components like CascadingAuthenticationState. If I had used a backend API, I would have included the access token so that the server would have the information to perform the authorization.

  • @mustafasabur

    @mustafasabur

    10 ай бұрын

    @@TechWithPat I’m not questioning Microsoft’s authentication. Just saying client side authorization checks are not secure.

  • @TechWithPat

    @TechWithPat

    10 ай бұрын

    @@mustafasabur Client-side authorization alone is insufficient, I agree. Nevertheless, the video intends to showcase client-side authentication and authorization. The static single-page application (SPA) can communicate with a web API, which means authorization verifications will occur in the API endpoints accessed by the app (beyond the tutorial's focus)

  • @stoef

    @stoef

    9 ай бұрын

    ​@@TechWithPati'll piggyback this conversation to ask how I would be able to send the token from my wasm page to my API. I've been trying all sorts of things but can't find something that works.

  • @TechWithPat

    @TechWithPat

    9 ай бұрын

    @@stoef You can use an AuthorizationMessageHandler to attach acces token to outgoing request. learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-7.0

  • @TechWithPat
    @TechWithPat Жыл бұрын

    Looking for the source code? grab it here: bit.ly/3NppZia