Azure Active Directory B2C (AAD B2C) for beginners

hello guys welcome to my screencast on coding freaks today I want to talk about a Active Directory b2c hmm and I just covered the basics here today and I do this because first of all I recognize that a lot of people don’t get the idea behind Peter sees that’s why today we start with a little bit of power pointing to get the idea straight and based on this experience I decided to make some blog posts a few weeks ago on my blocks are calling freaks to eat and now I decided to because I write those in German and now I decided to add a video screencast here so the idea gets a little bit more you know fluid to my viewers okay what I will do here first of all is I want to start off with explaining what it is as IDB to see so first of all or what’s regularly used and a lot of people know it already is Error ID in terms of authenticate users so when you go to the classic approach you have in the first area of an azure active directory somewhere and there are let’s say a bunch of users already members of this Active Directory and now it’s pretty simple pretty simple to just do stuff like this to go and have an API or let’s say web app and to use open ID and then to authenticate users from this Active Directory to your web app or your API app so that’s kind of the simple approach here but it comes with some problems let’s look at this so in a lot of scenarios this approach isn’t sufficient because of the fact that you have some users in an azure active directory but regularly you end up in scenarios where suddenly you need to authenticate users which are coming from outside the directory let’s say you have a lot of users which are your customers not your colleagues and this scenario let’s say they have social accounts like Facebook or whatever or even they don’t have anything they they don’t own an identity which you can use which means they just you know a bunch of people trying to consume something you wrote let’s say web app and now you have a problem because when you have your web app you have to implement all those authentications by your own inside your web app so you have to do something which we already talked about to go to a direct directory and then you have to implement OAuth and open ID for Facebook and then you have to take care of people without any open ID identity and this is a problem here at this scenario because this red arrow means you have to implement a user store and a password store and whatever by your own which as we all know isn’t the best idea in the most scenarios so in this case as RDP to see kicks in so you don’t have to do this by your own instead of you implement an azure ad b2c which is able to connect to all those things which which means it has the ability to connect to and let’s say Active Directory but it it’s not you know specific to either ad but instead of it uses open ID to connect to all off enabled providers which means it can automatically do this stuff to connect to social accounts implementing standard authentication and in the case of users which don’t have any of them you have a product program by Microsoft employees and tested by them so if you trust them to implement a secure user store you can go there and say yeah if there are some users let’s manage those identities now inside of this error ad b2c please do this for me not I do it by non so and then you just you go there and authenticate against a single point from your web app to the edge ad b2c and you don’t have to take care about all this implementation stuff on this side you just trust your b2c that’s the basic plan behind this product so what I will show you now in this screencast is the creation process

of mb to see how do we get one the basic configuration of the b2c and a simple usage from within a dot and core web app what I won’t show you is connecting this guy to an azure ad connecting this guy to external up my deep providers customizing those b2c pages you will learn what this what those pages are internationalization and implicit flow which is a little bit more complex when you have let’s say a web app behind using an API and both of them have to be secured using almighty you have to implement something which is called implicit flow and I won’t show you this in this part of the of the screencast series because I plan to make a series so it will come but not today here on the right side I just posted some short links to the to coding freaks blog posts in German but they contain source code and some screenshots as well so maybe it’s helpful for you guys so with this let’s start first of all we have to go to the active direct to the error portal which means you already have to have an error subscription where you are able to create new resources because what we gonna do now we create a new error or ADP to see so let’s go ahead first of all I create a resource group and let’s call this resource group coding freaks because I’ll do this for coding freaks here inside my subscription of Def dear def dear for those who don’t know is the company which I’m working for and they are supporting coding freaks so that’s why you see this here just to not confuse you I’m sitting in West Europe which means I’ll choose this for my region I go and create this resource group mmm and let’s refresh this and go into this empty resource group now so what I can do now is I create and Ezer active directory B to C so that’s why that’s what I want so I go to create this in the portal and now you have two possibilities first of all create a new a to C ad b2c tenant or link and X existing to my subscription this is kind of confusing what this means is there are two steps which you need to go when you want to create a new error ad b2c and would be good if Microsoft did it a little bit differently but just remember first of all you have to create one and then you can link one which is kind of logical so let me go here and enter coding freaks as the organization name and let me say the initial name is coding freaks – which means what I’m doing here if you look exactly is I’m creating a new tenant that’s what he’s saying there it’s kind of the same as the tenant I’m already in which is def dear but this tenant is will be linked in the second step to this tenant FD which I already have so I create a new active directory basically so now I have to select where I’m in so many of you know this I’m in Germany so let’s go ahead and we hit create wait a second til it’s saying that it’s created now it says and I’ll come back when this process has finished there you go it’s finished now he says click here to manage I don’t want to do this I go to link an existing b2c tenant to my address subscription and what I do now is I just wait for him to collect all this b2c tenants which are there which I don’t I just have one which is the one I created in the first step and then I say which is which subscription link to and I say please use the resource group coding Freaks which I created in the first step to link all this together and now I do this let’s go ahead he’s validating and he’s done now let’s go to the resource group again and what we see now is there is

