Why and How Use Azure Active Directory (AAD) with Blazor Web Assembly (WASM)

Ғылым және технология

In this video Frank is explaining why you should use #Azure Active directory (#AAD). To show how easy it is to use, he will build a Blazor web assembly (#WASM) application, and use AAD with it. The demo will contain how to secure pages for authenticated users, and when part of the admin group. Frank will also share some very useful links to learn more and continue your journey.
☁️Subscribe: bit.ly/2jx3uKX
(#cloud5mins - Episode 62 )
USEFUL LINKS:
-----------------------
📝
🔗 Tutorial: Blazor in Azure Static Web Apps: c5m.ca/staticWebAppBlazor
🔗 Learn Publish a Blazor WebAssembly: c5m.ca/staticWebAppLearn
🔗 Get Started with Azure with a Free Subscription: c5m.ca/azFree
Timestamps
--------------------
00:00:00 Intro
00:00:21 Why use Azure Active Directory
00:01:31 Create an Application Registration in AAD
00:05:08 Create Blazor WASM application
00:07:01 Look web site & try Login
00:08:02 Make a page visible only when authenticated
00:09:23 Test secured page
00:10:22 Make a page visible only when part of administrator group
00:11:32 Test new security on the page
00:12:13 Share useful Links
FOLLOW ME ON
--------------------------
🔗 Twitter: / fboucheros
🔗 Linkedin: / fboucheros
🔗 Facebook: / frankysnotes
📺 Twitch: / fboucheros
BLOGS
-----------
🔗 Frankys Notes (EN): www.frankysnotes.com
🔗 Cloud en Francais (FR): www.cloudenfrancais.com
GEARS
-----------
- Camtasia 2020
- Fujifilm X-T2
- Blue Snowball
- GitKraken: c5m.ca/gitkraken
☁️

Пікірлер: 75

  • @fboucheros
    @fboucheros3 жыл бұрын

    What would you like to see in a video about Azure Identity? Give me scenario example.

  • @loladeking

    @loladeking

    3 жыл бұрын

    Add AAD to an existing blazor app or xamarin app? Awesome video

  • @arestlessmind780

    @arestlessmind780

    2 жыл бұрын

    Excellent video Frank, still holds up and works in 2022! Looking forward to seeing your other videos

  • @newyearshiphop

    @newyearshiphop

    Жыл бұрын

    Salut, c'est bien de voir un québécois faire ce genre de vidéo ? Ce serait vraiment de voir comment on peux faire le login flow sur mesure sans un pop-up. Ce serait bien de voir un flow qui reste toujours dans l'application. Bonne journée !

  • @sridharsathya8719
    @sridharsathya87193 жыл бұрын

    Frank, I love your passion and enthusiasm to share your knowledge. Got me started using AAD in 10 minutes or so! Thanks.

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Fantastic!

  • @ecwb
    @ecwb2 жыл бұрын

    That was exactly what I needed to see what a short perfect video, perfect many thanks Frank!

  • @DieterStapelberg
    @DieterStapelberg2 жыл бұрын

    Hey Frank, short, sweet and to the point. Great introduction. Subbed.

  • @mwonsil
    @mwonsil3 жыл бұрын

    In .Net 5,, I learned to use the SPA platform when registering a Blazor WASM app otherwise I would get a Missing Secret error. Great video!

  • @asrajan55

    @asrajan55

    2 жыл бұрын

    same here

  • @MlySultan
    @MlySultan3 жыл бұрын

    Great job, merci

  • @HMarkman
    @HMarkman2 жыл бұрын

    Please how to create the roles in the cloud?

  • @fboucheros

    @fboucheros

    2 жыл бұрын

    Great question @helvio Markman, I did a video very similar to this one on Ch9 (channel9.msdn.com/Series/Azure-Tips-and-Tricks-Static-Web-Apps/How-to-secure-your-C-API-with-Azure-Static-Web-Apps-13-of-16--Azure-Tips-and-Tricks-Static-Web-Apps#time=6m34s) and I show how to create roles in it.

  • @gmddmg
    @gmddmg3 жыл бұрын

    Hello from Uruguay! Great video. Keep going!

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Thank you! Will do!

  • @BiswameetHui
    @BiswameetHui3 жыл бұрын

    Can you please throw some more light onto the last part i.e the user role based authentication that you did? If i have to show/hide a component based on a user role, what all do I need to set up?

  • @guilhermemolin
    @guilhermemolin2 жыл бұрын

    Great video, helped me a lot!

  • @fboucheros

    @fboucheros

    2 жыл бұрын

    You're welcome!

  • @igor19781978
    @igor197819783 жыл бұрын

    Heavy thumbs up

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

    good video pal.

  • @BernhardHofmann
    @BernhardHofmann3 жыл бұрын

    Great video, thank you. You have a new subscriber. 🙂

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Welcome aboard!

  • @io_inc
    @io_inc3 жыл бұрын

    Could you please make a console application example as well

  • @abannsunny3515
    @abannsunny35152 жыл бұрын

    Great video! How do you authenticate an api back end with the same authentication scheme as the UI?

  • @HMarkman
    @HMarkman2 жыл бұрын

    Frank thank you for your videos, it is very helpful. It works while I am in the Visual Studio by when I try to move to IIS it fails, do you have any hit?

  • @fboucheros

    @fboucheros

    Жыл бұрын

    Thank you. I would need the error message to have a better idea... If you found already the solution please share it so others can benefits of it.

  • @talksis
    @talksis2 жыл бұрын

    wasm is SPA.so.. 3:33 Should I set Redirect URI type to SPA?

  • @adipati27ma
    @adipati27ma2 жыл бұрын

    Great content.. but I have a question... how to integrate the AAD as in the video, but for "role" data is retrieved and defined via fetching custom backend API? do I have to stick with "create project" with "-au SingleOrg"?

  • @fboucheros

    @fboucheros

    Жыл бұрын

    You don't have too. It's one way to do it, I was starting from nothing and it was a quick and simple way to do it.

  • @ia5687
    @ia56872 жыл бұрын

    I'm currently working on an existing Blazor WebAssembly Hosted app and trying to implement the Microsoft Identity platform. I've got it to the point where it attempts to log in but it returns an error each time "authorization failed. these requirements were not met: denyanonymousauthorizationrequirement: requires authenticated user". I've been finding that a lot of the documentation and answers on stack overflow tend to focus just of WASM which isn't hosted. Is there a correct way to implement this in a Blazor WASM Hosted application?

  • @Duelweb
    @Duelweb2 жыл бұрын

    In the Azure portal, you set the application as WEB application, but it should have been registered as a SPA application ?????

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

    Where do you add your account in administrator role?

  • @asrajan55
    @asrajan552 жыл бұрын

    What is the color scheme/theme you use in this video? I love it.

  • @fboucheros

    @fboucheros

    2 жыл бұрын

    In VSCode it's called Cobalt2 marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2

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

    Thank you for tutorial but I wonder how to configure/implement Azure AD SSO with Blazore WASM and Web API, please.

  • @Sam-pj4sb
    @Sam-pj4sb3 жыл бұрын

    Thanks for the tutorial! How different will this be with Blazor Server instead of Blazor Web Assembly?

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Mostly the same. If you create a new Blazor App (server) following those step it should works.

  • @Sam-pj4sb

    @Sam-pj4sb

    3 жыл бұрын

    @@fboucheros Brilliant, thank you Frank

  • @rogermills3298

    @rogermills3298

    3 жыл бұрын

    @@fboucheros Do you know how to set this up with Blazor Server to where I don't have to be authenticated when the site loads? I want to make a blazor server app that works just like you have in the demo. Where you log in when you navigate to the counter page.

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Yes. I show how to lock a page at 00:08:21, but if you don't use the "Autorize" attribute the page won't be protected. And pages like login, error, home, about or contact are often public... because you want every one to see them. Good question!

  • @TellaTrix
    @TellaTrix2 жыл бұрын

    Where did you add Role ? is it in Azure ?

  • @fboucheros

    @fboucheros

    2 жыл бұрын

    Yes the role "Adminiostrator" already exists in Azure Active Directory and because It's my subscription I was already part of it. To see the roles go in the AD inside the portal.

  • @BiswameetHui
    @BiswameetHui3 жыл бұрын

    Facing an error while trying to log in: blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Any idea how to fix this? Thanks!

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Great question @Biswameet Hui, yes go in the Azure portal and select the Azure Function or webapp you are trying to reach. From the left menu search for CORS. Add your source url (where are you calling from) and save. It should fix the problem.

  • @andrewsheley
    @andrewsheley3 жыл бұрын

    How do you get the roles from azure ad?

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    At 10:29 using the attribute [Authorize(Roles = "")] that's when I check if the role is present.

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

    what if i have an existing blazor server app that uses database to login. can i add azure ad to that?

  • @fboucheros

    @fboucheros

    7 ай бұрын

    I'm pretty sure it will required some light refactoring... But that's and interesting migration project. I'll put that on the video ideas!

  • @asrajan55
    @asrajan552 жыл бұрын

    The platform type "web" option does not work for me. Only the "SPA" option works. @ 3:14 in the video

  • @fboucheros

    @fboucheros

    2 жыл бұрын

    I think you are right, they updated the services. That means I need to redo this video 😅

  • @asrajan55
    @asrajan552 жыл бұрын

    How do you create the blazor app in Visual Studio?

  • @fboucheros

    @fboucheros

    Жыл бұрын

    Sorry for the late response. If Visual Studio is up to date you should have the option from the menu. Here a step by step tutorial: dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro

  • @cissemy
    @cissemy2 жыл бұрын

    Great How can I create registration page within my blazor app without going to azure portal ?

  • @cissemy

    @cissemy

    2 жыл бұрын

    So Sorry .I am seeing the signin link.

  • @prakashbuddhabhatti1725
    @prakashbuddhabhatti17253 жыл бұрын

    Can you please describe role based authentication? I have added roles in the application manifest. I get the role info in token if I decode it but in authorized view Roles="AssignedRole" always failed.

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    If you code is in GitHub, StackOverflow, or somewhere please share it, it will help me. Otherwise, I will try to do a little identity series soon.

  • @prakashbuddhabhatti1725

    @prakashbuddhabhatti1725

    3 жыл бұрын

    @@fboucheros github.com/prakash2912/BlazorwithAzureAuth you can find my sample code in the repository and I also mentioned issues I am facing in the readme file. It will be very helpful to me. I tried a lot to resolve the issue but not getting any solution.

  • @prakashbuddhabhatti1725

    @prakashbuddhabhatti1725

    3 жыл бұрын

    @@fboucheros Hi Frank. Did you get a chance to look into my code. I tried a lot but not able to resolve the issue.

  • @abhilashbhanot1850

    @abhilashbhanot1850

    3 жыл бұрын

    @@prakashbuddhabhatti1725 Hey did you get any solution to this As i am also facing the same issue

  • @prakashbuddhabhatti1725

    @prakashbuddhabhatti1725

    3 жыл бұрын

    @@abhilashbhanot1850 No I didn't get the solution

  • @akdmkz9926
    @akdmkz99263 жыл бұрын

    this is very helpful but I have a problem. after logging In, it stuck in loading and I am not able to accept the permission. I tried 3 project but still same behavior. what is the possible problem in my case?

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    Try in a different browser or in a "In Private" session. Do you still have that problem?

  • @honestcommenter8424
    @honestcommenter84249 ай бұрын

    Will it still work if you deploy to Azure?

  • @fboucheros

    @fboucheros

    7 ай бұрын

    the Identity? yes

  • @honestcommenter8424

    @honestcommenter8424

    7 ай бұрын

    @@fboucheros when I tried a simple blazor the Google sign in button appears and works locally, but when deployed to Azure the button doesn't even show up. Can you please make a tutorial on how to do it?

  • @Rajeshsingh-ws5th
    @Rajeshsingh-ws5th3 жыл бұрын

    is Implicit flow safe? if yes then no issue , if not then why are you not explained it?

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    What do you mean by "Implicit flow"?

  • @Rajeshsingh-ws5th

    @Rajeshsingh-ws5th

    3 жыл бұрын

    @@fboucheros expected PKCE flow.

  • @cjsalda
    @cjsalda3 жыл бұрын

    you miss the entire active directory configuration part

  • @fboucheros

    @fboucheros

    3 жыл бұрын

    missed it? What would you like to see?

  • @cjsalda

    @cjsalda

    2 жыл бұрын

    @@fboucheros configure roles and groups and how to add them as part of claims in the Blazor server app

Келесі