isabella232 / react-excelstarter-sample

[ARCHIVED] 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.

Microsoft Graph Excel Starter Sample for React

IMPORTANT

This project is being archived and replaced with the Build React single-page apps with Microsoft Graph. As part of the archival process, we're closing all open issues and pull requests.

You can continue to use this sample "as-is", but it won't be maintained moving forward. We apologize for any inconvenience.

Table of contents

• Introduction
• Prerequisites
• Register the application
• Build and run the sample
• Questions and comments
• Contributing
• Additional resources

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.

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

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.

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 Azure Portal - App Registrations using either your personal or work or school account.

2. Choose New registration.

3. In the Name section, enter a meaningful application name that will be displayed to users of the app

4. In the Supported account types section, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com)

5. Select Register to create the application.

   The application's Overview page shows the properties of your app.

6. Copy the Application (client) Id. This is the unique identifier for your app.

7. In the list of pages for the app, select Authentication.

8. In the Redirect URIs section, choose Web from the Type dropdown and enter http://localhost:3000/ as the Redirect URI.

9. Under Advanced Settings enable the implicit grant flow by checking the Access tokens and ID tokens boxes

10. 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 [email protected] 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

• Other Microsoft Graph Connect samples
• Microsoft Graph

Copyright

Copyright (c) 2017 Microsoft. All rights reserved.