• Introduction

• Screenshots

• Prerequisites

• Register the app

• Configure a tunnel for your localhost

• Configure and run the web app

• Contributing

• Questions and Comments

• Additional resources

This Node.js sample shows how to start getting notifications from Microsoft Graph. The following are common tasks that a web application performs with Microsoft Graph webhooks.

• Sign-in your users with their work or school account to get an access token.
• Use the access token to create a webhook subscription.
• Send back a validation token to confirm the notification URL.
• Listen for notifications from Microsoft Graph.
• Request for more information in Microsoft Office 365 using data in the notification.

1. First you need sign in.

   

2. Once signing in, the app will listen to the incoming emails.

   

3. After sending the email to the address, you will see the email in the app.

   

To use the Webhook sample, you need the following:

• Node.js version 4 or 5.
• A work or school account.

This app uses the Azure AD endpoint, so you'll register it in the Azure Portal.

1. Sign in to the Azure portal using either a work or school account or a personal Microsoft account.

2. If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the desired Azure AD tenant (using Switch Directory).

3. In the left-hand navigation pane, select the Azure Active Directory service , and then select App registrations.

4. Choose New application registration.

   1. Enter a friendly name for the application.
   2. Choose 'Web app/API' as the Application Type.
   3. Enter http://localhost:3000/callback for the Sign-on URL.
   4. In the Supported account types section, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com).
   5. Click Create.

5. Choose your new application from the list of registered applications. On the app Overview page, find the Application (client) ID value and record it for later. You'll need it to configure the Visual Studio configuration file for this project.

6. Configure permissions for your application:

   1. Choose Settings > Required permissions > Add.
   2. Choose Select an API > Microsoft Graph, and then click Select.
   3. Choose Select permissions, scroll down to Delegated Permissions, choose Mail.Read, and then click Select.
   4. Click Done.

7. Select Certificates & secrets under Manage. Select the New client secret button. Enter a value in Description and select one of the options for Expires and choose Add.

1. Important: Copy the key value--this is your app's secret. You won't be able to access this value again after you leave this blade.

You'll use the application ID and secret to configure the app.

The sample uses localhost as the development server. For this reason, we need a tunnel that can forward requests from a URL on the Internet to your localhost. If for any reason, you don't want to use a tunnel, see Hosting without a tunnel. If you want a detailed explanation about why to use a tunnel, see Why do I have to use a tunnel?

For this sample, we use ngrok to create the tunnel. To configure ngrok:

1. Download and unzip the ngrok binaries for your platform.

2. Type the following command:

   ngrok http 3000

3. Take note of the https public URL that ngrok provides for you. This is an example:

   https://{NGROK_ID}.ngrok.io

You'll need the NGROK_ID value in the next section.

1. Use a text editor to open constants.js.

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

3. Replace ENTER_YOUR_SECRET with the client secret of your registered Azure application.

4. Replace NGROK_ID with the value in https public URL from the previous section.

5. Install the dependencies running the following command:

   npm install

6. Start the application with the following command:

   npm start

   Note: You can also make the application wait for a debugger. To wait for a debugger, use the following command instead:

   npm run debug

   You can also attach the debugger included in Microsoft Visual Studio Code. For more information, see Debugging in Visual Studio Code.

7. Open a browser and go to http://localhost:3000.

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.

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

Office 365 development questions? Post them to Stack Overflow. Make sure to tag your questions or comments with [Office365] and [API].

• Overview of Microsoft Graph
• Subscription reference documentation

Copyright (c) 2019 Microsoft. All rights reserved.