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
What would you like to see in a video about Azure Identity? Give me scenario example.
@loladeking
3 жыл бұрын
Add AAD to an existing blazor app or xamarin app? Awesome video
@arestlessmind780
2 жыл бұрын
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 !
Frank, I love your passion and enthusiasm to share your knowledge. Got me started using AAD in 10 minutes or so! Thanks.
@fboucheros
3 жыл бұрын
Fantastic!
That was exactly what I needed to see what a short perfect video, perfect many thanks Frank!
Hey Frank, short, sweet and to the point. Great introduction. Subbed.
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
2 жыл бұрын
same here
Great job, merci
Please how to create the roles in the cloud?
@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.
Hello from Uruguay! Great video. Keep going!
@fboucheros
3 жыл бұрын
Thank you! Will do!
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?
Great video, helped me a lot!
@fboucheros
2 жыл бұрын
You're welcome!
Heavy thumbs up
good video pal.
Great video, thank you. You have a new subscriber. 🙂
@fboucheros
3 жыл бұрын
Welcome aboard!
Could you please make a console application example as well
Great video! How do you authenticate an api back end with the same authentication scheme as the UI?
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.
wasm is SPA.so.. 3:33 Should I set Redirect URI type to SPA?
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.
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?
In the Azure portal, you set the application as WEB application, but it should have been registered as a SPA application ?????
Where do you add your account in administrator role?
What is the color scheme/theme you use in this video? I love it.
@fboucheros
2 жыл бұрын
In VSCode it's called Cobalt2 marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2
Thank you for tutorial but I wonder how to configure/implement Azure AD SSO with Blazore WASM and Web API, please.
Thanks for the tutorial! How different will this be with Blazor Server instead of Blazor Web Assembly?
@fboucheros
3 жыл бұрын
Mostly the same. If you create a new Blazor App (server) following those step it should works.
@Sam-pj4sb
3 жыл бұрын
@@fboucheros Brilliant, thank you Frank
@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
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!
Where did you add Role ? is it in Azure ?
@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.
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
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.
How do you get the roles from azure ad?
@fboucheros
3 жыл бұрын
At 10:29 using the attribute [Authorize(Roles = "")] that's when I check if the role is present.
what if i have an existing blazor server app that uses database to login. can i add azure ad to that?
@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!
The platform type "web" option does not work for me. Only the "SPA" option works. @ 3:14 in the video
@fboucheros
2 жыл бұрын
I think you are right, they updated the services. That means I need to redo this video 😅
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
Great How can I create registration page within my blazor app without going to azure portal ?
@cissemy
2 жыл бұрын
So Sorry .I am seeing the signin link.
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
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
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
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
3 жыл бұрын
@@prakashbuddhabhatti1725 Hey did you get any solution to this As i am also facing the same issue
@prakashbuddhabhatti1725
3 жыл бұрын
@@abhilashbhanot1850 No I didn't get the solution
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
3 жыл бұрын
Try in a different browser or in a "In Private" session. Do you still have that problem?
Will it still work if you deploy to Azure?
@fboucheros
7 ай бұрын
the Identity? yes
@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?
is Implicit flow safe? if yes then no issue , if not then why are you not explained it?
@fboucheros
3 жыл бұрын
What do you mean by "Implicit flow"?
@Rajeshsingh-ws5th
3 жыл бұрын
@@fboucheros expected PKCE flow.
you miss the entire active directory configuration part
@fboucheros
3 жыл бұрын
missed it? What would you like to see?
@cjsalda
2 жыл бұрын
@@fboucheros configure roles and groups and how to add them as part of claims in the Blazor server app