this adder ad b2c tenant inside my subscription which is on on in another tenant but that’s not interesting and now I go here and I can say the see the properties of this new tenant which is the main things are the azure ad b2c tenant name and the tenant ID which is very important later on when we implement our open ID so that’s all you don’t have anything here so what now when you at this point it’s a good idea to simply refresh your browser here because we have now to switch the tenant we go here switch the subscription in the tenant and what we have is this those are my favorites and now I go to all directories and I will see this new one here coding freaks and let me start this guy so that when I go here to my favorites I have him here so now I have coding freaks on Microsoft comm with this idea and the current tenant where I’m in so what I have to do now I have to switch the tenant let’s go here so now you have to be very very careful I it’s it’s a good thing that I have different themes now I he switched the theme because in this tenant I have a default theme and you have to take a look here carefully all the time from this point on in which tenant you are doing stuff now I’m encoding freaks and now I can go and see all my resources there aren’t any resources and now I can go to the error active directory and again go to let’s say the users and I see nothing but my user which comes from an external as active directory which means from Def tier which is another Active Directory and now you can see this he’s a member and in fact he said men of this error Active Directory b2c now let me go and search for b2c and let’s go there and now you are inside of the configuration of the azure ad b2c this this means we have to wait here because he’s still in the process of linking everything together and in creation of the b2c so let us give him a minute to finish this up so that we can see what’s in there for us well vote he’s finished so now we can take a look at the options we have so here are some menus which will be very important right now in a minute just ignore all this steps we just go step by step here inside of this guy so first of all what we need is we have to take at the identity providers which are here so identity providers are if you if you want to say this are the supported external or types of let’s say types of identities you want to allow inside of later on in your applications you just define them here remember this last chart from PowerPoint let me open up this again for you guys so that we can take a look where we are let’s take a take a look at this guy and let me go there so in in my chart I said we have this guy now and I said well this guy connects to all of those different types or defines them so what we see now in the first step when we just created one is this area the no identity area so this is what he calls email as the identity provider and what we what we do now we say okay add an identity provider and we tell him something like you know no identity or no open ID or something else just to know the provider type of this guy will be something of this and as we see now this is not possible to say may just create one which is not a social identity provider or a custom identity provider with open ID so let’s go back

here just to not confuse you more so what we say is that local accounts is already configured and he’s using email for local accounts so local accounts is this one it’s not not a normal sorry it’s not no identity but it’s local account why because local means that this adder ad b2c will handle those accounts which means pureeing for an email address which is the username and the email address in one step and then you know managing those identities by himself by a direct reflect will be to see by the way all those stuff which you normally have to implement by your own like I forgot my password is already included in this local account thing we will see this later on so that’s sufficient because I told you in this part I don’t want to show you this stuff which is behind those guys I just tell you what’s what’s in there so here are some predefined open ID connect providers which as a db2 she already knows how to connect to and if you don’t find one here in this list like you don’t find either Active Directory you have to choose this one and configure it by your own I will show this in another cast so let’s keep it at this point the next thing we can do is we can take a look at user attributes so what are user attributes if you know something about open ID you know that if you are in the process of authenticating you get like something what what’s called claims sorry for the delay claims and claims are based on you know like static properties on the app or the user whatever and they are passed inside of the tokens so that you can reuse them inside of your application without clearing some database of whatever in order first of all to define what kind of claims will be possible what kind of informations will you hold for a single using the future you have this predefined list so what you see here he’s already able to define some properties like city display name or what this list doesn’t mean that we collect all those informations every time it just means that we could use them and we only could use user attributes which are defined in them in this list so to extend this if let’s say you have some attribute which is called Department and you want later on to collect this you have to add this add here Department as a label a name or whatever and you can choose from three different types Freight a string boolean and then for user-defined ones and you get in add in the description here and just create when you do this you just extended the list of possible user attributes by Department so that’s cool so now let me just refresh this page one time okay so that’s it so and just a few weeks before this cast this UI looked a little bit different so why this is important because in the block series which I you know mentioned just a few minutes ago there was this old UI and now this UI changed in the main area here under policies so what policies are policies are the main point where you define what kind of authentication flows you will allow to your applications you can define here as many as you want and you can later on select inside of your application which policy you will use so what you need is you you you don’t have any policies to this point first of all you need to create a new policy and as you can see here there are some recommended policies policy types and you hit all you can see there are

