Become a Graph Explorer

This lab will walk you through setting up your own local copy of the Graph Explorer.

Prerequisites

Git: Any Git client will work. GitHub for Windows or Git for Windows are both excellent choices.
Node.js: Download and install v8.5.0 from the Node.js website.
MSA: You’ll need a personal Microsoft Account to your register your app (the portal doesn’t support AD accounts). I will assume you have one of these. ;)

Cloning Graph Explorer

From a Command Prompt:

Create a new directory at the root of C:\ to hold our clone of the repository:
```
 MKDIR c:\mw-labs\
```
Switch to our new directory:
```
 CD c:\mw-labs\
```

Clone the Graph Explorer repository from GitHub:

 git clone https://github.com/microsoftgraph/microsoft-graph-explorer.git

Switch to our cloned image:
```
 CD microsoft-graph-explorer\
```
Rename secrets.sample.js to secrets.js:
```
 RENAME secrets.sample.js  secrets.js
```
Open secrets.js in Notepad:
```
 NOTEPAD secrets.js
```

Register an Application

Open https://apps.dev.microsoft.com.
Sign in using your personal Microsoft Account.
Select Add an App from the My applications section.
For Application Name enter Graph Explorer - <your alias>.
Uncheck Guided Setup and click Create.
Under Platforms select the Add Platform button.
Select Web as the Platform type.
Enter http://localhost:3000 under Redirect URLs.
Click Save
Copy the Application Id to your clipboard
Switch to the secrets.js file you previously opened in Notepad
Paste your copies Application Id into the window.ClientId and Save the file

Build & Run Explorer

Return to your Command Prompt
Download requested packaged from npm:
```
 npm install
```
This process will take a minute or two. You can ignore any warnings.
Start Graph Explorer using npm:
```
 npm start
```
At this point a browser will open automatically and open http://localhost:3000

Try some Samples

When the Explorer opens it will default to a demo tenant and query of https://graph.microsoft.com/v1.0/me/. Click Run Query to execute and receive this JSON result:

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com"
}

View Profile Photo

Try the query https://graph.microsoft.com/v1.0/me/photo/$value to download the user’s profile photo.
See the meta-data for the profile photo with the query https://graph.microsoft.com/v1.0/me/photo/$value

Teams & Groups

See which Groups the user belongs too:

https://graph.microsoft.com/v1.0/me/memberOf

Reduce the properties returned to only id and displayName:

https://graph.microsoft.com/v1.0/me/memberOf?$select=id,displayName

Return which Teams the user has joined:

https://graph.microsoft.com/beta/me/joinedTeams