Configure authentication in Angular and WEB API by using Azure Active Directory B2C | Demo | LSC

hello friends welcome back to my channel learn smart coding this is karthik thanks for joining with me today so in this video what i'm going to cover is how to add the authentication and authorization part in your angular application the concept that i'm going to use is very popular one and very secure one which is azure active directory business to consumer in short form we will call it as your ad b2c so we will go through the azure ad b2c concepts and we will also see how to do the app registration and configure these things in your web api and the angular application so this is the app which is already built and deployed currently this app doesn't have the authorization okay so what i'm going to do is i'm going to use this application and the previous uh published the web api application and i'm going to show you how to configure these two things here as well as in this your portal and and and also i'll show you how this application is going to work okay so come let's get started so in this demo what i'm going to show you is i'm going to open up this application locally so by opening the localhost 4200 port so once i load this application you see this you saw some uh the the front-end screen the home screen but the app realized that i have not authenticated yet so it is asking me or it is prompting me to sign in okay because i am a new user and i haven't registered anything with this application so what i'm going to do is i'm going to click on sign up now and this will bring me a nice ui okay the ui that you're seeing right now is all built-in ui built by the azure team okay you can actually customize this we will see all those things how to customize bring up your own screen bring up other different uh you know nice screens and all but let's stay with uh the topic let's see how the inbuilt things works okay so here what it is asking me is it is asking me to provide some email address and password and display name country that's it you see this all this drop the boxes here all these things also are configurable okay i'll show you how to add more properties here and uh you know collect information from the user for now let's focus only on uh the particular property so let's fill up quickly so i filled up my valid email address okay so i'm going to fill up some password display name as karthik and then country i'm gonna choose uh the country that i'm currently reciting and given name is again just karthik will keep it in that way and if i try to create now see it is asking me i haven't done everything right so you have to click on the send verification code and you need to verify your email address okay that's why i gave a valid email address so i clicked on the send verification code now the code has been sent i need to fill up the verification code here okay so i opened up my email address and you see this i received an email from microsoft okay so learn smart coding account email verification and it is coming from microsoft website itself so this is the code that i need to pass so let's place this code let's verify this see the email address is verified now let's click on create see the account got created the app started loading and you can see here it's coming as edit profile and signup profile okay there's no more login and it's loading so now the authentication is successful i'm able to load the page okay so let's open up the developer tool and quickly see what's going on so let me navigate to a different page you see this couple of calls are going to the api so let's click one of those and you can see clearly under the authorization header we are sending a bearer token and this token is called json web token jwt token okay so let's see what is inside this token i copied this token and then go to jwt dot io or you can also go to jw dot ms so if you copy paste the token here it is going to decrypt here and you if you see what is decrypted here it's basically json with couple of properties and values here if you can notice whatever we gave in the registration right the name the country given name email address all these things are recorded here okay so these are called claims okay these are called claims claims is nothing but a key value pair which will identify what user and what is the user information and the second thing that you need to notice is the scope sap scope and right now there are four scopes from the application which is going on which is category and the product read and write okay so we will go through all these things when we look at the angular application okay so what else i can do i can click on this and click on edit profile so when i click on edit profile the the user information that we collected not everything needs to be edited we can configure this in such a way that what is allowed to edit so right now i'm allowing only the display name so instead of karthikanan i would say just karthik okay so i can continue and i'll show you how different things will work with different configuration see i was able to edit my profile okay and if you see the token it will be different now and the changes will happen so for example so let's pick up a different token now so let's go here let's grab this new token that is going on copy let's go here paste it and you give a name the display name is changed now okay so display name is just karthik instead of kartik anand so the previous claim had this to karthik anand right so right now the current claim if i paste only one is coming because it changed all right so let's say i sign out and i try to login it will try to bring me the login screen and i i really forgot my password actually i can click on this forward password and i can change my password so the azure a2 the azure ad b2c will expect the user to be logged in if the user has not logged in for security purpose it will ask me to provide the email address and verify this code so then i can change the password great so so now you know how the application works so now it's time to learn one by one let's learn the concept and then azure configuration and then how to configure the application and start this process thanks for watching if you like my video don't forget to subscribe my channel like it share it comment it and never forget to click on the bell icon you

Channel: Learn Smart Coding

Views: 10,314

Keywords: Azure AD B2C, OpenID, OIDC, authentication, authorization, OAuth 2.0, MSAL, Angular, WEB API, DOTNET CORE WEB API, Configure authentication in Angular using ad b2c, Configure authentication in web api using ad b2c, demo app

Id: 06ZBbKZgs1g

Length: 7min 7sec (427 seconds)

Published: Mon Aug 01 2022