policies for certain times inside of an user interaction which means between your application web app and their ad b2c which you can create policies for so when we go first of all to recommend it we can see that he says well normally you need something for user signup and sign-in then you need something when the user tries to edit his profile and you need a password reset policy so let’s first of all take a look at the sign up and sign-in policy so the sign up and sign in policy or all policies are always prefixed in the name by B to C under score one underscore and then something you give him so let’s keep things simple and call it B to C underscore one underscore sign up and in or sign up and sign in saw something like this so now you have to select for this policy which you create now which of the identity providers and we only have one of them which is a predefined local one should be covered by this policy so let’s say and go here and say well the email signup policy and now you can select if multi-factor authentication should be enabled on this policy which we don’t use here first of all it will come later on and now we can say or what user attributes should we collect inside of this policy so he will get some informations by default because he can’t live without which means the email address or whatever and I can say you know what give me a surname and return it in the claims went to the web app when so that this web app could show them you can even show more of them and you can now select here I don’t only use a surname but the given name – those are the things which are very important to me and let’s say we want to collect the display name – so that we can leave it to the customer to the user how he gets displayed inside of our application later on so let’s say okay that’s it and now let’s create this policy okay and now we have the policy created and later on if let’s say we add another identity provider we have to remember that we go into the signup and sign-in policy and we are allowing the user to sign up and sign in with the new identity provider here this is a cool you know concept I think because this is the main area where you configure everything without even touching your application which means as you will see in a minute this application gets an user interface from B to C from this tenant and this user interface just collects information from the user which is you know important for you and you have to don’t have to take care about any of this so with this in setup here we can just take a look at two different areas like applications which is empty currently because we don’t have any application currently and once again in the users and when we go to all users you see here ok this is again my administrator user which I need because otherwise I can log in here and do anything and here are some things which you may know from either Active Directory and as you can see here a lot of things missing because you don’t need them inside of B – C ok let’s keep this in mind and now go to widgets to do so here we are in Visual Studio we almost got things set up in b2c but let’s start off with a new project so let me just go and create a new project asp.net core and then let’s call it b2c sample obviously and let’s go ahead and use MVC because I’m produced MVC and I know a little bit more better than this razor page stuff so and the main thing here to get an easy entry to all this b2c setup is to use of vindication

