I have worked a bunch with integrating many third party applications using the ‘App’ model and oAUTH.  These include the big names such as Instagram and Facebook.  Recently, here at Akumina we needed to integrate with the Office Graph for a couple of our

Intranet 365 controls, specifically the Calendar and People Directory and this post is designed to share with some of the things I learned along the way.

directory
The Intranet 365 People Directory

One of the most difficult or time consuming tasks with integrating with Microsoft Graph was determining which App creation process to use.  There are actually 3 different options, each with their own setup processes. The other issue was finding ‘Client Side’ or ‘Javascript’ samples to query Microsoft Graph.  There were many server side (C#) helpers and samples.

I’ve summarized my efforts below and hopefully will help you with getting up and running

Calendar
The Intranet 365 Company Calendar

with Microsoft Graph a little faster.

Please feel free to email me jason.arden@akumina.com for more information, I would be happy to help answer any questions based on my findings / implementations.

Understand the different types of ‘apps’ to talk to the Graph API

Of the three below, I found that option 2 was the most complete and provided the best UI experience for configuring Scopes and setting up Reply URLS for Implicit flow.

  1. Office 365 app registration tool – http://dev.office.com/app-registration
  2. Azure Management Portal – https://manage.windowsazure.com
  3. The New oAUTH 2 app registration tool – https://apps.dev.microsoft.com/Disambiguation?ru=https%3a%2f%2fapps.dev.microsoft.com%2f (this actually adds a dummy record in the Azure Management Portal)

Setting up pattern matching Reply URLs for Implicit flow (The app seemed to be limiting to 10 reply URLs)

For applications that may need to call the Graph API on 10+ URLs and also act as a landing / entry point for your application, you need to enable the following setting in your appmanifest in the Azure Management Portal. See oauth2AllowUrlPathMatching.   If you set the value of your Reply URL to be something like https://mytenant.sharepoint.com/sites/mysitecollection you do not need to specify each and every aspx page you may have as an entry point.  Please be aware that this can be a security risk depending on who you talk to…

"oauth2AllowUrlPathMatching": true,

Be sure to start building your application with Mock Data coming from the Microsoft Graph Explorer

https://graph.microsoft.io/en-us/graph-explorer

From here, you can login and execute queries against a dummy instance allowing you to take the output and use in your JS application to get up and running faster, before you have the data retrival or data layer completed.  This actually sped up our time to market quite a bit.  Simply execute your query, copy and paste the output in your application, and build your UI / application using the mock data.

Javascript call to expire the Token when using adal.js

The adal.js library stores the tokens in localStorage, I found executing this call in the console was great for troubleshooting purposes.


localStorage.clear()

Quick Sample to get you going with Microsoft Graph API

The ADAL library is by far the most complete library you can use for doing client side integration with Graph.

Sample found here: http://nickvandenheuvel.eu/2016/01/06/authenticate-an-office-365-user-with-adal-js/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.7/js/adal.min.js"></script>
<script type="text/javascript">

 var subscriptionId = "5343398c-d43c-474c-9790-5617aa7b2e7f";
 var clientId = "93783897-5259-4b08-b454-e8c2c78bdd7d";
 var selector = "#graphUsers";
 var GraphConfig = {
 subscriptionId: subscriptionId,
 clientId: clientId,
 postLogoutRedirectUri: window.location.origin,
 endpoints: {
 graphApiUri: 'https://graph.microsoft.com'
 },
 cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
 };

 ClearHtml = function(){
 $(selector).html('');
 };
 UpdateHtml = function(data){
 console.log(data);
 $(selector).append($('
	<li>' + data + '</li>
'));

 };

$(document).ready(function() {
 ClearHtml();
 var authContext = new AuthenticationContext(GraphConfig);
 // Check For & Handle Redirect From AAD After Login
 var isCallback = authContext.isCallback(window.location.hash);
 authContext.handleWindowCallback();
 if (isCallback && !authContext.getLoginError()) {
 window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
 }
 // If not logged in force login
 var user = authContext.getCachedUser();
 if (user) {
 // Logged in already
 }
 else {
 // NOTE: you may want to render the page for anonymous users and render
 // a login button which runs the login function upon click.
 authContext.login();
 } 

 authContext.acquireToken(GraphConfig.endpoints.graphApiUri, function (error, token) {
 if (error || !token) {
 UpdateHtml('ADAL error occurred: ' + error);
 return;
 }
 var filesUri = GraphConfig.endpoints.graphApiUri + "/v1.0/users";
 $.ajax({
 type: "GET",
 url: filesUri,
 headers: {
 'Authorization': 'Bearer ' + token,
 }
 }).done(function (response) {
 UpdateHtml('Successfully fetched users from Graph.');
 for(var x=0; x <= response.value.length; x++){
 UpdateHtml(response.value[x].displayName);
 }

 }).fail(function () {
 UpdateHtml('Fetching users failed.');
 });
 });
});
</script>

Other Helpful Links

ADAL source (in case you want to see how it works / make changes)

https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/master/lib/adal.js

Oauth2 permission scopes

https://github.com/mlafleur/microsoft-graph-docs/blob/master/content/authorization/permission_scopes.md

The best source that explains the oAuth2 flow in regards to graph and to someone new to oAuth.

http://simonjaeger.com/microsoft-graph-authentication-with-the-converged-model-preview/