A few months ago I did a post on using PHP to connect to the Azure management API. And a week ago I did a demo on how to secure a “classic” webapp with Azure Active Directory. Today we’ll look how to secure a single page webapp by using Azure Active Directory. For the post of today I’ll be using two webapps ;
- Front end ; a small webapp based using AngularJS
- Backend ; also a small webapp based on PHP, which will serve the API calls made from the front end
Why does this kind of setup differ from a “classic” approach? With single page apps, we see a very clear segregation of backend & front end. When the backend & front end are combined, we often see more simple mechanisms used, often based on session information. When the two are clearly separated, we’ll need to authenticate to both individually… I’ve often seen the error where organizations just protect the front end, as this is where the user logs in. And they forget to secure the backend API… An unsecure API means that everyone who can access that API will be able to retrieve (or delete/adjust) the data served by that API. Let that one sink in!
Flow of the day
So what will we be doing today?
- A user access our front end
- If the user is not authenticated, (s)he will be redirected to Azure Active Directory (AAD) to login
- AAD will redirect (on success) with an authorization token
- We’ll inject this authorization token into the calls made to the backend (to prove your identity)
- The backend API will validate the authorization token and verify it against the issuer (AAD)