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

[@fboucheros]

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

[@loladeking]

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

[@arestlessmindband]

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

[@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 !

[@DieterStapelberg]

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

[@talksis]

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

[@sridharsathya8719]

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

[@fboucheros]

Fantastic!

[@ecwb]

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

[@BiswameetHui]

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?

[@HMarkman]

Please how to create the roles in the cloud?

[@fboucheros]

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.

[@asrajan55]

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

[@fboucheros]

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

[@mwonsil]

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]

same here

[@gmddmg]

Hello from Uruguay! Great video. Keep going!

[@fboucheros]

Thank you! Will do!

[@Duelweb]

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

[@shatvani]

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

[@kourosh234]

Where do you add your account in administrator role?

[@Sam-pj4sb]

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

[@fboucheros]

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

[@Sam-pj4sb]

@@fboucheros Brilliant, thank you Frank

[@rogermills3298]

@@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]

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!

[@adipati27ma]

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]

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.

[@JensChr.I.Thomsen]

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

[@fboucheros]

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!

[@io_inc]

Could you please make a console application example as well

[@asrajan55]

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

[@fboucheros]

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

[@HMarkman]

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]

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.

[@asrajan55]

How do you create the blazor app in Visual Studio?

[@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

[@ia5687]

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?

[@cissemy]

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

[@cissemy]

So Sorry .I am seeing the signin link.

[@guilhermemolin]

Great video, helped me a lot!

[@fboucheros]

You're welcome!

[@prakashbuddhabhatti1725]

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]

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]

@@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]

@@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]

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

[@prakashbuddhabhatti1725]

@@abhilashbhanot1850 No I didn't get the solution

[@andrewsheley]

How do you get the roles from azure ad?

[@fboucheros]

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

[@hurolinci5986]

good video pal.

[@TellaTrix]

Where did you add Role ? is it in Azure ?

[@fboucheros]

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]

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]

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.

[@igor19781978]

Heavy thumbs up

[@abannsunny3515]

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

[@BernhardHofmann]

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

[@fboucheros]

Welcome aboard!

[@honestcommenter8424]

Will it still work if you deploy to Azure?

[@fboucheros]

the Identity? yes

[@honestcommenter8424]

@@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?

[@MlySultan]

Great job, merci

[@akdmkz9926]

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]

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

[@Rajeshsingh-ws5th]

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

[@fboucheros]

What do you mean by "Implicit flow"?

[@Rajeshsingh-ws5th]

@@fboucheros expected PKCE flow.

[@cjsalda]

you miss the entire active directory configuration part

[@fboucheros]

missed it? What would you like to see?

[@cjsalda]

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