In my previous post I described how it is possible to host static HTML pages on SharePoint Online by allowing Custom Scripts. After doing so, I wanted to access MS Graph in order to tap into the ever growing data it holds.
I had a hard time finding a solution that would allow accessing MS Graph without prompting the user to log in (which would be an annoyance since the user is already logged into SharePoint Online).
After much searching and reading I got this working by:
- Registering an app in the Azure Active Directory
- Utilizing the Azure Active Directory Library for JS (ADAL)
I am going to cover the steps needed to get this working and provide a sample HTML+JS page that when put on SharePoint Online (as described in this post) will fetch some user information from MS Graph for the user logged into SharePoint Online.
For further information regarding Azure Active Directory, ADAL, and more, please refer to the sources at the end of this post.
1 – Registering an app in Azure Active Directory
1.1 – Register a new application
Log into the portal at https://portal.azure.com and navigate to Azure Active Directory > App registrations and click New application registration.
Fill in the Name and Sign-on URL and click Create. The name can be anything and the Sign-on URL I have set to the URL where the page is located – in this instance it is https://vintherjensen.sharepoint.com/SPAdalGraphTest/index.aspx.
1.2 – Edit the Manifest
Click Manifest and change the value of oauth2AllowImplicitFlow from false to true. Then click Save.
1.3 – Grant Permissions
Click Settings > Required Permissions > Add.
Click Select an API > Microsoft Graph.
Click Select an API > Microsoft Graph > Select.
Tick the permissions that you would like to allow the application to have. I simply ticked the Read user and shared calendars because I needed to test if this would grant access to calendar events (for another project). When done, click Select and then Done.
Finally click Grant permissions.
2 – Add the static page to SharePoint Online
2.1 – Add the static page to SharePoint Online
Put the content of this file at GitHub into a file at SharePoint online (again, as described in this post). For this, I created a Document Library named SPAdalGraphTest and put the content into a file named index.aspx.
2.2 – Enter Tenant ID and Client ID in the Static page
You will find the Tenant ID in the Azure Portal by clicking the ? and then Show diagnostics. This will download a file named PortalDiagnostics.json in which you can find the Tenant ID.
You will find the Client ID in the Azure Portal by clicking Azure Active Directory > App registrations. At this point there might be a button named View all application which you may need to click in order to view them.
After entering the IDs into the static page at around line number 63/64 you are done. You should now be able to open the static page in a browser and see something like the following show up.
Resources
The following resources helped me greatly while trying to figure out how to do this.
- Julie Turners post series – Extending SharePoint with ADAL and the Microsoft Graph API
- Vittorio Bertoccis post – ADAL JavaScript and AngularJS – Deep Dive
- The repository for ADAL at GitHub