Taking The Updated Microsoft Graph, Out For A Test Drive

There have been a number of improvements made to the Microsoft Graph Explorer during the last release that are very much note worthy. A couple of members from The Office Extensibility team, Toby Baratta & Elizabeth Dinella, created a very nice blog post about their improvements to the Microsoft Graph Explorer during their internship, so I will let you read more about it here so as to not steal their thunder! Excellent work!

Graph Improvements & Updates

As a side improvement, that I infer was also made during this latest release, now you can also try out the Microsoft Graph sample Angular applications by using your Microsoft (live.com, hotmail.com, outlook.com) accounts! So if you have not already downloaded and tried the Microsoft Graph sample applications, I would encourage you to head over to GitHub and try them out by following this link:

The 'Angular Snippets REST Sample' application contains lots of useful Microsoft Graph sample queries that you can use as a starting point to implement in your own application:

Among the many queries in the Microsoft Graph, I actually was interested in trying a particular one that involved 'me'. Yes, that is the 'me' endpoint on the Microsoft Graph I am referring to :). Using the Microsoft Graph you can query the information about yourself including a 'photo' that you can use for things such as displaying a user's profile icon once they are logged into your application. This is a really cool feature, as it provides a higher level of integration with a person's account profile. However, I did find some friction points that I believe can be improved upon.

What Could Be Better

One of the caveats that I found, although your mileage may vary, is that when I actually requested a photo for my profile using the Microsoft Graph Explorer I did not get the response I would have expected. This is the query I used:
https://graph.microsoft.com/v1.0/me/photo/$value
and I got this response:

Now, according to what I understand so far about the Microsoft Graph, the photo is only accessible from the Graph for work or school accounts. However, I have an actual Office 365 account tied to my personal Microsoft account and at first I was taken aback as to why I could not see my photo. So then I did what any other programmer would do, I created another level of abstraction by adding a co-adminstrator to my Azure Account, which is tied to my personal Microsoft account. And Since the new co-adminstrator is derived from a '.onmicrosoft.com' account, it is considered (as far as I can tell) as a work/school account, that is so I can access my Office 365 account under that account and upload a picture for that profile, which should now show in the Graph Explorer by using the same query as before while logged in under that account, so I tried my query again:
https://graph.microsoft.com/v1.0/me/photo/$value
but no dice...

However, if you are feeling adventurous, you can use the beta endpoint to get the photo (which at this point in my exploration journey is a highly coveted commodity...because I just want to see it...) :

Success! I look very cool in black & gray uniform, don't you think? :)

So hopefully you are still reading this...I know it was a bit of a whirlwind, I am sorry about that. But we finally got our profile picture...for the co-admin (alter-ego) account.
Nevertheless, there is one more thing that I would prefer was a bit simpler to work with when it comes to the profile picture. The response that comes back from the Graph for the photo request, is an actual binary response containing the full size (original) image for the user's profile as a JPEG. So if you are consuming the file via something like .NET, then things might be a bit easier, however, if you are using JavaScript and consuming the Microsoft Graph as JSON then things become a bit more complex. Now in order to consume the image and display it, say as an icon for your application when the user signs in, you have to jump through a few hoops in order to accomplish this. Just to give you a taste of what's involved, here's a question about it on StackOverflow: http://stackoverflow.com/questions/20784145/display-image-from-http-response-with-image-content-type

Now, having the image come back as such in the response is a very useful thing and I can see some cases where you would want that, however, I think that if the response would also offer a URL or another way to locate the image without having to process it on the client then that would be more ideal. In fact, this is how the Microsoft Graph's cousin API, the now deprecated Live Connect API, does things. You can validate this by simply accessing the Live Connect API through the hello.js library sample application which you can find at the hello.js GitHub Page. The sample hello.js application uses the Live Connect API, but you can log in using your Microsoft account and peek at the profile image URL property:

The properties above provide a simple to use extended URL that can be easily set in an image source tag without having the client do much processing. Now, I am not proposing that this is what the Microsoft Graph should do, I am simply pointing out an area of friction that can be improved, but how it is improved is another story. However, this is just my opinion, so if the profile photo always comes back as a JPEG then consuming developers will adjust accordingly.
In any case, there is much more to explore in the Microsoft Graph, but I simply wanted to narrow down a bit more on a particular issue such as the photo to highlight how I am using the API and what I would expect from it. I plan on taking a more holistic view of the Microsoft Graph API in subsequent posts.

Authentication Libraries

If you have taken a look at the Microsoft Graph sample applications in GitHub you will have noticed that hello.js, the library I just mentioned above, can be found in almost all of the Microsoft Graph Angular sample applications. The library looks pretty awesome to be honest, and it is also extensible, which I assume is the reason for its usage on the sample applications, in order to connect to the Microsoft Graph utilizing hello.js.
Nevertheless, the security story remains blurry, at least for me, when it comes to authenticating with Azure AD and communicating with the Microsoft Graph in an Angular 2 application. Fortunately for AngularJS(1.5x), we have a pretty good library that is supported by Microsoft and it provides secure routing, login and refresh token features built-in, among other things which is: ADAL JS. Unfortunately ADAL JS is not compatible with Angular2 which leaves a huge gap to fill in terms of secure authentication libraries:

However, as more Angular 2 applications are built, the need for such security libraries will rise quickly. In the meantime, the ADAL JS team is working on a new library that will be part of a new set of authentication libraries under the Microsoft Authentication Library (MSAL) umbrella, which according to their project's GitHub page, it will provide support for a variety of clients and scenarios:

In the meantime, if you want to get started with Angular 2 and the Microsoft Graph then you still have a few options. In one of the Microsoft Graph samples there is actually a 'manual' way to obtain a code, and consequentially a token, which you can follow. In fact it would be a good idea to do so just so you see how the flow works. On the other hand, there are a few solutions that have sprung up in the community in order to address this gap. One of them that I like is authored by Sahil Malik, he explains how everything is setup on this article from Code Magazine and you can found the source code on his GitHub page. His code is very straight forward, it has a public page and a private page which you can secure by registering the app on the Microsoft Apps Portal, and then it contains a sample call to the Microsoft Graph that enumerates the signed in user's files from OneDrive. If you are just getting started with Angular2 authentication to Azure AD/Microsoft Graph then I recommend taking a look at that project as part of your initial research.

Summary

There are quite a bit of very welcome changes in the Microsoft Graph, however, the story is still being written as you can see from the issues I raised on this post. However, things are starting to come together more as time passes and I keep looking forward to the next releases over the coming months. It is my suspicion that eventually a lot of these kinks will be ironed out and Azure AD, the Microsoft Graph and Office 365 APIs will continue to get better while continuing to remove the friction points for all developers out there.

I hope this was helpful, until next time, happy coding. :)