assistant here in the studio so what kinds of authentications do we have we have of course no authentication it’s not interesting with individual user accounts which normally says store user accounts in app so this is let me just bring up PowerPoint again to clear things up again this is a guy which is telling us go to this area no just a second what I’m telling what yeah I’m I’m right so this is this area where we say we want to manage our identities in in a store which is related somehow to this web app so this is this option when we have work of school accounts work of school accounts is they could name it Azure Active Directory because for instance in my case I would say hey my wall I just did something wrong no I just you know it’s because my me my mic is in the way between in the visual way between me and and my keyboard because I have a front mic so let me just get rid of this project and create a new one sorry for this b2c sample vixie so once again web affectation change of authentication so there we were so this is not an optional work a school account means deaf decom and now I can select single or mati organizations if you don’t know the difference singer organization is the most obvious way because I know it and multiple organization tells us well currently maybe I want to run it on DFT calm but I want this app to have the ability to run on any measure ad tenant so and then we have windows authentication so nothing’s in here of in the first obvious sight so back to individual user counts he is something which says connected to an existing user store in the cloud and that is exactly was what azor azor ad b2c is it is a Newser store in the cloud so a lot of settings here sound pretty familiar to us first of all the domain name well let me go to the portal the domain name is simply the resource name here or whatever they call the domain name here it’s even better yeah let’s copy this out paste it in we need an application ID well we don’t have any applications yet so now I create one and I call it b2c sample like my web app is called – and I tell him it is a web app it’s not a native app so now he wants to know replay well what is he replay well he is coming from what my D it is an endpoint he will call when you know authentication happened on his side and then he wants to call back something so I will give him HTTP localhost because that’s how I well I have two localhost then four four three nine zero then as you can see here there are callback paths which are already known and I use this sign in YDC callback path simply we come back later to this point that’s all I have to set up and I go here and get the moment later yeah now I get an application and just copy out this ID and copy in this ID pasting this ID here now he wants the name of my sign up or sign in policy so remember this it was user flows and this is my sign up or sign in policy and I copied this name out but now he wants to retrieve a password reset policy name to which if we think about this it’s pretty clear because if this is a user store in the cloud well then password resetting is a thing which is very important to users because they manage those user accounts by themselves so now I go here and click create one and now I use password reset

as a pattern and I just call it password reset and I say yeah use this again this mail address as provider two and I don’t need any claims in this case so I create this password reset policy and then I copy out its name and paste it in here we don’t know and we don’t need an edit profile’ policy if we don’t want because you know we simply don’t allow profile I think we can add this later on okay so now go here and then let’s see what happened so first look is a tap Settings and it’s simple as this he just created an error ad b2c entry with all those informations inside and as you can see it as a point if you will add an edit profile policy you would do it at the point so first thing second thing is startup so in start-up he already added the at authentication and he uses either ad b2c which is coming out of a namespace which in fact comes out of a nougat package Microsoft asp.net core authentication error ad b2c UI and there are convenient methods which you can use to configure a services with and then he says use authentication just hooks it in into the application builder so that authentication is their sole mainly its that’s it and let’s start our application so the default application first of all won’t work because as you can see we are using HTTP but we are on the wrong port so okay let’s just close it and we know it can’t work go to the launch settings and say four four three nine zero is our port for HTTP and that is exactly one we what we want to use let’s try again if it’s working looks good and now try to sign in and what he does now is he redirects directly to look at the UL coding freaks dot b2c lock and calm and something else so this screen this user interface which you see now isn’t hosted at our site it it holds it’s hosted by Microsoft and in fact by our our ad b2c as I told you at the beginning there is a way to customize most of the areas or all of their areas here but that’s not part of this tutorial so just to give you a sneak preview you can change everything here in this page and there is how can I show you there is a rectangular area which you have to keep for b2c to inject those forms here and he takes care of all the stuff you just provide like a skeleton for your for this page and you can do this in every ad b2c which I will show you another time so now from the perspective view of b2c I don’t have any user I have one but let’s let pretend I don’t have user so let’s go here and say sign up so that what that’s what’s happening he provides us with an with an formula which he creates and we just provide him you know address let’s say I use another one let’s say I use this one and then I sent a verification code to this mail and now I should retrieve one on this mail let me just check this out yeah I got a coat and let me just enter in this coat I got it on my phone so I have to zoom a little bit so I now verify this coat and he verified this and let me just give him a password and confirm it and I

