Working with Azure AD B2C in ASP.NET

what's up everyone join me for another episode of phone.net this time i have jp and he's here to talk to us about securing asp.net apps with azure active directory b2c make sure you join us [Music] what's up everyone welcome back for another episode of on.net and today i have my very good friend jp to talk to us about azure active directory b2c and how to use it to secure asp.net and dotnet applications welcome to show jp hey christos thanks for having me yeah long time no see right yeah i mean it's been what at least a good 35 minutes yeah i mean we work together all day every day so uh for but for people that haven't seen you or don't know you can you please explain what you do sure i i work in the identity division at microsoft along with christos and uh what we do is go and talk to developers about the identity systems that we own and build and how they can get that same kind of amazing security out of their apps too awesome and uh today you're here to talk to us about azure dbtc tell us a little bit about that and what it is and why should developers care about it sure so b2c is our uh sort of apps for the internet or identity for the internet offering um so if you're if you're using office or if you're using azure or something today at work or at school you're probably using azure id or you're at least familiar with it but that doesn't really necessarily work when we want to build apps for people on the internet if we want to build our next big startup or if we want to build apps for people uh where we might use a user database before we want to use something better and let people sign in with social accounts and use an account they already have or give them a brand new username and password that has nothing to do with their work or school um has nothing to do with work or school to start perfect and uh do i need to pay for it you do but luckily you pay for it when you hit 50 000 monthly active users and a monthly active user is someone that's someone who signed in so if you've got 50 000 people signing in i kind of feel like maybe it's a pretty good app and you're making money off you're making money already it's a good problem to have right 50 000 units but up to 50 000 unlimited signings for all these users uh until 5000 which is great and how easy to get started because that's the next question right i mean i'm bought i love it let's see how what it takes to uh integrate with btc well it's pretty easy to it's pretty easy to get going um azure b2c shows up in azure just like anything else so you deploy a storage account or you deploy an azure app service then you would deploy in azure 80 b2c directory and it takes about 90 seconds so i went ahead and deployed one before we started but it's just deployed so in your azure subscription you'll have you'll see this as a resource and a resource group and when we click it we're going to go over to a new it's going to take us to a new tab right where we're going to see our our settings um what i like to do just as a side tip i like to keep my b2c directories a different color or different uh theme from the my main azure subscription so that i can really quickly see so you don't mess up right yeah so i don't mess up and try to use the wrong one so so when we click into it and we get in here we've got maybe three things that we have to do and then our app will be ready we'll be ready to sign people in so b2c has this sort of concept of an identity provider and the identity providers are how people can sign in so if you want to do things like google sign in or facebook sign in we've got sort of pre-built integration with that already and so all you have to do is click on one of these and go through a setup process on the facebook or the google or github side and people can use those accounts to sign in nice and of course that's a great way to do it because that's one less username and password that i have to store uh as a user the one less thing i have to keep in my password manager or in the post-it notes that are littering my desk right right one less password to remember is always what we want to always where we want to go it also means that you can access data for those users which is kind of cool so if you're building something that maybe uh wants to get the user's facebook profile photo you can pull that in too and so you get a nice social integration both for signing in but then also for accessing some of their data very nice but the ones you get out of the box without any configuration is what's called a local account and a local account is just that it's a brand new username and password that exists only in this database only in this directory and that's we're going to use today because that's the fastest and easiest way to get started and it keeps you from having to keep these usernames and passwords in your database as a developer yep and of course we don't want that so we're going to use we're going to use local accounts and so we have two things that we need to do the first thing we need to do is something called an app registration and an app registration is a way to say hey b2c directory i have an application that i want users to sign into and so they're going to be trying to sign in and so we register the application so when we register an app we're going to give it a name so i'll call this uh let's see we'll call this a dotnet demo we're going to keep it at accounts in any identity provider uh so that means authenticating users with user flows which we'll talk about in a moment and we're going to give it a redirect uri i know this one by virtue of having done it before but it's in the documentation and and it's in the uh it's in some of the templates and so uh this is not a this is not like a secret and it's not gonna be specific to our.net app so because we're going to use net today we're going to use https localhost 5001 which is our local kestrel and then we're going to use a special path called sign in oibc and you can change this so if you've got multiple providers or you've got other sort of an existing url scheme and you don't want to mess it up you can change this to be whatever you want it to be um and then we're going to keep this checkbox checked so this is just some extra plumbing there are very few cases where you'd ever actually need to uncheck that so we're just going to leave it so i'm going to click i'm going to click register and we're going to get a couple key pieces of information out of that registration yep so we've got all these things up here in essentials one of the more important things that we need is the applications id you'll sometimes hear it called client id the application id is just that it's the unique identifier for this specific app and it's the thing that your code is going to use to say i am application abc so we're gonna i'm just gonna grab that we'll just put it over a notepad off to the side just so we've got it we don't have to come back and get it so we're going to get the applications id and then we've got to go do one more thing uh before we're ready to move on to the next step so in the authentication blade we've got our localhost 5001 the thing that we just typed in a minute ago yep um we also need to come down here we need to check these two boxes so this is for something called hybrid flow which is uh also implicit flow which is uh not necessarily uh the latest and greatest and best thing uh but to get up and going quickly and to not have to deal with client secrets which are sort of like passwords for your application we're going to use that for today um there are there are definitely ways to avoid using this and they involve using a client secret but we've got plenty of great documentation and videos on uh on what that means and so for today we're going to use these um getting an id token implicitly isn't necessarily a super big deal it really just means that the id token is what we're going to use to sign the user in to know who they are and by virtue of getting that implicitly it just means that this there's no extra round trip to the server to ask for that id token so we're going to get it back as soon as a user signs in so we have to make sure that both of those are checked and we need to save it and that's under the authentication blade so now our application is registered we have the app id the which is the the thing that we need it's under the overview tab so we have this application id um and now our app is registered and it's ready to go doesn't have to be web apps either if you're using uh if you're building a mobile app or if you're building a desktop app there are all sorts of different apps that you can build or app types that you can build we've got libraries available for for xamarin and for blazer for all sorts of things so we're going to do web apps today but just know that you can use this for all sorts of different types of applications yep so we'll go back to b2c back to our sort of main view and the other thing we need to create is something called a user flow and a user flow is essentially a user interaction so that could be a user signing in it could be a user signing up it could be a user resetting their password um anytime the user needs to interact with b2c we have to create a user flow to represent that now what's neat about them is the user flows are independent of applications so you can have one user flow but you can use it in all of your apps if you've got a whole suite of applications then you could use um a single flow to assign those users in you don't have to do a password reset flow for every individual app for example right um so we'll do sign up and sign in which is just that we're going to sign up and let users sign in they can do either one so we're going to create that flow and we've got to give it a name now we always call them susie for s-u-s-i for sign up sign in but you can call it whatever you want and because we only have uh email sign up or or local accounts configured and those identity providers that's the only one that shows up here right so we'll choose that and then multi-factor authentication is also available now it's a little bit different from the azure id multi-factor that you might be familiar with if you're using it at work or at school uh it doesn't use an app it uses a phone call or a text message or an email um email is kind of a half factor with one and a half factor authentication if that's a thing three quarters yeah it's not a it's almost kind of sort of a second factor but it really isn't enough to say it's a super super strong authentication but uh it's better than nothing exactly we're going to use email today because uh the only thing that you do pay for in b2c regardless of how many users you have are when you send a text message or make a phone call for mfx right so because there are things like telecom costs to send you the text or to send you the phone call we we have to bill for that so whenever you're using whenever you're doing development like in our case we'll just use email and we're going to keep it turned off anyway because we don't need mfa at this point but it is available okay there's also conditional access and conditional access is all about sending policies to say uh if a user is trying to sign into app one two three uh and they're coming from this specific kind of a device i'd like for them to multi-factor first or to make sure or if they're coming from this location or from a country or an ip range conditional access is a thing that's a part of azure id as well and conditional access is uh thoroughly thoroughly documented so there are plenty of things that you can do with conditional access but it's all about sort of real-time evaluation of should this user be able to sign in or not yep and the last thing we have to do is choose what pieces of data do we need to know about this user both in our application and then also what things we want them to provide for us right so these are the ones that are available out of the box but you can also add your own oh nice extend to add extra ones yeah you want to add extra ones to capture something unique about that user then no sweat you can go and do that right we're just going to ask the user for their display name and maybe we'll ask them for maybe we will ask them you know let's just ask them for their display name we don't need anything else sure ask the user for but our application still needs to know a few extra pieces of data yes so since they're going to use their email address to sign up we want to return that and a return claim is one that's returned to the application after the user signs in right since we're asking them for their display name we want to return that one too and then let's see well what did they use to sign in with and then let's also have their object id and object id is going to be important here in just a minute we're going to talk about that so these things on the left are things we're going to ask the user for they have a chance to type in whatever they want the things on the right are things that we are going to make sure the application gets after the user signs in nice so we'll create our user flow this only takes a sec there are lots of different templates available so you can create one for password reset or if you want to split your sign up and sign in into two different ones you can do that too so it's pretty flexible you do a lot of different things with it and the nice thing about user flow is they can also customize the experience right which we haven't for sure we're not going to cover for this one but it is something that can be covered at a later time yeah so each one of these user flows has lots and lots of different configuration settings all the config that we just did you can come in here to do so you just click on the click on the user flow and you can make changes but down here at the bottom you'll see options for changing the layout in terms of what it looks like and then also localization the layouts there are some templates that we give you out of the box which we're going to see in a minute when we go to try to sign in but you can customize them essentially infinitely so we just inject our sign in and sign in form into your page and you upload some html somewhere and we handle merging those two together um but yeah we won't we unfortunately don't have time to do that today but that's okay because the ones that we have out of the box look decent enough i think uh to start exactly so we've created our user flow and it has a name and you'll notice the name is b2c underscore one underscore susi so we're just going to copy that off just because we just because we're going to need it here in just a sec and at this point we're largely done with our b2c configuration nice so now we need to create a say we need to create as a.net app so i'm going to use net5 um and let's just create a directory and i will call this dotnet b2c demo and let's change into that direct let's change into that directory and we're gonna do a dot net new and there's some really cool templates uh that are right available right out of the box uh to be able to get up and going really quickly and so i'm gonna do an mvc app but i guess we could do a web app too it doesn't really matter but i'll do an mvc app because i'm old and i remember mvc um and there's an off switch there's an auth switch uh and this parameter has a lot of different options in fact you can see in my history right there we've got things like individual b2c multi-org single org and these are all about different ways to use azure active directory or azure active directory bc yep but for what we're going to do today we're going to use individual b to c because individual b to c means just that we want individuals to sign in and we want to use b to c and so this is going to give us a template that has uh pretty much all of the code already written for us and there's not even that much code anyway yeah so we're so let's just run and then we'll do a code dot in our folder here and let's get vs code up and running and we'll take a look at what this code looks like we'll zoom in a little bit perfect this is just a standard out of the box nothing exciting.net 5 web app yeah nothing to nothing wild in our startup it's actually a fairly short startup you see in the configure there's use authentication use authorization so those are going to be there because of what we're doing and then you'll notice these extra three lines that we have here so in the first one we're adding authentication and it's using open id connect because that's the the protocol that b2c uses um and we're gonna do add microsoft identity web app and that is part of the microsoft identity.web package which is included in the template and also something you can include in your existing projects and this handles the bulk of the configuration for you so i'm sure you remember writing lines and lines yeah you remember writing lines and lines and lines of code to get open id connect and all sorts of stuff set up yeah yeah and this handles the vast majority of that work for you which is really nice um the only other thing we need to do is this add microsoft identity ui that's here on line 35. yeah what this does is add the controllers and the views to handle things like redirecting the user to go sign in signing them out and saying hey you've signed out that sort of a thing okay um they don't show up in your project because they're just part of the assembly but awesome they do all of the all of the challenges that you need to do all of the redirect to identity provider all that work is done by uh adding microsoft identity ui so you can add that to your uh once you've added that in then it's available and you don't have to uh you don't have to mess with it at all awesome uh the only other the only other changes that we really have in terms of in terms of code from say a completely non-authenticated net five web app we have a login partial and the login partial is the thing that handles hey user and sign in and sign out buttons and in fact you'll even notice that in these nav items we have asp area microsoft identity which is part of that microsoft identity ui package and then the account and the edit profile controller or edit profile action or the sign out action of the sign in action um so you'll have this login partial that gets added to and then the only other thing left uh we have some app settings that we've got to go set and luckily yeah we've got everything we need to make those app settings so earlier we had earlier we created our app we did our app registration and so that's our client id so it's called client id in the settings um i'm going to paste mine in here so we've got this one here we need our domain so the domain in this case i'll show you where you can go get it the domain will be up here underneath various parts of the ui but you can always get to it from the from the main overview screen of your b2c directory uh and it's just the name that you gave it when you created it so mine's umbrellabc.microsoft.com and that's what we're going to go paste in here nice uh then we've got these five things related to how we sign in and the user flows that we used and user flows are also known as policies and so you'll see them called policy or referred to as policies here so the signed out callback path is after you sign out when you come back sign up sign in policy id this is the one that we just created and i'm pretty sure we called it susie so we don't we didn't change that yep we didn't create a reset password or an edit profile policy or user flow but we'll just leave these in here because we also don't have any ui that's referencing them with the exception of the edit profile button but since we didn't create them we don't have to worry about deleting them we don't have to worry about actually creating them until we need them uh so we'll just leave those in here and then if you want to change the path if you want to move where the callback happens like from after the user signs in where they get redirected back to you can make this change here and then this will change the path that the user gets sent back to after they sign in and you also need to remember to change your app registration because if these two don't match then that's right yep so after making this change the the application um in the app reg and the uh uh authentication tab you'll have to add a new one or replace the one that you have um but other than that there's not really anything else here that's super that's super different from what you'd expect from a normal app so we have this azure adb to see block but everything else is relatively similar so so the last thing we have to do after these changes are already in here is we've got to go update some configuration settings that's what we've got to do yeah we didn't actually have to write any of this code all this comes in the template uh so all we really need to do is go update some settings so we're going to go to our appsettings.json file yeah and the client id is the first thing we need to change the client id this is the application id okay that we copied out earlier if you need to get back to it you can go back to your app registrations in the azure edb2c portal and you can get that you can get from the obviously yeah so we'll put that in here and then our domain name your domain name is your um essentially the name of the directory that you gave it when you signed up okay so if you don't remember what it is it's on all of these screens and it'll also be on the overview screen of your uh also be on the overview screen of your b2c directory so we're going to copy this mine's called umbrella b2c so we'll use that like the umbrella academy i like it umbrella umbrella corporation um so i should have done shell corp that would have been even better but um so we're going to put that in our domain here and our uh then we've got these other settings now we've got the susie policy that we created earlier in fact we named ours the same thing so that's cool uh the other policy names which policies are also known as user flows you'll you'll hear the terms used sort of interchangeably um the recent password and edit profile we're not using them right now and so the fact that we haven't created them is not a big deal the app still runs and we can still sign users in around but you won't be able to edit profiles or reset your account until you configure them so it will blow up if you try to click any of these links but you you would be configuring them if you were creating a proper application so if you were to the point where you needed password reset because some customers choose not to even offer that they want to go through a separate process or whatever but if you want to offer self-service password reset um you'll have to create a policy or a user flow through to do that and put that name in here same with edit profile the last one is a callback path and the callback path is what we talked about earlier about where when we typed in localhost 5001 sign in oidc if you want that to be different you want users to come to a different page or a different path in your application after they sign in this is where you make that change of course just remember to change that in your application registration configuration in b2c because if they don't match you'll get an error yeah now the last thing we need to do which is specific to b2c is we have to change our instance name up here at the top so right now it's login.microsoftonline.com forward slash tfp pfp stands for trust framework policy if anybody was interested and that's what the technical full microsoft name is for a user flow is a trust framework we're not good at naming things so don't judge us so instead what we're going to use here is the b2c login url okay uh and that one is very similar to the domain that we have on line five but instead of being dot on microsoft.com uh it's going to be dot b2clogin.com and forward slash don't forget the forward slash a forward slash a trailing forward slash there we go yep so this should be all that we need uh to get our app running so let's just uh let's get our terminal up here and let's go do a dot net run and uh we'll see what we get hey did you know integrated terminal now supports tabs and i heard about that in fact i learned that from your tick tock above oh no don't even go there there's no dancing on this episode but follow me on tiktok if you want to see me dancing and teaching you tips tricks so now we've got all our config settings in so let's run it and see what we get let's see the magic happen we'll do let's do a net run okay this time and now we're up and we're listening on localhost 5001 which is great so i'm just going to control click this here in terminal which is great and we've got our window right over here so here's our window okay um pretty normal standard out of the box.net web app nothing too nothing too exciting manila nbc so we're going to click sign in and let's see where we go so we click sign in and now we're at this nice nice pretty blue screen so at least we're part of the way there uh and if we look at if we take a look at the url you'll notice it's umbrellabc.bdclogging.com and that's all of uh that's what our configuration said to do so this page is hosted by b2c and it's a b2c page now if i try to sign in with some kind of an account here it's going to tell me i don't have an account right true so if i came here and tried to sign in it's going to say i don't think i know who you are we can't find your account so let's go sign up for one really quickly so i will use this account which is clearly going to get a lot of spam later but that's okay yeah jp is open for uh emails if you want to send me your email if you have questions reach out to jp so your uh there are verification codes right and because you pay at 50 000 monthly active users and a monthly active user is someone who authenticates at any point in a fifty thousand a fifty or a month long period we advise that you keep this turned on because it's there's a potential that someone could come in and spam your account sign up and if you're not using verification codes then it makes it much easier to do that and they could very easily create maybe tens of thousands of accounts over a few hours over a few days whatever and then you'd start then it would start costing you money so i've gotten the email the email is pretty simple it has a code in it so we'll put the code in here and verify the code so good says my email address is verified so now i've got to give it a password so let me just create my password here and then remember earlier that's right 102. all stars um you remember earlier in our collect attribute or user attributes we said we wanted to collect the user's display name right yes so uh this is my display name which is a great display name and i'm going to use that for my display name and click create and now now we're signed in and here we go hello this is my display name i love it brilliant so now i'm signed into b2c i'm signed into b2c and i'm signed into my application and now things like the authorize tag in mvc we just put that on a controller or on an action and away we go now we're authenticated and we're authorized to go and hit that page and we're ready to go so btc is deeply integrated with the asp.net authorization model therefore it allows you to easily add a sign in and sign out and user profile management and then at the same time add the added security of only accessing certain parts of the application based on your sign-in status so as you see thanks jp for coming i mean it's brilliant to see how easy it is to get started with btc and hopefully more people will start building internet apps with btc after this awesome video thank you [Music] you

Channel: dotNET

Views: 5,626

Rating: 4.9384613 out of 5

Keywords: .NET, azure, azuread, azure ad, azure ad b2c, security, dotnet, aspnet, asp.net, asp.net core, microsoft, coding, authentication, authorization, flows, auth, auth flows, tokens, security tokens, visual studio, CLI

Id: oG9GcYIuYQM

Length: 27min 10sec (1630 seconds)

Published: Tue Jun 15 2021