Create Secure Blazor WebAssembly & ASP.NET Core API Project with Azure Active Directory B2C

#blazor #azure #dotnetcore #activedirectory
Welcome back everyone to AK Academy
In this video we are going to learn how to create a Blazor WebAssembly with ASP.NET Core API secured with Azure Active Directory B2C.
We will see the following in this video:
1- Azure Active Directory B2C General Overview: 00:00
2- Create an Azure Active Directory B2C Tenant: 05:05
3- Create the SignUp-SignIn user flow: 06:55
4- Register the API Application: 10:25
5- Register the Client Application: 14:00
6- Create the Blazor WebAssembly Hosted App with B2C Individual Auth: 18:05
7- Setting up the client auth settings: 24:37
8- Setting up the API auth settings: 26:51
GitHub Repo:
github.com/aksoftware98/aadb2...
Microsoft Offical Documentation:
docs.microsoft.com/en-us/aspn...
Request a Quotation:
ahmadmozaffar.net/quotation
My official website:
ahmadmozaffar.net
GitHub:
bit.ly/2Fnie9R
Twitter:
bit.ly/2ZVlEdb
Facebook (Personal):
bit.ly/2Qqwntf
Facebook (Page):
bit.ly/35ssDvv
Instagram:
bit.ly/37EpU3z