change display name and I give him my given name Alex so and then I go ahead and create my user so now I am greeted by hello coding freaks which is my display name let’s take a look what happened because that’s the interesting part what happened in b2c and the ad b2c so let’s go here and let’s take a look at users here and as you now can see there’s suddenly he created a new of but not me but me created a new user here and those are the properties of this user and I could edit them here or can reset its password or whatever here and you can do a lot of stuff and then I get some graphics from the logins and I get the audit locks here or the signings no sign is currently seen let me should be in one let me see if I stop this guy and I restart this guy and then I go to sign out and sign in again and then I use my mail address and my password so now I should have a sign in let me refresh this no sign its font good I love it when the demos work but at least we have an ordered look at least something I guess sign-ins will come later on it’s just a word oh let’s see he’s working no no unlucky so should be there but anyway you get the point so now up to this point it’s already a huge huge how to say a huge help which is coming from B to C because what I have now is a user storage without spinning up an own sequel server whatever database without implementing hash password hash storage password resetting stuff like that I could I don’t have an edit profile page here so makes no sense but I could have an edit profile here I even caught let the user change it avatar or whatever and from this point on we can use as a graph for instance to access even more properties from this user if we want to so this is pretty simple and all the stuff in the source code let me go here let take a look again let me show you there’s a home controller a pretty easy own controller then there is a view which is the standard pattern which says there’s an ASP area hid b2c which has an account control on the sign-in it’s not it’s not seen here at any at any point you don’t see it because all this is hooked by the middleware which comes in in the startup all this is done by hooked in Azure ad b2c and then it’s just working so if you want to protect a complete site it’s just all about for instance going to the controller and saying no no no you know what this one this guy needs to be authenticated authorized authorized and maybe the privacy terms are allowed to be anonymous so let’s start off again and now he should go to the sign in page no it’s not with that set where am I local horse has authorized why privacy is cool home is cool oh because I’m authorized well that’s bad sign out and let’s go to home and now it says no no no no you can’t access this obviously that’s there’s nothing to do with b2c but this is pretty good experience because you can control how user flowing in and I did a lot of I missed here a lot of stuff like he’s using cookies somehow I don’t know how and so on if you want to gain more control over all this b2c stuff well there are some some other demos out

there I can show you one let me just open this file which I got from get up and it’s know it is samples yeah I got this one before it shows the same thing but a little bit different let me show you what’s going on here if we go to startup and this point you can see that it’s far more you know complicated because what they do they invented an extension method which is called a terror a DB to see which comes after at authentication in the pipeline mmm and then when we take a look at this extension method this one comes from this extensions class where are they what the heck is going on let me just go ahead and check this out yeah there it is as you can see here it’s there so it’s adding all the stuff and then there are either ad b2c options as a class which is used to map those properties from the configuration but that’s not the main thing the main thing is it has an Open ID Connect option set up and what this allows him to do in this sample is that he’s hooking those event events in the lifetime of the session two methods yet callback methods and you can take this as an example on how to go into all this stuff how to react how to put in token cash or public lined applications or whatever all the stuff when you need more control good should I provide somehow what’s what’s the name of this repository is it here somewhere no it isn’t let me take a look here so I can at least give you the URL of this guy mmm where is it Ripple’s and then samples this is the directory and let me go to get up because I forgot to get out calm and let me search for this string is it somewhere no it isn’t so I will put in the the point into the description of YouTube so you get it but anyway let me wrap things up a little bit by just again looking first of all to the portal the setup of B to C isn’t that complicated you have to remember go to your own subscription into your tenant which is your real active directory in the subscription there and create a new resource and then combine this resource or connected to your subscriptions so Microsoft knows where the money goes in then you switch accounts here and you go to your b2c directory and then when you’re in your B to see a directory you search for b2c as you might remember which is this guy her ad b2c and then you come to this pane here the main thing is to set up identity providers one is set up every time which is the email provider and the second step will be to create user flows and as you now know when you are in the sign up and sign in user flow and let’s pretend or let’s imagine you have like more of the providers you can easily switch off local account which means you know I have this policy for sign up sign in and this policy only allows for instance social accounts so how you how this is done I’ll show you the next time but back to our summary so when you have those policy and you always obviously need sign up sign in and password reset the next step is to create an application which is simply all we need is this ID and the callback path so the main thing here is those replay wells should point to the same domain you can add more of them but a good practice would be for let’s say you have free

stages like dev test and production to have free applications here let’s say b2c sample def which points to localhost b2c sample test which will point to your test server and so on so that would be a good point so now in this thing we choose web app and we are able to get an application ID with all the stuff together the last thing is to generate your project with if you want your pattern let’s go back to the cool one to the let’s say not the cool one but the easy one which was generated by Microsoft and here this is pretty all you need if you have your app settings pointing to exactly the string and everything is set up correctly and if you remember that you have to synchronize this setting with the thing which is set up here in the application which is this one so otherwise you will get errors when he comes back so with this you simply hit f5 and you can sign in this was the basic part of our ad b2c I just hope it was clarifying some stuff and it was useful I just saw that a lot of tutorials all they’re either outdated or skipping stuff or simply too deep or whatever and that’s why I just created this thing so give me feedback if you want to and have a nice day