In this video, see the same app written in Angular 2+ and learn how the authorization code is written.
- [Instructor] Now you just saw the application run with AngularJS or Angular 1.x using ADAL, but what if we want to use a newer version of Angular and what if we wanted to take control of authentication ourselves. It is possible to use ADAL JS outside of Angular. That is certainly a valid approach however, I want to share a little example with you where I want to show you how you can actually take control yourself and write the authentication logic yourself.
So here's a little application I've written that is Angular 2 application or Angular 5.0 actually. If you click on authSettings.config.ts, I'm using Angular CLI, unfortunately this is not the right course to cover the basics of Angular. So, I assume you're familiar with Angular 1 and Angular CLI, at least the basics of it. You see here that I'm reusing the same app registration. This is the redirect url, that's the resource ID, that's our client ID, and this is our tenant.
The application is quite simple, there is a logout method, login method, and a run command method. We are calling the same resource as before. And there's an app.component.html. The authentication is being passed in using dependency injection as a service that I've written as a part of this project. The user interface is quite simple. There is an ngif or is user authenticated. Now, I have to take control of that variable so somewhere in the app.component.ts I am setting a value for is user authenticated, and then the login, logout, run command methods, you already saw those.
The AzureADAuthService.ts class is where I have written bulk of the authentication logic. As you can see over here, let's actually jump over to the login method, in the login method I'm simply issuing a get request to login.microsoftonline.com in which I'm passing in the client_id and the redirect_uri. Remember I explained this when I talked about the auth to implicit flow.
Logout simply clears out the tokens, login will result in an ID token, which will result in the application loading again. When the application loads again the constructor gets called, we check and see if there's an ID token, if there is we issue another redirect with the resource URI and this redirect returns results in an access token and then we check if there is an access token in the url.
And if there is, then we set it in local storage which we will use when we make http calls. And we redirect the user to the original redirect url, where the authentication started from. When we wish to make an https call, we simply create an authorization header where we get the access token, which is simply reading from local storage and in our get and post methods, we simply stick the authorization header, simple as that.
Let's go ahead and run this project. Since I'm using Angular CLI, I say ng serve. I visit localhost:4200, I'm going to hit login, since you're watching this on video feel free to pause the video and observe the urls as they float by. You'll see that a redirect happened to login to microsoftonline.com. We are asking for an ID token, we are passing the client ID redirect uri is the application we're running on localhost:4200.
I'm reusing the same app registration that I used for the AngularJS application. Let's go ahead and login, one redirect happens with the ID token, another with the access token. You can pause the video and you can see that that is indeed what was happening. The user name is being sniffed out of the access token. If you visit my project there is a typescript class here called JwtHelper which is decrypting the access token, so using that I can get the username.
Then when I hit Run Command, you see that I'm able to get these results because in the command in the headers, I am passing this access token to the backend service. As long as Azure AD receives the same calls it is going to respond in a similar manner. Of course, you're writing a lot of code by doing this. Sometimes you may want to do that when you want control yourself, maybe you want to store the token someplace.
And in those situations this is definitely useful but otherwise you can just use ADAL JS.
- What is Microsoft Graph?
- Registering a web application in Azure AD
- Adding authentication logic and authentication UI
- Native applications calling Graph
- Reviewing scenarios where web apps involving Graph are useful
- Web applications with application identity and delegated identity calling Graph
- Daemons calling Graph