Пікірлер: 133

  • @patrikopacic7484
    @patrikopacic74842 жыл бұрын

    Great stuff, pretty much went through everything I needed to know except CORS issues I had because I had a standalone blazor webassembly project

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Hey mate, sorry for late reply Thanks a lot for that amazing comment, regarding your issue it's very simple In the startup.cs in your API in the Configure function make sure to add app.UseCors(cors => cors.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()); Sorry for late reply

  • @adds-kz3oc
    @adds-kz3oc2 жыл бұрын

    Thank you so much. This is easily the best tutorial on B2C with Blazor WASM. You have just saved me hours of frustration :)

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    That comment made my day, thanks a lot

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

    Best video so far on this topic! Thank you mate, worked like a charm!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    Жыл бұрын

    That comment made my day Thanks a lot

  • @marktrinder626
    @marktrinder6262 жыл бұрын

    I would not have figured this out by myself. Thank you!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    So glad that it was helpful for you

  • @Zyxon88
    @Zyxon883 жыл бұрын

    Amazing ! Thank you, always learning so much from you!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    So nice of you, Thanks for amazing feedback

  • @rotr8967
    @rotr89672 жыл бұрын

    Thanks for this extremely useful tutorial and your clear explanations.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Glad you enjoyed it! thanks for nice comment

  • @80amnesia
    @80amnesia8 ай бұрын

    Best video on this topic! Still using it as a reference.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    8 ай бұрын

    So happy to read your comment, thanks for leaving such a feedback

  • @der-mit-dem-rotwild-tanzt
    @der-mit-dem-rotwild-tanzt2 жыл бұрын

    Super helpful video. Thank you so much. I will definitely checkout out your other content as well.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Awesome, thank you! amazing feedback

  • @viniciusalvess
    @viniciusalvess2 жыл бұрын

    Thanks a lot for the video. It's very helpful.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    You are welcome! so happy to hear that

  • @argeelearner3978
    @argeelearner39783 жыл бұрын

    Thanks Bro, I love your stuff

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    I appreciate that! Thanks

  • @jamesscott6864
    @jamesscott68642 жыл бұрын

    Successful. Thanks very much !

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    You're welcome!, so happy that you liked it

  • @zs3671
    @zs36712 жыл бұрын

    Great video.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Thanks for the visit

  • @FerDeath
    @FerDeath2 жыл бұрын

    Amazing video!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Thanks for nice feedback

  • @argeelearner3978
    @argeelearner39783 жыл бұрын

    I really appreciate you videos

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    I really liked your comment

  • @jamesheffer3965
    @jamesheffer39653 жыл бұрын

    THANK YOU DUDE!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Happy to help

  • @jamesheffer3965

    @jamesheffer3965

    3 жыл бұрын

    @@ahmad.mozaffar You really saved our team a LOT of time and hassle, so thanks again dude! If you wouldn't mind friend, could you please email me? jamesalainheffer@gmail.com, I'd like to ask you a question about roles in Azure. Basically we signed up a user using the Microsoft Account identity provider and the roles arent showing in my claims.

  • @keithjairam8452
    @keithjairam84528 ай бұрын

    Great content

  • @ahmad.mozaffar

    @ahmad.mozaffar

    7 ай бұрын

    Thanks a lot

  • @John-qy1rg
    @John-qy1rg Жыл бұрын

    great video, helped alot !

  • @ahmad.mozaffar

    @ahmad.mozaffar

    Жыл бұрын

    So happy to hear!!

  • @Jacob-Clinton
    @Jacob-Clinton2 жыл бұрын

    Thank you for the video! One problem though. I've tried to replicate the sample projects along with your steps as a separated Blazor WebAssembly App and ASP.NET Core Web API but it doesn't seem to be authorizing the request as it never reaches the API controller. This might be because I am using an ASP API instead of Blazor Wasm Server but I'm not sure.

  • @saddamhossaindotnet
    @saddamhossaindotnet3 жыл бұрын

    Welcome back, brother. Happy Ramadan.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thaanks, Happy Ramadan for you too

  • @EntryURL
    @EntryURL10 ай бұрын

    Really good thank you for this great video. I've been going through the documentation but it's so much clearer when I can actually see how it's done 😭.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    10 ай бұрын

    Glad it was helpful! so happy to see this lovely feedback

  • @veshvesh2157
    @veshvesh21573 жыл бұрын

    there he issss !! welcome back bro

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks for your comment Happy for that

  • @billherzog1833
    @billherzog18332 жыл бұрын

    This video was extremely helpful. Thank you. Any opportunity for you to add a video where the blazor app can manage the users in the B2C store? I would love to see a paged list of users and then have the ability to edit them directly in the app.

  • @WalterLockhart
    @WalterLockhart3 жыл бұрын

    Dear Ahmad, Thank you so much. Your videos are probably the most comprehensive I have seen. Keep going. You’re doing a great job. I will share with my developer colleaugues / friends.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    You are most welcome I will do my best to get those courses one as soon as possible thank you

  • @ibrahimsoliman1842
    @ibrahimsoliman18423 жыл бұрын

    Welcome back.happy Ramadan

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks! Ramadan Kareem for you too

  • @muralikrishnachowdarypolin5601
    @muralikrishnachowdarypolin56013 жыл бұрын

    Good to see u with new series

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Glad you liked it, thanks

  • @muralikrishnachowdarypolin5601

    @muralikrishnachowdarypolin5601

    3 жыл бұрын

    @@ahmad.mozaffar Hi i need some help I have two tables in one table userids and user follows author id s in second table posts in this table author id is commonly use in here I pass userid then first filter in user author table then it's filter in posts table in here I need posts based on previous table please help here how to I get this type of data with sql query or using entity framework I want to show users like fb or instagram or Twitter home like page feed

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    I will be happy to help Could you please share with the me in a picture or something how the table looks like so I can have better understanding, you can share the ERD with me via my Twitter account @AhmadMozaffar99

  • @80amnesia
    @80amnesia Жыл бұрын

    thanks

  • @ahmad.mozaffar

    @ahmad.mozaffar

    Жыл бұрын

    Most welcome

  • @AMIRKHAN-dm2fm
    @AMIRKHAN-dm2fm3 жыл бұрын

    Welcome Back😍

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks for your interest

  • @mohammadkhoulani1707
    @mohammadkhoulani17073 жыл бұрын

    Welcome back Ahmad

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks mate

  • @severalpens
    @severalpens10 ай бұрын

    Thanks AK. That worked great. You wouldn't have any videos on deploying this to Azure? I can get localhost version to work now but not the deployed version.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    10 ай бұрын

    Thanks for your feedback To make it work online you just need to make sure to set the RedirectUri correctly on Azure App Registration for the production URL that’s the only needed change

  • @severalpens

    @severalpens

    10 ай бұрын

    @@ahmad.mozaffar Working! I think it was applicationUrls in launchSettings.json. I ordered your book as a thankyou. This got me past a major hurdle.

  • @akshayanvekar8713
    @akshayanvekar87132 жыл бұрын

    Great stuff..Can you make a video on B2B. That will be very helpful

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Thanks for nice feedback, I think that's a great idea

  • @swankyshivy
    @swankyshivy2 жыл бұрын

    hi great video. with these configurations are you able to make your blazor wasm a PWA? what will be involved to do this?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Hi dear Sorry for late response You can follow this article docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-5.0&tabs=visual-studio

  • @slugbgaming2664
    @slugbgaming26643 жыл бұрын

    Welcome

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks

  • @chadlomax4500
    @chadlomax45002 жыл бұрын

    Hi AK. Great videos as always. I had a question. Do you know how I can create the users for a specific app such as yours in the video using only the sign-in flow. Like when you get a new laptop when you join a new job. They setup everything and I just come in and give my new password?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Sorry for that late reply, actually yes, for example here you can use the API of Microsoft Graph to create users and just give that employee the user but in that case it's highly recommended to use Azure Active Directory and not B2C because that is specifically for that purpose

  • @manikandank5120
    @manikandank51202 жыл бұрын

    Thanks for the video, the same approach i need to .Net MAUI Blazor for native app, can you suggest me

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Thanks for nice feedback, this is what I'm trying to achieve, I will finalize the demo and publish the link over here, you can join our discord to stay up to date discord.gg/AHUB6SCM

  • @dannythomas13
    @dannythomas132 жыл бұрын

    Great video. Do you by any chance have a video or plans to produce one that looks much closer into the claims that are returned so that we can manage user roles i.e. admin vs user. Also a video showing how we can manage user access so that the whole world cannot simply sign up and start using it would be great thanks

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Yes, soon, I will definitely add that to the schedule

  • @dannythomas13

    @dannythomas13

    2 жыл бұрын

    @@ahmad.mozaffar Thanks, are you yet in a position to direct me to a link for the repo?

  • @michaelestrinone2111
    @michaelestrinone21112 жыл бұрын

    Followed this tutorial (thank you!), everything works except fetching the weather data. Getting the error. The differences between the tutorial and the current version of blazor with b2c are: * it has "Scopes": "access_as_user" in AzureAdB2c section on the server's appsetting, * weatherforecast controller has attribute [RequiredScope(RequiredScopesConfigurationKey = "AzureAdB2C:Scopes")] Other then that I can't see any differences, I triple checked appsettings on both client and the server, I tried to remove the "Scopes" and "RequiredScope", error is still there. Any help/advise will be greatly appreciated.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Hi, thank you so much for that feedback, Yes, you are right, this is to define the required scope for reach an endpoint, you have two ways to get that done either to remove the scope so any user can access this endpoint, or you can use the name of the scope that you have for you Azure AD B2C App Registration

  • @iliqngorki3310
    @iliqngorki33102 жыл бұрын

    Great video. Thank you. Can you make video how to handle login_callback and send the information for the user to API server to store it in the database and then to redirect to the page?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Hi Thanks for nice comment, sure also you can find that in the TicketsBasket course on the channel, but sure I will add this to the schedule Thanks for suggesting

  • @seanknox7321
    @seanknox73213 жыл бұрын

    Great video. How would you utilize this cross tenant? Today I have two app registrations my blazor client app setup with delegated user_impersonation to my web api. This is in by business tenant and fully functional. Ideally I'd move my Blazor App Registration to the BCB tenant, but I'm not sure how to grant the same delegated user impersonation to the web api. Now that they are in separate tenants.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks for nice comment Regarding your question, you mean right now you are using the API app is in an organization Azure Active Directory but you want to move the users of the client to an Azure Active Directory B2C but you want also to keep the API scopes in the normal AAD right?

  • @seanknox7321

    @seanknox7321

    3 жыл бұрын

    @@ahmad.mozaffar yeah that’s it! Thanks for the reply.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thanks for the explanation, I will get back to you today with the full details

  • @seanknox7321

    @seanknox7321

    3 жыл бұрын

    @@ahmad.mozaffar thank you! All the documentation and samples provided have the server and client in the same B2C tenant. Looking forward to what you come up with and thank you for your involvement with this community.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    I have checked that and it seems this is not possible to do it the way you are talking about but what you can do is that you put the API application in the B2C Tenant and then you create an identity provider so the accounts with the business tenant can login to the B2C app and then they have access for it Sorry for late reply

  • @mwardell18290
    @mwardell182902 жыл бұрын

    Nice video. Can you show us how to do in Hybrid Xamarin/Blazor App?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Yes, soon after the MAUI release there will be a full course about that stay tuned

  • @RogueCoder7505
    @RogueCoder75059 ай бұрын

    Great video! How did you get your display name to show? Mine just says "Hello, !" But in my azure portal I can see the display name for the user just fine.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    9 ай бұрын

    Try to take the token and paste in the jwt.ms and check out what is the name of the claim that contains the name, then you can filter for that claim using context.Claims.FirstOrDefault() and look for that claim that holds the name

  • @RogueCoder7505

    @RogueCoder7505

    9 ай бұрын

    @@ahmad.mozaffar hello sir I fixed it. I created a new app and a user flow and added all the necessary fields for authentication including display name

  • @ahmad.mozaffar

    @ahmad.mozaffar

    9 ай бұрын

    @@RogueCoder7505 Ah so good to know Great Hope you find the video useful?

  • @RogueCoder7505

    @RogueCoder7505

    9 ай бұрын

    @@ahmad.mozaffar yessir very much. Thank you. It would be nice to see a video of deploying a hosted blazor web assembly project using the dotnet cli only (I'm on Linux is why). Can you show using digital ocean and nginx and another video for azure?

  • @PhongVNguyen123
    @PhongVNguyen1232 жыл бұрын

    If I've configured the tenant this way, can I use a Blazor Server App still ?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Thanks for your interest, actually the procedure on Blazor Server is a bit different, check out the following link damienbod.com/2021/07/26/securing-asp-net-core-razor-pages-web-apis-with-azure-b2c-external-and-azure-ad-internal-identities/ Becuase securing a Blazor Server app is just like securing a normal ASP.NET Core web app

  • @coleculler166
    @coleculler1662 жыл бұрын

    Hello and thanks for this great tutorial. If I have already created a large Blazor WASM project without authentication, is there an easy way to add the B2C code? Basically how do I implement what you have in Visual Studio without running the Powershell command in the beginning to create new Blazor project?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Of course you can do that By creating a new project with the powershell command Then try to copy the libraries and packages and all the code associated with the authentication from the client-side

  • @coleculler166

    @coleculler166

    2 жыл бұрын

    @@ahmad.mozaffar Thank you for the quick reply. I will give that a shot.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    @@coleculler166 Sure you can reach out for help as well

  • @coleculler166

    @coleculler166

    2 жыл бұрын

    @@ahmad.mozaffar Hello again, unfortunately I'm running into an issue after adding all dependencies and files. Chances are I am missing something important. Once application loads, it immediately states "Authorizing..." Any help would be much appreciated. I can send you the errors from my browser if that is okay. Just not sure about posting this in your comments section.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    @@coleculler166 no worries at all I will be so happy to help, kindly send me an email to aksoftware98@hotmail.com We can have a quick chat and get it done tomorrow, it’s something simple.

  • @mightypirate100
    @mightypirate1005 ай бұрын

    Thanks. Is this still applicable for blazor 8?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    5 ай бұрын

    For WebAssembly Yes, but for Blazor Web App not directly it requires a bit of workarounds

  • @kingogovor6118
    @kingogovor61183 жыл бұрын

    Please do you any good ressources for asp.net core mvc?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Yes actually you can find a lot of resources on KZread, Microsoft Docs & Pluralsight but here is a very good place to start for free kzread.info/dash/bejne/Zn2bpZSKZZDfdKg.html

  • @user-gu6pn5sv5z
    @user-gu6pn5sv5z3 ай бұрын

    Any option to refresh and record about new . net 8 Blazor Web App

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 ай бұрын

    Thanks for great suggestion, I got multiple emails about that, I'm still discovering the best way to do it, but you can follow this simple sample on my GitHub and I will definitily do that again: github.com/aksoftware98/blazrwebapp-auth-sample

  • @learn8184
    @learn81842 жыл бұрын

    Would you prefer Auth0 over Microsoft Azure B2C?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Personally I would prefer Azure Active Directory B2C

  • @saddamhossaindotnet
    @saddamhossaindotnet3 жыл бұрын

    Can you share how to work Forgot Password and Profile editing option in wasm, please? I created Password reset (Recommended) and Profile editing (Recommended) user flows and add the user flows in the appsettings.json file of the API project but it does not work here.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Hi dear Yes of course, this is the upcoming video of this series

  • @saddamhossaindotnet

    @saddamhossaindotnet

    3 жыл бұрын

    Thank you so much. Eagerly waiting for this.

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Will be there today inshallah

  • @saddamhossaindotnet

    @saddamhossaindotnet

    3 жыл бұрын

    Ins Sha Allah

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    @@saddamhossaindotnet The video you requested is here dear Thanks for waiting kzread.info/dash/bejne/eaatl8V6qt3Zibg.html

  • @esdegan7176
    @esdegan71762 жыл бұрын

    does it have MFA with TOTP?

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Could you please let me know what do you mean by TOTP?

  • @esdegan7176

    @esdegan7176

    2 жыл бұрын

    @@ahmad.mozaffar I found that in the docs and its still preview.

  • @esdegan7176

    @esdegan7176

    2 жыл бұрын

    @@ahmad.mozaffar oops my previous reply disappear, I mean 2FA by authenticator apps e.g. Google Authenticator

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

    You left out the part where the Tenant needs to have a subscription, how do you do that ???

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Heey! It’s not needed actually you can directly create a tenant without subscription and it works unless you want to use this tenant for hosting other resources or use special feature in B2C like Custom Identity Experience

  • @haydarm.al-samawe9819
    @haydarm.al-samawe98192 жыл бұрын

    thanks, ahmad for this great video, I have people in azure registration, I always got this message "You're not eligible for an Azure free account" I try to change my phone I have a valid card but always the same problem, can you give me hint maybe not support to my country? I'm from Iraq

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    Hi Haydar, thanks a lot for reaching out and sorry for that late response, also thanks a lot for that nice feedback, regarding the free Azure account, have you had one before or this is the first one

  • @haydarm.al-samawe9819

    @haydarm.al-samawe9819

    2 жыл бұрын

    @@ahmad.mozaffar Hello Ahmed thanks for your response,, I already found what problem I had, its some issue with my credit card your know in our Arabic area banks are not always reliable I just change my credit card to another one and everything work fine

  • @ahmad.mozaffar

    @ahmad.mozaffar

    2 жыл бұрын

    @@haydarm.al-samawe9819 Ah lovely to hear that Sorry for that late reply Have a good journey with AZURE

  • @granl0f
    @granl0f3 жыл бұрын

    Proper and simple implementation that I could switch with a js based SPA with msal.js.. The tutorials that microsoft provides are complete garbage. Thank you!

  • @ahmad.mozaffar

    @ahmad.mozaffar

    3 жыл бұрын

    Thank so much for a nice feedback More is yet to come