How To: Integrating Microsoft Graph API in Your ASP.NET MVC

Problem

You want to develop web application that use data from Microsoft Graph especially data from Office 365. You already follow the tutorial from Microsoft Docs, but you need to find a better and quick integration with Visual Studio 2019 by minimizing the codes development

Before we start

We need to make sure you have this before we get started

  • Office 365 subscription. If you need the sandbox environment my recommendation is to register to Microsoft 365 Developer Program
  • Visual Studio 2019 Community or Better
  • Azure Active Directory that already activated by default when you have Office 365 Subscription

This tutorial assumes that you use your own Azure AD.

Let's Get Started

Step 1 – Login with your Account in Visual Studio

  • Open your Visual Studio
  • Select Continue without Code
  • Click File – Account Settings
  • Click Add an Account
  • Add you Office 365 Account that has an access to the Azure AD

Step 2 – Creating a Visual Studio Project

  • File, New, Project (Ctrl + Shift + N)
  • Choose ASP.NET Web Application
  • Create your project, I recommend you follow this naming
  • Please follow the animation below

Step 3 – Add Additional API Permission in Azure AD

  • Visit the azure AD portal by login with Your Azure AD owner account. In this case, I use my Office 365 developer program account
  • Configure the API permission by selecting Azure Active Directory, Your Application, and API Permission. Please follow this animation
  • On this example, we want to read the Calendar and Basic Profile of Office 365 Account

Step 4 – Adding Microsoft Graph Codes Functionality

  • Please add Graph client library for ASP.net MVC, by Right Click of Package and select Nuget Package Manager, click browse and search for Microsoft Graph

  • We are ready to go here are the brief what we will do in this step: (1) changing the codes from Azure AD endpoint (graph.windows.net) to Microsoft 365 endpoint (graph.microsoft.com); (2) creating codes helpers to consume the Graph API
  • We will discuss the codes in the video tutorial (please see below)

Step 5 – Creating Controller, View, and Model for Calendar function

This is routine step to create controller, view, and model. This step is described in video tutorial (please see below)

You can download the codes in the OneDrive

blog comments powered by Disqus

Topics Highlights

Translate It

About @ridife

This blog will be dedicated to integrate a knowledge between academic and industry need in Application Lifecycle Management (ALM), ICT tips, and Software Engineering Research. Enjoy this blog and let's get in touch in any social media.

Xbox

Month List