Microsoft Graph Explorer on localhost – using your credentials

Tags: Graph, Microsoft Graph, Explorer, Visual Studio Code, TypeScript, Azure

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:

  1. 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.
  2. Update Application configuration
    • 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

      /src/app/app.component.ts. Currently, it starts around 80th line and full signature is below:

        static Options: ExplorerOptions = {
            ClientId: "<PASTE APPLICATION ID HERE>",
            Language: "en-US",
            DefaultUserScopes: "openid profile User.ReadWrite User.ReadBasic.All Sites.ReadWrite.All Contacts.ReadWrite People.Read Notes.ReadWrite.All Tasks.ReadWrite  Mail.ReadWrite Files.ReadWrite.All Calendars.ReadWrite",
            AuthUrl: "https://login.microsoftonline.com",
            GraphUrl: "https://graph.microsoft.com",
            GraphVersions: GraphApiVersions,
            PathToBuildDir: ""
        };
  3. 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

No Comments

Add a Comment