Modern Authentication: ASP.NET Core and Azure Active Directory - Part 1

[Music] [Applause] [Music] gentlemen let's get started i am very happy to see you all again here we will switch to english again of course we have done all our tests all tests are negative very well so we can get started welcome to the second semester we will continue with the topic which we had already in the first semester with asp.net core and today we will dedicate the morning to a very very important sub-topic which is security we will talk how to properly and professionally secure web apis using a protocol which is called open id connect and azure active directory so we will use the schools azure active directory to protect a web api to access azure active directory to read all users groups and things like that we will write our own api and make sure that only members of our school can access this api that was the reminder for the test but they already are negative so that's fine before we get started with asp.net let me quickly ask you what do you know about open id connect or its predecessor oauth2 have you heard about these protocols already so you told me that you don't know a lot about open id connect and oauth2 open id connect and oauth2 are two protocols which are built on each other today we are going to talk about open id connect we are not going to talk about oauth because oauth is the predecessor it is below openid connect we are just talking about open id connect but if you hear oauth on the internet you have to think okay that's the old version or the reduced version of openid connect we will talk about the protocol open id connect by the way if the students in distance learning want to see me i can turn on my camera if you want okay better like that so what's the core idea of openid connect believe me it's a super super super important protocol and every web developer every mobile developer has to know about it there is practically no system on earth which is non-trivial which does not use oauth or openid connect today some of the systems are really are really oriented and implementing the standard some of them are kind of implementing the standard but the principles are everywhere the same google open id connect microsoft open id connect twitter github all of them use openldconnect all of them so it is important to understand the general principles of openid connect we will not discuss the entire protocol in programming in systems in programming here in this class it is something which you might discuss in networking for boom system maybe i don't know but i have to teach you the fundamentals of open id connect before we can take a look at authentication and authorization in asp.net core okay so listen closely once you come to your internship or when you work in a company knowing about openid connect is a real benefit it's really important that you understand it and first we have to talk about the general principles now what is the core idea of openid connect i have a small diagram here and we will take a look at it first in openid connect we talk about the so called resource owner the resource owner is the user who is using a system it's you if you use github if you use office 365 you are the resource owner you are the owner of your email inbox of your calendar of your github repositories whatever you're using a client app a client app can be a desktop app can be a mobile app can be a web application can be an angular application can be an ogs application can be any kind of client application in our case we will focus on single page apps because in parallel to this course you are learning about angular and we'll take a look at angular today okay the client is an angular client so the resource owner the human being is using an angular client to access a protected resource this is the api that you are going to develop this is your api the api that we are going to develop in c-sharp in asp.net core this could be in practice your calendar could be your email inbox could be your whatever project you do this is the protected resource the protected resource will not allow somebody without authentication to access the api only you can take a look at your calendar nobody else now in the good old times login and authentication and authorization was built into the protected resource and the client the client presented a login screen with user and password the user entered user and password clicked on login and then sent the user and password to the protected resource the protected resource had username and passwords checked username and password everything is okay have you ever built a system like that anywhere in the last four years in some programming classes probably you have implemented some kind of login like that and that's today no longer appropriate you shouldn't do that that's kind of old style what is the problem the problem is that in many cases the client here this client is developed by somebody completely different than the protected resource imagine you are writing your final year project and you have an idea you would like to post something in the name of the user on facebook for instance then you are writing the client and facebook built the facebook api it doesn't make sense that you are asking the user for username and password you should not have the user's password for facebook understand what i mean you as the client developer i don't as a user i don't want to give you my password and as facebook they also don't want you to have the password the only guy who should know the password is the resource owner not the client because the client isn't trusted maybe the client is hacked maybe the client contains some malicious software that's not good the second thing is that um a company like facebook or microsoft or github they want to provide their own login servers because they know how to build them and they know how to secure them so the core idea of openid connect is that there is a separate authentication server an authentication server like office 365 more technical azure active directory an authentication server like github like twitter like facebook well facebook and old buddy connect we can discuss that it's kind of open id connect what they do the workflow works like this the resource owner would like to use the client app your angular app this client app would like to access the protected resource but it would like to access the protected resource as the identity of the resource owner your angular app would like to go to let's say the office 365 api and say hey rhinostropic is sitting in front of me i clientdeb i'm acting in the name of my resource owner reiner topek get the idea so it's a kind of trust delegation delegated access as a user i'm allowing a client app an angular app to act on my behalf that's the idea delegated access means client app it's okay that you pretend that you are rhinostropic i give you the access now how does that work the resource owner directly talks to the authorization server and that's an important one the resource owner never enters the password directly in your angular app never you are not providing the login screen this is not done by you on the contrary what you do is you are either redirecting the user to the login server in our case office 365 or you're displaying a pop-up window where you display a small login screen but not coming from your app you are not implementing a login screen at all no login screen less work for you it's good news isn't it you're redirecting the user to the authentication server in the authentication server here magic happens the user enters his password maybe the user presents a fingerprint maybe the user uses face id maybe a as an sms or message is sent maybe an authenticator app is used whatever magic happens that's not your task next the authentication server generates a so-called token this token contains information about who is the resource owner this is rhinostropic i made sure it is really rhinostopic because i checked his fingerprint it contains some claims about draynor stropak first name last name email address and things like that maybe groups that reina is in and it's digitally signed it's signed by the authentication server so the authentication server for instance azure active directory says i checked that it's me azure active directory whoever gets this token can make sh can be sure that i did my very best to ensure that this is rhinopeg additionally the token is created for a certain audience so the resource owner has to ask the authentication server i need a token for this specific protected resource for instance my email inbox my calendar understand what i mean then the resource owner takes this token and by redirecting in the browser it gives the token to the client and now we are in your angular app your angular app has never seen the user's fingerprint your angular app has never seen a username or password nothing like that all it gets is a token now this token can then be used to access the api so the token is sent to the protected resource the protected resource takes a look and says is this a token for this client app okay it is is this a token where the resource owner has proven that he is the guy he claims to be yes that's the case is this the token that was created for me audience it's like traveling to russia try to enter russia with a visa from china it doesn't work you need a visa for russia to enter russia understand what i mean and that's the same here the audience has to match and when all these things are given only then the api will grant access to the protected resource so the real core ideas that you absolutely have to remember and understand is the client never gets the password or biometric information therefore the client cannot misuse it first second there has to be a trust between the authentication server and the protected resource the protected resource has to know about the authentication server your api in your api you have to decide which authentication servers do i trust google microsoft facebook twitter github whatever you do understand and then your api can take a look at this token and say okay i grant this token access does that sound complicated it is it is a complicated protocol the good news is that for simple scenarios you have really good apis for angular you have nice npm packages for a c-sharp you have nice nougat packages for java you have nice packages for kotlin you have nice packages for swift you have nice packages and that's the beauty of a standard because once you have a standard somebody can implement a really nice library for that standard and everybody who follows that standard can immediately benefit from these libraries but the protocol on the wire isn't trivial so please do never try to implement open id connect by hand on your own it doesn't make sense it's too complicated just use libraries find a library that fits to your development technology do you understand the benefits why this is better than just presenting a user in the login screen yeah another big big benefit is called single sign-on do you know what single sign-on is nearly you cannot use the token but you can use your username and password and biometrics exactly for instance my company we are cr we are writing we are we are offering a software as a service solutions for companies we are a business to business software provider our customers can use their existing office 365 to login to our service they don't have to create a new user for our service they just use their existing as you said their existing user credentials therefore they need one password less no additional password and that's very very nice have you ever accessed i don't know a system on the web that has not been created by google but still you're using your google account i bet you have that's single sign-on that is single sign-on and that is also something which is enabled by openld connect understand what i mean single sign-on have you ever heard the term single sign-off now that's strange right single sign on everybody understands that but you know what single sign-off is even more complicated imagine you have a browser you have multiple tabs open in that browser in the first tab you're signing in to application a with your google account in the second tab you are signing into application b with your google account and on the third tab you are you are signing into application c with your google account now on the third tab you press logout this is a computer maybe in a public library and because you pressed logout you leave the library and you think everything is fine what did you forget tab one and two because there you also sign in with your google account so somebody can go to this public computer switch to tab one and do something strange with your account because you are still signed in with your google account that would be a real threat if there weren't single sign out single sign out means if you sign out in a single browser from any account then you sign out from all the applications inside of this session that is single sign out or even from any application that is running on this computer and implementing single sign out is even more complicated than implementing single sign-on that is why it is a good idea because many developers screw that up it is a good idea if you sign out from a public computer to always close the browser entirely not just relying on the fact that you have signed out in one tab understand what i mean banks typically force you to do that good nice and what i want to do today in the remaining two hours is i would like to gather with you implement a protected resource in asp.net core and i would like to implica implement a client app in angular in order to check how these token flows and so on work so you can take this example and apply it for instance to your final year project maybe your final year project wants to use google auth or microsoft office 365 auth or something like this and this is my goal i would like you to have the skills to build an api and an angular app that is protected by open id connect and our schools azure active directory that is our goal today okay we will check that now it is 8 50. we are perfectly in time so we will now make a short break i ask you you all know the drill to open the windows for a few moments to open the door so that we have a little bit of a wind going through maybe you want to go out if it's too cold and we will close it in a few minutes and for those who are in distance learning we will continue let's say in in ten minutes at nine okay we will continue at nine i just talked to professor lakinga and he told me that you will learn in n4s more about details like json tokens and so on so it's perfectly fine if we are not covering the details we are trying to program with openid connect and yeah invoice you will learn the details about the protocol good let's start coding and let's start working we are really lucky because here in the school we have our own azure active directory with office 365 and therefore we have one of the most widespread authentication servers on earth which is very very relevant for your professional career and we can play with it so you should be able to follow along what you can do is you can try to go to portal.azure.com then you are going to be asked for username and password and you can use your office 365 account with which you typically log in to uh teams for instance in my case this account is the account reina r dot stropic at hattiebiella leonding.onmicrosoft.com please try to sign in to portal.azure.com with your account and give me feedback if it doesn't work for those students who are in distance learning i ask you to ask questions if you have any problems following along okay i record everything so if something if you have internet problems or whatever you can retry the sample at home later but it would be nice if you try to follow along does anybody have problems signing in to portal.azure.com you shouldn't have good very good the area where we are going to work is azure active directory please take a look for azure active directory and open azure active directory this is our school's office 365 azure active directory and one word of warning here don't try to tamper with any kinds of users groups or whatever don't do that it is in your best interest that you don't try to i don't know do stupid things in azure active directory because if you do the administrators will probably limit our permissions very much and then we cannot do a lot of the experiments which we can currently do so please yeah no stupid ideas okay the areas where we are going to work is here app registrations and a little bit enterprise applications but our most our main focus is this one app registrations what we are going to do in app registrations is is we are going to register you see it here we are going to register our client app inside of our authentication server so we are going to tell azure active directory hey azure active directory there is a client app with which we would like to sign in using azure active directory the second thing which we are going to do is we are going to tell azure active directory that there is a protected resource this will be our api so we have to register both things client app and api with our authentication server this is what we are going to do in azure ad let's do that let's go to app registrations i have already tried whether everything works properly yesterday so as you can see here i have already two applications here registered which are owned by me in your area this should probably be empty now is that correct good you can now try new registration which you see here in order to register a new application let's do that let's choose a meaningful name for cf underscore let's use your name okay like uh i don't know this one demo client let's use something like this so that the administrators of office 365 in our school so that they know what we are creating here and they don't wonder hey what this app is all about so please use it of course don't use my name i think that should be obvious now the next thing that we have to design decide sorry is mainly these two options here the other options are pretty obvious take a look at them you can guess them for the content of from from the from the context here but the first two ones are not that trivial let's talk about that the first one accounts in this organization's directory only is a so-called single tenant app that means you are creating an app which is only for hattie and leonding only users of the hattie leonding can sign on to this app if you have another company like my company we have office 365 too we could not use your app if you have another school who is using office 365 they couldn't use your app your app is just for this organization that's called single tenant remember that i might ask you that in an exam what is a single tenant app and then you should say a single tenant app is an app which only works for users in a single azure active directory in a single organization now the second thing is multi-tenancy multi-tenant app a multi-tenant app is an app that you create once that you deploy once that you run once but users from multiple azure active directory organizations can use it so you can deploy your app and any school that is using azure active directory can sign into this app my company we could sign in to your app that is a multi-tenant app tenant in german if you translate it it's a meat tag like in in a multi-story home for instance in a large building you have multiple tenants mita everyone has a separate part of the building but you have multiple people living in or multiple families living in the same house and that's the that's the same here okay so multi-tenancy users from multiple azure active directory organizations can sign in building a single tenant app is much easier than building a multi-tenant app so therefore we are going to use the first option because we are currently just learning the redirect uri down here is optional and you can currently ignore it just ignore it press register was that difficult probably not right we have registered our client app and now comes two very very important ids you absolutely have to remember them and typically they are present in any openid connect provider google has something similar twitter has something similar github has something similar it's these two ids here the first one this one is the identifier the identifier identifying the client app so it's the id representing that guy here this is the client app and in azure active directory this client app is identified using this id now the second id this one the directory tenant id is the identifier of our school's azure active directory implementation everybody who is using azure active directory again every organization who is using azure active directory has its own azure active directory tenant understand so my company has a different directory tenant id another hatiel might have a different directory not might have will have a different directory tenant id the tenant id is important we have to remember that we have these two ids our app this one is registered in a certain directory tenant understand this is typical for b2b offerings so for organizations like schools and businesses and yeah any kind of organizations if you are working in a b2c area business to consumer think of google for instance there is typically no directory tenant id in their business offerings they have something like this but in the consumer offerings it's just a user and a password i don't work in an organization do you understand what i mean so the context of an organization is something that is typical for companies and here we have azure active directory we are here in an organization in a school and therefore we have a directory id good now we want to specify how users can authenticate how users can authenticate with our app please go to authentication the first thing that we have to specify is we have to specify the platform on which we will build our client app so please click on add a platform now the choices here on the right hand side should be pretty obvious for you as you can see here you can choose whether you're building a web app and that means a web app with a server part something like asp.net razer pages java python node.js go something like this the second option is the single page application here single page application would be react view angular something like this mobile and desktop apps ios mac os android and any kind of mobile and desktop application which is not listed up here in our example today this is a programming course which is working together with the n4s course therefore we are going to use single page app because we are going to implement the client using angular technology we have to specify a redirect uri this is not super super important for our scenario because we are going to use a pop-up window because i think it's more beautiful but some browsers as you know they don't support pop-up windows or some users they have disabled a pop-up window and if you have pop-up windows disabled the access token will be sent to you via an http redirect and then azure active directory has to know where it should send the token to in case of redirect and therefore we have to specify the redirect uri this means hey azure active directory once you created the token please send it to this uri okay in our case as i said we are going to use a pop-up window therefore it's not that relevant but still we have to provide something please do that http localhost can anybody remember the typical port on which angular applications run locally correct 4200 right because of time constraints we are not talking about single sign-on currently everything else is perfectly fine ignore it the implicit grant and hybrid flow are for rather old single page apps we are not going to talk about them it's for legacy apps click on configure good now please take a look at this note here for this course it is not absolutely necessary to understand the details and know the details about what's written here but you have to you have to remember it at least in the back of your minds if somebody tells you or asks you which con which flow did you use for open id then your answer should be we use the authorization code flow with pkce that's the flow we are going to use authorization code flow with pkce that's the most modern authentication flow for single page apps on the internet if you want to know all the details about this protocol google it we only have a limited amount of time in this course it's not absolutely relevant that you know all the details of this protocol it's implemented by the nuget packages and npm packages but still if you are interested if you want to become i don't know a security professional or a penetration tester or you want to i don't know hack a login server because what you do is i don't know white hat hacking for some security firm then you should definitely google it and understand everything about this protocol if you just want to apply it you should know that it exists but you don't have to understand all the details the libraries will make sure everything works fine good authorization code flow with pkce nice now we have a single page app if you want you can click on branding and you can for instance change the name here as i told you let's stick with this name here if you want you can upload a logo you can enter i don't know some kind of url and so on and so on it's not that important it will just be the the nice branding that the user sees when he logs into your application are we good good next is api permission because our application currently as it is would already allow a user to sign in you can already build an angular app you can specify username password if you have configured it biometric stuff and you can authenticate and the angular app has a proof that the user is who he claims to be but we know that we want to access some protected resources for instance we would like to access the user's profile we would like to be able to read the user's profile picture his first name his last name maybe his email address if registered a telephone number things like that for that we need to access an api the first api that we are going to uh to access is not an api that we build on our own we are going to access an api which is provided by microsoft it is a rest api an http api just like we did it before but it is provided by microsoft now i have to ask you have you ever heard about an api which is called graph id a graph api microsoft graph here you see it have you heard about that no it's also a very very important api in practice because many companies use office 365 and therefore many have a graph api because every company that is using office 365 has a graph api now what can you do with the graph api essentially everything you can do with office 365. through the graph api you can read your emails you can send emails you can read your calendar you can create calendar items you can schedule teams meetings you can send messages via skype you can take a look at all your colleagues read the pr read the the the people directory read the users create groups all the applications that microsoft provides in the context of microsoft 365 are available through the graph api it's a huge api it contains hundreds if not thousands of api endpoints and that's the central point of programming with microsoft 365. and what we can now do here in api permission is we can ask that our client our angle app gets access to this api how do we do that please go to api permissions we are still in your client app if anybody who is in distance learning has problems please let me know turn on your mic and ask questions if you want now here in the graph api you see that by default every client is capable of reading the user's profile the user who has signed in has a certain profile and this profile data can be queried using the permission user.read here you see the description sign in and read user profile that is the permission for reading our current user's profile please spin up google and google for microsoft graph explorer you will probably immediately get one link which leads us to the microsoft graph explorer it's a nice interactive tool where we can try and play around with all the different apis that microsoft graph will give us please sign in here to your graph explorer of course you will sign in with your hotel credentials probably you don't have to enter anything you can just select the account i will do that my hotel account now we get asked whether a graph explorer app is allowed to access some data on your behalf yes we are fine because we want to use the graph explorer so let's accept that and now we are signed in and do you see this one get started my profile that is exactly the api that i was talking about so you can now click on this my profile and click on run query and if you take a look down here you will see the data of your profile this is the api that we are currently allowing our angular app to access and this is the url for this api we will need that uri in a few moments and if you take a look if you if you fold this get started and take a look what you can do there is really a lot that you can do for instance here emails send an email forward an email change your inbox rules get all the emails from a certain address and so on and so on all these apr apis are available here if you want you can browse through this api in your spare time maybe you can use some of these apis for your final year project and you can use the graph explorer to just interactively play with them okay but for now we will go back to our azure active directory and now we understand what this means it says our client our angle app should have access to the user's profile to the profile of the user who is currently signed in do you want to have more permissions i do i want to have more permissions so add a permission here you see all the different applications which live in the microsoft universe microsoft has a lot of software as a service offerings and for us currently this one you now know what the microsoft graph is this one is relevant for us microsoft graph please select microsoft graph and now we have to make an important decision do we want to use delegated permission or application permissions let me describe the difference delegated permissions are permissions where the end user the resource owner can you remember what we had in the morning resource owner is the human being sitting in front of the computer where the human being is allowing the client app your angular app to work with this api on his or her behalf so when i sign in with my teacher account on your angle app i am delegating the permission to your angular app to talk to the graph api on my behalf your angular app can pretend to be me that's fine that is delegated permission the second one application permission is different application permission means there is no human being nobody will sit in front of the computer and sign in that will not happen the application itself should have the permission to access some apis it could be a background service it could be a windows service running on your computer posting something on facebook or we are here in the microsoft universe so sending an email every five minutes nobody will sit in front of the computer no human being will allow the application to do something the application itself with this with its own identity should be able to do something that would be application permission you don't fully understand what i mean with that i have good news we will not do that in this course so for this course only this one is relevant so please check delegated permission now down here you see all the different apis which are available here in azure active directory and what we are looking for is user if you scroll down a little bit you should find user and what i want is this one i would be a i would like to be able to not only read my own profile but i would like my angular application to be able to read all the users profile in our school it is obvious that all the students inside of our school are registered inside of office 365 because otherwise you couldn't use teams we are currently in a teams meeting with the students in distance learning this permission here allows our angular app to go to office 365 and make queries about what users exist we don't have write access so we can't change users but we can read them so i ask you to click read basic all can you find that one once you have click on add permission and now you should see down here these two permissions for your client let me know if you have any problems the difference between read all and read basic all is the number of fields that you get access to please wait for another few moments you will understand in more details what this permissions are really all about so it's not really a you might currently have a wrong picture in your mind what permission means we are not really giving the angular app a permission what we currently do is we are just saying our angular apps need this permission the one who will really give the permission is the end user that's the idea here we cannot allow your angular app to do something we have delegated permission so the end user rhinostropic i am sitting in front of your angular app when i sign into your angle app you know what azure active directory will do they will show me a screen telling me hey reina if you sign into this app you have to understand that this app can do this this this this this and that on your behalf are you fine with that and if you press yes or accept then the angular app gets the permission only then if you have maybe you are writing an angular app and you invite me as a teacher to to use your angular app and i see that your angular app is suddenly requesting permissions to send emails on my behalf and i don't trust you fully i will probably not log in i will probably say no i'm not going to use this per this this client so these permissions aren't really the permissions that we give the app these are just the permissions that we request for the app giving the permission is something that only the user is able to do later on can you remember what we did in the graph explorer when you signed in you've got this screen where azure active directory asked you hey user you're using graph explorer the graph explorer is going to access your profile information for instance that was a content screen if you don't trust your graph explorer if you don't want the graph explorer to get your email address you shouldn't sign in it's similar to a mobile phone if you if you if you um if you download an app from the app store you get a display you get you get a question whether you are okay with the app doing something with your phone reading your messages for instance that's exactly the same but in the context of open edit connect good fine any further questions nice so i'm happy with that we should be we should be good we should be good to go now we can implement an angular web app accessing the user's profile this is what we are going to do next our goal is let's say we now have reached level one level two will be our own client and level three will be not using just the existing microsoft graph but in level three we will build our own api and protect the api of our own just like we protect graph api are you all on board everything's fine anybody in distance learning having problems understanding what i'm telling you once you understand the concepts clicking through these few buttons isn't very complicated the concepts are the difficult thing good so let's make some angular i know we are here in the c-sharp course but having an api without a user interface doesn't make any sense so yes in the next few minutes we are going to write a little bit of angular the first thing that i'm going to ask you is please come up with a command prompt and make sure that you have the latest version of the angular cli installed so please do the following npm install minus g like global at angular slash cli this will update the angular cli on your computers please do that now please go in any directory where you can create a new angular app we will now create a new angular app and here we are going to use the ng command please type ng new dash help ngnu help you are still programming angular in uh network and distributed systems right invoice so you you're familiar with this ng command and so on please tell me if you are not i don't know exactly what you do but i'm sure that you did it before so run this guy you can take a look at all the different options there are a lot of options i will tell you which options we need today now i ask you to run the following command i will zoom in in a second okay engine u let's call it aad dash auth or whatever you choose that name doesn't matter dash dash minimum dash minimum you see it where is it where is it where is it dash dash minimal oh not minimum sorry minimal that gives us a very small angular app without tests and so on because in this exercise we are not doing automated tests and so on please use skip git because we don't want to create a new git repository please use style css very basic styling styling is not on our radar currently please use dash dash strict in order that we are forced to build really nice typescript code then we specify directory you can see that here directory and you specify the name of the directory i will call it aad auth whatever this will be the directory that is going to be created and then you can press enter maybe you get a question or so uh no we don't want to use angular routing i forgot that one so answer angular routing with no and that's it so i'll zoom in oh sorry not here here that is the command here yes oh we can't be brave a few moments ago a few moments ago a new version of the npm package that we are going to use came out they currently have a zero registered download do you want to be brave should we use it oh definitely we should definitely use it so the next step for those of you who are already done everybody who still is waiting no problem we will take the time but everybody else go into the folder that we just created you didn't miss anything don't worry go into the folder that we just created and then type npm install at azure slash just to make sure that i don't mistype it here this one and no not this one sorry i was too fast act and then we are going to use whoops i'm going to use i'm going to use this version here so this is the statement that i want you to access x to execute yes msal stands for microsoft authentication library and get guess what and microsoft authentication library dash angular is the microsoft authentication library for the platform angular is there a microsoft authentication library dash react what do you think i would wish so but it isn't that's a big problem microsoft is currently offering two versions for web development one for plain typescript for any javascript or typescript based application and one specifically for angular there is no specific library for react or view so if you build react or view apps you have to use the generic typescript library but for angular we have specific support if everything is okay you should see a bunch of warnings we can ignore them and at the end zero will vulnerabilities blah blah blah we have to act we have to install a second package in order to make it work which is called msal browser just like before but this time mscl browser this is the generic package that we are going to use and if you have that we have all the requirements that we need before the break we registered the client app in azure active directory and we have scaffolded a new angular application now it took a few minutes until on every student's laptop the angular application started running and now we can try to build our angular application so that we can access our profile information that is the idea now i have prepared a little bit of code because in practice you will probably just copy this code to make your life a little easier i ask you to open the file from github that i now share with you i used discord to share this folder with you you have a link ah by the way i recently i have learned a new trick for github that i didn't know before let me quickly show you that that might be nice if you use exactly the uri and you do the only thing here you change that from github.com to github 1s dot com guess what you get visual studio code and you can now browse your github repository just like in visual studio code inside the browser that's really nice did you know that nice isn't it so for some for some of you this might be the preferred way of of scrolling through code and for instance here if i go to the angular client source app and i open this one you see nice syntax highlighting and all this thing really nice i really like that so you have the choice one s and you get the uh the the let's say we should see the code view and without one s you get the the nice view that you know from github so the file that is relevant for us right now is this one msal dot ts so i ask you to open your application in visual studio code i did that already here and then go to source app and here in the source app please add msal dot ts essentially you can't choose any name it was just the name that i came up with microsoft authentication authenticationlibrary.ts and in this file we copy the content of the file from my github repository it's only a few lines of code it's not a lot of code don't worry we will have to fix a bunch of things but i give you a minute or two to create that so msal.ts in source dot app and then you copy this code from github please do that yes the code currently has errors we will fix them in a second okay were you able to successfully copy this code could everybody find it good nice we will discuss this code in a second for for the moment now just accept that it's there it's fine okay next one please open in environments the file environment.ts then again go to github look for the environment file here and there you have to add currently two settings i will give you the time to do that so don't worry we'll have all the time of the world these are the settings that we need you see here in the environments folder in environment.ts we need two settings the first one is the tenant id question to you all is this specific to your environment or will we all use the same tenant id yeah exactly we will use the same tenant id because we are all using the hotending azure active directory what about the client id will we all use the same client id no exactly so what you have to do is you have to delete this client id go to your azure environment where is it here is it go to your client app registration and in the overview tab you see it here you get the client id and this will be different for everybody so please copy the client id and copy it into your visual studio code so i repeat in environments environment.ts and there we specify the client id which is individually which is which is different for everybody and the tenant id which is identical for everybody could everybody copy the correct ids could you find them copy them good very good so let's go back to microsoft authentication library.ts a lot of the rats quickly should be gone away the only thing that is left is this one it's approximately 9 28 something like this this is for the custom api and we will do that next week this is not for this week so this line of code here just commented out we don't need it currently ctrl k c thanks and then you don't you shouldn't have any more rats quickly in this file so let's quickly discuss the structure of the code that we have in this file here the first part is just imports we don't need to talk about them it's just imports then we need two functions the first function creates a so-called public client application the public client application is simply the class from microsoft which represents a public client a client that is available for instance on the public internet okay this is our angular app we have to tell the system what is the id of our wrangle app this is the id that you just copied in environment.aid client id and we have to tell the system where are we going to log in and that is at login.microsoft.com our tenant id last but not least we tell microsoft to cache the sign-in information in the browser's local storage that is fine just accept that that's fine the second one here is the so-called interceptor configuration have you already learned in angular what an interceptor is no no um you know what an http client is right okay an interceptor is a piece of software that as the name suggests intercepts every http request so whenever you access an api the interceptor gets active becomes active and can change this request before it is sent over the network and the nice thing here is with this angular stuff is that we only need to tell the interceptor hey interceptor whenever you access an api under that url please use azure active directory up here to get an access token with these permissions you don't need to do anything more so when you can remember when you when you quickly think back what did what we did at the beginning of the lesson where i told you here we create the token this token goes to the client the client sends this token up here do you need to write code for that no the library does all the magic for you that's the job of the interceptor the interceptor here in the client will recognize oh i don't have a token yet so i will make sure i get a token and this is done based on the url here of the api so you see it's really not a lot of code one line one statement let's put it that way and here two statements oh sorry three statements that's all we don't need to do anything more with that we can start to write a little bit of angular code because that was just preparation and for for the this week i don't have a homework yet because we need to next week to we need to add our custom api but next week i will give you a homework where you can write your own api and can write a small application and you can simply take this example code and copy it to your next application in your next application to make it work okay it is simple it is simplified believe me real world applications have more settings like that but hey we are just learning so it's a good point to start the next thing where we have to change our app a little bit is in the app module.ts please open the app module.ts now again i prepared some code for you in github so please also go in the app directory and open app module.ts just as i have prepared it the things that you need to copy into your code are we need these imports microsoft awesome authentication library the http client you know what the http client is from your angular teaching forms module you probably know what the forms module is and then we need all these providers until down here these providers are just registering the necessary types for msel just copy them you will not change them just angular needs them so accept that and that's it it's not difficult so i'll show you again i take these three imports and put them in our app module in the imports here obviously i get a bunch of errors but i can use the light bulb to auto generate the necessary import statements see light bulb click light bulb click good and the second thing the providers these providers here okay copy and here in the providers paste guess what light bulb and if you look uh closely there is a nice little option here which which says add all missing imports if you click on that one boom all the rights quickly should go away and at the end if everything works out nicely you should have again compiled successfully and you don't you shouldn't have any rats quickly anymore that was the app module so again not a lot of code you have to know what you can copy if you take a look in my github repository you will see that i added in many places some additional comments that you can take a look at but essentially it's really just adding this msal module and adding a bunch of configuration stuff that's all not that complicated are we good good so far any problems nice good maybe we will see a login screen before we finish today that would be really nice please take a look at app.component.com the first thing that we are going to do in app component ts we are going to remove all this template stuff just delete it that's the default html and i also don't like what the angular generator generated for me so what i'm going to do i will tell please try to follow along here instead of template i will say template url and i will specify app.component.html and then here i will just add a new file guess what app.component.html it's a little bit if you ask me it's a little bit more convenient to work in a separate file than entering the html code directly in the typescript file so this is what i did in the app component in the add component decorator i changed template to template url oh sorry the the error is wrong of course it should point to here i changed to template url and created an empty html page app component html yeah it was a false positive yeah it says hello world everything is fine so if you get an error just stop the server restart the server this sometimes happens it's fine so please give me some feedback whether you were able to do that create the html file the application should still compile and you should see in the browser you should see hello world okay we only have two minutes left if you would like to try it we don't need to do it today but if you want if you are curious how it works the only few lines of code that you need are these few lines of code and you should see a login page it's in appcomponent.ts it's an appcomponent.ts so we will not do it today that will be a nice start for next week's lesson if you want you can try it do you want to try it should we try it okay so let's go to appcomponent.ts copy these few lines here go to appcomponent.tx and put them exactly here then of course this should be just an import statement this should just work then http client will be just an import statement that should work logged in if you take a look it's just a boolean variable very simple up here boolean variable can we copy that one and authentication result is also an import and with that all the rats quickly should go away that's good last but not least put in a button click login login login so really just copy the the code and now click login i get a pop-up i get you see this is the permission can remember what i told you this is the permission now the system asks me the angular app called this one rhinostropic it would like to access azure active directory and do these things are you okay with that yes i am and now i'm logged in and next week we will continue because now we get tokens and now we can access our azure active directory so that was a nice end absolutely it was quit pretty fast now we will repeat that so that everybody can try it okay nice i also have it on video i will put it on youtube and i hope this will happen the html of course i can here it is

Channel: Rainer Stropek

Views: 2,933

Rating: 4.9466667 out of 5

Keywords: Azure, Microsoft Azure, Cloud Computing, Security, OpenID Connect, OAuth2, OIDC, Angular, Microsoft Graph, MSAL, Microsoft Authentication Library, HTL Leonding, ASP.NET, ASP.NET Core

Id: ND6EKbGb7vQ

Length: 75min 13sec (4513 seconds)

Published: Fri Feb 19 2021