From the course: Microsoft Graph for Developers

Running the AngularJS application

From the course: Microsoft Graph for Developers

Running the AngularJS application

- [Instructor] It is time to run our application and see the fruits of our labor. Let's go to Command Prompt and say npm start. This'll fire up lite-server as we expect, and it opens the browser and takes me to localhost:4200. This is the port we had specified that our website should run under, and also, this is specified as an acceptable redirect URL for my app registration. Let's click on Login. Now, just a second. Let me show you dev tools, also. Let's go to the Application tab and see that under Session Storage, there is nothing there right now. But I'm going to click Login and a whole bunch of authentication (mumbles) just occurred, and you see that a number of things got populated here. All of this has been done by ADAL for me. It's just so easy. Let's go to the Network tab now. I'm going to clear out the Network tab and click on Run Command. When I click on Run Command, you see that the results show up. That's great, but you also notice if I click on this me request that we sent, and look at the request headers. ADAL JS automatically put this access token on top for me, and it is also going to renew this access token for me. This access token, you can actually decrypt it using a number of tools. One of the tools that I like to use is jwt.io. We just paste the access token here, and you'll see that this is actually a valid access token. It even tells you what permissions does this access token have. You might think, "If this access token is so easy to decrypt, why can't I just create an access token without authenticating to Azure AD and just send it over?" And this is where ADAL comes in because this access token is actually signed, and Azure AD will verify the authenticity of this access token. And again, if you lose this access token, let's say if you have an access token and I manage to get access to it, it is like handing over your hotel keycard. Now I can enter your room, too. So make sure that whenever you're using this access token-based authentication, everything needs to be HTTPS because that prevents third-party snoopers from sneaking in and stealing your access token. And this is how authentication works with MS Graph, and you can use ADAL JS to make MS Graph calls. Let's go ahead and click Logout, and under the Application tab, you see that the access token has been removed. Some information is saved for next time usage, but the access token has been removed which is equivalent to signing out.

Contents