Microsoft Graph Explorer on localhost – using your credentials
In case you missed it, Microsoft Graph team yesterday open-sourced the Microsoft Graph Explorer – nice tool for performing queries against Microsoft Graph that is used on Microsoft Graph website https://developer.microsoft.com/en-us/graph/graph-explorer. You can read entire announcement in this article: https://dev.office.com/blogs/open-sourcing-the-microsoft-graph-explorer. I wish they did it just a day earlier, so that I can use local version in my demos on-stage during my conference session at European Collaboration Summit instead of online, but this is also fine.
(https://twitter.com/dw_1983/status/869858388108247040)
I took the opportunity to fork and play a little bit with Graph Explorer project in my Visual Studio Code, and here are some of my findings you might find useful:
Using your credentials with Microsoft Graph Explorer
One of great characteristics of Graph Explorer is that you can use it without entering any credentials – and then you are using demo tenant and demo user that Microsoft provided for that purpose. That is quite nice to begin with, and it is also excellent security measure against accidental deletion of your own data. However, if you (like me) have your own tenants that you use for demonstration purposes, it is, in fact, much better to authenticate in Graph Explorer with your credentials and be able to show in UI those changes that you caused in REST. If you just clone/fork the repo and try running it, you will not be able to log in because you will receive the error that “Client ID is empty” after you enter and submit credentials on logon screen. That error has a simple meaning – Graph explorer is not registered as an app in your Azure AD. Here are the steps you should perform in order to enable usage of your own credentials in your instance of Microsoft Graph Explorer running locally:
Register an app in Application Registration Portal https://apps.dev.microsoft.com/
Login with your tenant admin credentials
Create a new app with name “Microsoft Graph Explorer” or any other name, and copy Application ID. You will use that Application ID as ClientID in your lcoal project (more below)
Add a Platform – Select “Web”, enter the landing page of the local application as Redirect URL. By default, it is http://localhost:3000.
Save changes – this is important step, as the button is on the bottom on the screen.
Update Application configuration: It is now much easier to configure local instance - there is a file secrets.sample.js in project root. It is enough to rename it to secrets.js and paste Application ID to variable window.ClientID
window.ClientId = "
* <span style="text-decoration: line-through;">**Application ID** is **Client ID** that we need to configure the application. You need to paste it as a value of **ClientID** property in **Options** struct (or class?) which exists in file</span>
/src/app/app.component.ts. Currently, it starts around 80th line and full signature is below:
static Options: ExplorerOptions = {
ClientId: "
- Save all files and retry login. You should now be able to login with your Office 365 Admin credentials to your Microsoft Graph Explorer on localhost.
I hope you will find this useful. In my next blog post I will write a brief guide how easily you can add more sample queries to Microsoft Graph Explorer hosted locally. Stay tuned.
Feel free to post your opinions in comments below or by contacting me via twitter at http://twitter.com/panjkov.
