This sample shows how to connect a React app to a Microsoft work or school (Azure Active Directory) using the Microsoft Graph API to get a user's name and address and upload that information to an Excel file stored in OneDrive.
Clone or download
Jim Crowley
Jim Crowley initial commit
Latest commit 8fbfc79 Nov 30, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public initial commit Nov 30, 2017
readme-images initial commit Nov 30, 2017
src initial commit Nov 30, 2017
.gitignore Initial commit Nov 30, 2017
LICENSE Initial commit Nov 30, 2017
README.md initial commit Nov 30, 2017
package.json initial commit Nov 30, 2017
yarn.lock initial commit Nov 30, 2017

README.md

Microsoft Graph Excel Starter Sample for React

Table of contents

Introduction

This sample shows how to connect an Angular 4.0 app to a Microsoft work or school (Azure Active Directory) using the Microsoft Graph API with the Microsoft Graph JavaScript SDK to get information about the signed-in user and upload that information to an Excel file stored in OneDrive.

image

Once you authenticate and authorize the application, it gets the signed-in user's name and email address.

image

When you click the Write to Excel button, the application writes the user information to an Excel file stored in the user's root OneDrive folder.

image

Prerequisites

To use this sample, you need the following:

  • Node.js. Node is required to run the sample on a development server and to install dependencies.
  • Either a Microsoft account or Office 365 for business account
  • Upload the demo.xlsx file in the root of this repository to the root folder of your OneDrive account. This file contains an empty table with two columns.

Register the application

  1. Sign into the App Registration Portal using either your personal or work or school account.

  2. Choose Add an app.

  3. Enter a name for the app, and choose Create application.

    The registration page displays, listing the properties of your app.

  4. Copy the Application Id. This is the unique identifier for your app.

  5. Under Platforms, choose Add Platform.

  6. Choose Web.

  7. Make sure the Allow Implicit Flow check box is selected, and enter http://localhost:3000/ as the Redirect URI.

  8. Choose Save.

Build and run the sample

  1. Using your favorite IDE, open configs.ts in src/.

  2. Replace the ENTER_YOUR_CLIENT_ID placeholder value with the application ID of your registered Azure application.

  3. In a command prompt, run the following command in the root directory: npm install.

  4. Run npm start to start the development server.

  5. Navigate to http://localhost:3000/ in your web browser.

  6. Choose the Sign in with your Microsoft account button.

  7. Sign in with your personal or work or school account and grant the requested permissions.

  8. Click the Write to Excel button. Verify that the rows have been added to the demo.xslx file that you uploaded to your root OneDrive folder.

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Questions and comments

We'd love to get your feedback about this sample. You can send your questions and suggestions in the Issues section of this repository.

Questions about Microsoft Graph development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [microsoftgraph].

Additional resources

Copyright

Copyright (c) 2017 Microsoft. All rights reserved.