https://github.com/astegmaier/graph-playground
An example of how to authenticate and use the Microsoft Graph API in the context of an Angular application.
https://github.com/astegmaier/graph-playground
angular azure-active-directory azure-active-directory-graph-api microsoft-graph-api
Last synced: 6 months ago
JSON representation
An example of how to authenticate and use the Microsoft Graph API in the context of an Angular application.
- Host: GitHub
- URL: https://github.com/astegmaier/graph-playground
- Owner: astegmaier
- Created: 2018-07-27T18:51:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-08T17:20:58.000Z (over 7 years ago)
- Last Synced: 2025-03-30T05:44:38.519Z (12 months ago)
- Topics: angular, azure-active-directory, azure-active-directory-graph-api, microsoft-graph-api
- Language: TypeScript
- Homepage:
- Size: 514 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Microsoft Graph Playground
You can use this app to experiment with the [Microsoft Graph API](https://developer.microsoft.com/graph) in the context of a modern web app. It is hosted at https://graphplayground.z22.web.core.windows.net/.
## Architecture
The app is based on the [Angular CLI](https://cli.angular.io/), with the [Angular Material Table Component](https://material.angular.io/components/table/overview) and some structure stolen from the [Angular + ASP.NET Core Template](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular). It uses [MSAL](https://github.com/AzureAD/microsoft-authentication-library-for-js) to authenticate against both consumer and business accounts.
There are two ways that it can make calls to the graph:
1. Through the [Graph SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) (see `services/graph-sdk.service.ts` in the source code):
2. Through the [angular http client](https://angular.io/guide/http) (see `services/graph.service.ts` in the source code):
It also uses the [microsoft-graph-types](https://www.npmjs.com/package/@microsoft/microsoft-graph-types) library to provide strong typing for the objects returned from the graph.
## Installation Instructions
Prerequisites: [NPM](https://www.npmjs.com/get-npm) or [Yarn](https://yarnpkg.com/en/), the [Angular CLI](https://cli.angular.io/), and a [git client](https://desktop.github.com/).
1. Clone this repo:
```
git clone https://github.com/astegmaier/graph-playground.git
```
2. Restore the npm packages:
```
yarn install
```
or
```
npm install
```
3. Now, you can build and host the app with the Angular CLI development server at http://localhost:4200 by running:
```
ng serve
```
This will allow you to tweak the app locally and experiment. If you would like to deploy your creation publicly to share with others, you can follow [these steps](deployment_steps.md).