Introduction to MS Graph API

MSGraph_Graphic.png

In this article, I will introduce you to the MS Graph API which is a powerful way to interact with Office 365 data.

Here are the objectives of this article:

  • What is MS Graph API?
  • How it came into picture?
  • What are its features, benefits and limitations?
  • MS Graph Explorer
  • MS Graph SDK

Let’s start with MS Graph API.

 

What is MS Graph API?

The official MS documentation defines MS Graph API as:

“You can use the Microsoft Graph API to interact with the data of millions of users in the Microsoft cloud. Use Microsoft Graph to build apps for organizations and consumers that connect to a wealth of resources, relationships, and intelligence, all through a single endpoint: https://graph.microsoft.com”

In a nutshell, MS Graph API gives you a single REST API endpoint which you can call to interact with “almost anything” in Office 365.

 

How it came into picture?

Prior to MS Graph API, Microsoft had different APIs for it’s different Office 365 and cloud products. Outlook, OneDrive, OneNote, Yammer all had their different APIs to interact with them.

Consider the following steps involved while dealing with different Office 365 APIs in an application:

  • Find the URL/endpoint of the API
  • Authenticate / get access token
  • Get results from the API
  • Repeat for each service
  • Manage multiple tokens for each API

It made a developer’s life difficult if one had to connect to many different APIs in an application.

As a solution, Microsoft launched the MS Graph API which is also called “One endpoint to rule them all”.

 

Why should you learn MS Graph API?

Office 365 is undoubtedly most widely used office produce worldwide. Millions of people are using the commercial versions of Office 365 suite or one or another of its products like Outlook, OneNote, etc.

On an average, a user in any office will use 2-3 hours working on different Office suite product like Outlook, Excel, Project, etc. Millions of new emails, events, etc. are generated in Outlook and millions of files are stored on OneDrive.

If you want to access all this information stored in Office 365 or on Azure, then you need MS Graph API.

 

Advantages

  • Single well-known resource

MS Graph API is the easiest way to interact with Office 365 data. Using MS Graph API, you can get mostly everything from a single endpoint https://graph.microsoft.com.

  • Ease of development

It liberates a developer from calling different Office 365 APIs and doing multiple token management.

  • Logical navigation

The entities of Office 365 are accessible in a logical way thru MS Graph API. Look again at the picture posted at the top of this article. You will see that once you access a user, all other entities related to it – files, messages, notes, etc. – are then accessible in a logical manner.

You don’t have to remember how an entity will be accessed, it follows a logical manner of graph structure.

  • Platform flexibility

MS Graph API does not mandate you to learn a new programming language. It can work with many different languages/platforms and Microsoft has launched SDKs to work with different platforms. You can work with MS Graph API in Windows/Android/iOS platforms. You can read more on it on last section of this article “MS Graph SDK”

 

Features

  • MS Identity Stack

MS Graph API does not introduce any new authentication mechanism where users have to go to register and then remember one more user name and password.

Instead, MS Graph API uses the Microsoft identity stack (which is used by 85% of fortune 500) – means that your users can login using the same familiar Azure AD / Microsoft Office 365 login credentials in your application.

MS Graph API uses Open ID Connect for authentication and OAUTH 2.0 for access tokens.

  • Open Standards

MS Graph API is based on and it supports many open web standards making it flexible and highly interoperable. Some of these standards are: 

REST – heart of MS Graph API implementation, any device/technology able to make http call and able to interpret JSON can work with MS Graph API 

JSON – lightweight format for request and response data 

OAUTH – provides API access token management, MS Graph API supports OAUTH v2.0 

ODATA – MS Graph API supports open data protocol v4.0 which is also called “The best way to REST”. It uses URL query string operators to make simple, standard and readable expressions.

I have written some articles on using optional ODATA query parameters with MS Graph API which can be found here:

 

  • Webhooks

Using webhooks, MS Graph API can send you notification for any changes in entities for which you have subscribed to. Instead of keeping on querying MS Graph API to see if there are any changes, you can use webhooks mechanism to have notification sent to you in case of any action/event happening. For example, you can subscribe to get notified when a new message arrives. 

  • Intelligence & Insights

MS Graph API does not only do simple input and output operations on your organization’s Office 365 entities. Instead of that, MS Graph API also has intelligence inbuilt in it which can help you to find treading documents around a user, people frequently contacted, etc. It can also help you find the best meeting times in a team.

  • Custom data extensions

You can extend MS Graph API results with custom data i.e. you can add custom data to MS Graph without using any external data source. This is helpful when you want to store some custom data relevant to your application e.g. profile setting or favorite theme, etc.

There are two types of extensions: Open extensions which are flexible and allows you to store any untyped data; and Schema extensions where you can define your own complex strongly typed schema, which can be shared between your different applications.

  • Delta query

Using delta query, it become easier to track data changes in entities. Instead of getting list of all entities and comparing them one by one to identify any changes, just fire a call using delta query which will give you only the changes i.e. inserted, updated, deleted data since your last call. 

  • Batching

Using MS Graph API’s JSON Batching you can combine multiple requests in one HTTP call and optimize application performance. Instead of looping thru multiple calls in your application, you can fire all related / unrelated calls in one batch in one go.

 

Limitations

The most visible one is some of its features are still in beta, but MS Graph team keeps launching new features in live regularly.

For a list of all MS Graph API known issues, refer here.

 

MS Graph API Explorer

Graph Exp

MS Graph API Explorer is a great tool to get started with MS Graph API and learn first-hand how it works. Graph Explorer is a developer sandbox where you can fire actual Graph API call and see its result.

You can access MS Graph API Explorer here.

I have written some articles on how to use MS Graph Explorer which can be found here:

 

Microsoft Graph SDK

MS Graph team has done some great work in launching SDKs for different platforms which makes development with MS Graph API easy.

You don’t have to code everything from scratch, ready to start code is available in SDK.

The following SDKs are available:

SDKs.png

If you are a java developer, then recently Microsoft has launched Java SDK for MS Graph API in preview.

If you want to add MS Graph SDK in any of your C# application, then open Visual Studio and simply search for “Microsoft Graph” in NuGet package manager to get started:

Nuget MS Graph.PNG

That’s it for introduction to MS Graph API in this article. Wait for my next article where I will show how you can start programming in MS Graph API.

Till then following links will be useful to get started with MS Graph API:

Office 365 Development with Visual Studio 2017 – Part 2

When Visual Studio 2017 was launched earlier this year, I wrote an article to provide a glimpse of how to get started with Office 365 development with VS 2017 and different project templates available in VS 2017. You can read it here.

Let’s continue our journey of Office 365 development with VS 2017 in this article.

Objectives

In this article, we will walk through creating and running Office 365 projects in VS 2017. Along with that, I will explain Office 365 Add-in concepts side by side.

We will learn the following in this article.

  • Creation of Excel add-in projects
  • Brief intro of Office 365 Add-in
  • When you should choose which type of project

Prerequisite

This article assumes that you already have installed Visual Studio 2017 with Office 365 development option on your PC. If not, then please read part-1 and follow the installation steps. You will not see the project templates mentioned in this article if you don’t have the correct version of Visual Studio with Office 365 development option.

To make sure which version of Visual Studio you are using, go to “Help” menu and select “About Microsoft Visual Studio” sub-menu in Visual Studio.

Make sure you are using Visual Studio 2017.

Office Development

I’m using Community edition of VS 2017 which is “Free, fully-featured IDE for students, open-source and individual developers”.

Office Development
Image credit: Microsoft

You can download VS 2017 Community edition here.

The Office 365 development options are same in all editions of VS 2017, namely Community, Professional, and Enterprise. So, it will not matter whichever edition of VS 2017 you have for following the steps of this article.

Getting Started

Let’s start with creating a new Office 365 project for the add-in.

Either click on the menu “File” -> “New” -> “Project” or on the “Start Page” under “New Project” section, click on “Create new project…”:

Office Development

In the “New Project” popup, expand “Office/SharePoint” category under Visual C# and click on “Add-ins”.

Office Development

You will see project templates for Word, Excel, PowerPoint, Outlook, and SharePoint add-in.

Let’s briefly understand about Office 365 add-ins.

What is Office 365 add-in?

With Office 365 add-in or Office add-in, you can build program/solution that extends Office applications and interacts with the content in Office documents. You can add new functionality to Microsoft Office clients or create new rich, interactive objects that can be embedded in Microsoft Office documents. Office add-in runs in Microsoft Office across multiple platforms, including Office for Windows, Office Online, Office for the Mac, and Office for the iPad.

For more information on Office 365 add-ins, read on Microsoft website here. I will cover more on Office 365 add-ins in a separate article later.

In the New Project popup, select “Excel Web Add-in”, then click OK.

You will see a “Create Office Add-in” dialog with following two options:

  • Add new functionalities to Excel.
  • Insert content into Excel spreadsheets.

    Office Development

Let’s quickly see what this means. We will understand by inserting some add-in in Excel.

Open Excel and create a new workbook. Go to “Insert” -> “My Add-ins” -> “See All…”:

Office Development

“Office Add-ins” dialog will open. Click on “STORE”, enter “Wikipedia” in search, once Wikipedia add-in appears, click on “Add” button next to it.

Office Development

The dialog box will close and you will see now that the “Wikipedia” add-in is added under “Add-ins” ribbon.

Office Development

Click on it and on the right side, you will see a new section.

Office Development

Anything you can do on Wikipedia website, now you can do from inside Excel only using this add-in.

This is an example of “Extend functionality” type of add-in. These types of add-ins let you do some work right from Office applications without opening any other application. If you want to create this type of add-in, you should select “Add new functionalities to Excel” option in “Create Office add-in” dialog.

Now, let’s see some other add-in examples. Once again in Excel, go to “Insert” -> “My Add-ins” -> “See All…”. In the “Office Add-ins” popup, click on “STORE” tab and search on “bubbles”,

Office Development

Click on the first row “Add” button. You will see in the top right under “Insert” ribbon, a new “Excel Bubbles” add-in is available now.

Office Development

Click on it and a section with bubbles is added into current worksheet.

Office Development

Click on the “Sample Table” bubble in this section. It will add some sample data in worksheet and populate bubbles as per data,

Office Development

This is an example of “Content” type of add-in which adds some content inside an Office application. If you want to create this type of add-in then you should select “Insert content into Excel spreadsheets” option in “Create Office add-in” dialog.

Let’s go back to Visual Studio now. We were on this popup,

Office Development

Let the selection be “Add new functionalities to Excel”. Click “Finish”.

VS will create a new Excel add-in solution with 2 projects,

Office Development

Before understanding “what” these projects are and “why” they are created, let’s first understand the composition of an Office 365 add-in.

An Office 365 add-in consists of two components,

Office Development
Image credit: Microsoft

  • XML manifest file
    specifies settings and capabilities of the add-in
  • Web application
    interacts with Office clients and documents

Now coming back to Visual Studio, in VS 2017 Solution Explorer, you will see these two projects:

  • ExcelWebAddIn1
    This is the manifest project containing the XML add-in configuration/settings
  • ExcelWebAddIn1Web
    This is the project which has all code defining the add-in & its interaction with Office document. It has JavaScript and HTML files which define the UI of the add-in.

    To provide same look and feel in the add-in as Office 365 clients, it uses Office UI Fabric JavaScript. I will cover more on Office UI Fabric JS in separate article later.

Let’s now run the project to see it working. Press F5, VS will build the solution and launch Excel to make your add-in available inside it.

In Excel, “Show Taskpane” button will be focused with a tool tip message,

Office Development

Click on the “Show Taskpane” button. The task pane area will be loaded on the right side of Excel worksheet.

Office Development

Please note that when you created a new Excel add-in project, VS 2017 has included some sample code in it. That’s why you see the text and button here. Also, if you note the worksheet has been loaded with some sample data,

Office Development

This sample add-in is for finding and highlighting highest value cell among the selected ones. To see it in action, select the sample data and click on “Highlight” button,

Office Development

The JS code will get executed and highest value cell among the selected cells will be highlighted.

Stop the running project from Visual Studio and let’s now see the code which made it work.

In the Solution Explorer, double click the “Home.html” file.

This is the file which contains all UI elements. The texts and button you saw in Excel add-in are defined here,

Office Development

In the Solution Explorer, double click on home.js file.

This is the file which contains all code to interact with Excel.

Office Development

It sets the button text to “Highlight” and also sets the JS function which should be executed when someone clicks on it, among other things.

The load sample data JS function which populates the worksheet with some random numbers,

Office Development

The code for finding the highest value cell and highlighting it,

Office Development

See how simple it is to get started with Office 365 add-in development? You must give it a try yourself using VS 2017.

The purpose of this article was to make developers aware of Office 365 add-in development using VS 2017 which I have done above. You have to come up with the idea of your add-in to create a real-life Office 365 add-in which adds some value to the Office clients.

That’s it for this article. I will cover more add-in options in next article.

Note: This article was originally published by me on C# corner website here.

Featured image courtesy: C# Corner

Get Office 365 data in Excel using MS Graph API

Learn how to use MS Graph API in Excel

Objective:

Recently I wrote an article about how you can consume MS Graph API in Power BI (read it here). MS Excel can also consume Microsoft Graph API in the same way.

In this article, I will show how you can quickly fetch Office 365 data of your organization in MS Excel using Microsoft Graph API. We will fetch an organization’s users list in MS Excel with MS Graph. Once you learn to use MS Graph API in MS Excel, you can explore more options by yourself.

To make this article easy to follow, let’s identify a real-world requirement and then see how we are going to solve it using MS Graph API and Excel.

Requirement:

Suppose you are working in the IT department of an organization who employs 500+ users. On weekly basis, new employees join your organization and some leave too. The receptionist needs up-to-date information about all employees and their contact details. You are asked to provide her a simple solution. You create an Excel workbook for her using MS Graph API data feed which will show list of employees which she can refresh anytime to get latest updates.

 Introduction:

What is MS Graph API?

Excerpt from https://developer.microsoft.com/en-us/graph/docs/concepts/overview

You can use the Microsoft Graph API to interact with the data of millions of users in the Microsoft cloud. Use Microsoft Graph to build apps for organizations and consumers that connect to a wealth of resources, relationships, and intelligence, all through a single endpoint: https://graph.microsoft.com

For more on MS Graph API, please go to https://developer.microsoft.com/en-us/graph

There is no coding involved to follow steps of this article. However, if you want to follow along the steps, then it’s better to have Office 365 developer account as mentioned in “Prerequisite” section below.

 Prerequisite:

  • Office 365 developer account

You may have access to Office 365 thru your employer/organization account. However, it is strongly advised that you don’t use your live/organization account to follow steps of this article. Instead, use Office 365 developer account. Use your live/organization account only when working in a production environment.

Read my blog on how to get Office 365 developer account for 1 year free here.

 Getting Started:

I assume you have Office 365 developer account and you also have MS Excel installed on your PC.

Open MS Excel and create new workbook.

Go to “Data” tab in ribbon and click “Get Data” on left side:

GetData1

When “Get Data” menu expands, click on “From Other Sources”, then click “From OData Feed” as shown below:

GetData 2

Once you click on “From OData Feed”, you will see a dialog to enter OData feed URL:

Odata URL

Why we choose this option?

MS Graph API is based on open web standards and it supports OData V4, and MS Graph API accepts and returns data in JSON format, making it easy to integrate with other applications and technologies.

We want to access all the users of an organization. The MS Graph API endpoint https://graph.microsoft.com/v1.0/users returns all users of an organization.

Enter https://graph.microsoft.com/v1.0/users in the textbox under URL and click OK:

Odata URL 2

Once you click on OK, you will see a dialog where you can specify your credentials to connect to MS Graph API:

Odata feed

Click on “Organizational account”, then click on “Sing in” button:

Odata feed 2

You will see “Office 365 Sign in” dialog:

O365 login

Don’t use your organization/live account to sign in. Use your Office 365 developer account to sign in.

After successful login, the “Office 365 Sign in” dialog will close, and your status on OData feed dialog will change to “singed in”:

Odata feed 3 Connect

Click on Connect button to continue.

It may take some time to fetch the result from MS Graph API call depending your internet connection, but it will not be more than a few seconds. Once MS Excel fetches the users using MS Graph API, it will show you result in a dialog.

For demo, I have created some users in Office 365 Admin Portal using my developer account. I suggest you also create some demo users with your Office 365 developer account using Office 365 Admin Portal.

You will see a result dialog like this, filled with your organization’s users:

result dialog

Notice the “Load” button has a down arrow, click on it and you will see “Load” and “Load To…” options:

Load

Click on “Load To…” link, you will see an “Import Data” dialog:

import data

This dialog has options for how you want to view the data and where you want to place the data. You can import the data to new worksheet too. We will not do anything special in this dialog, I just wanted to show you the options available in Excel.

Click on OK button and the dialog will close. As “New worksheet” was selected in “Import Data” dialog, you will see a new sheet has been added to Excel and data is populated:

excel result

What has happened here?

MS Excel has received the JSON data result from MS Graph API in response to the call to https://graph.microsoft.com/v1.0/users endpoint, and converted it to a data table for you. What you see here is the list of all properties it got from MS Graph API.

By default, Excel will load all the columns it received from MS Graph API, some columns will not have data and you will not want to display all the columns. We will see in some time how you can choose only some columns to be displayed.

Also, if you note on right side new section “Queries & Connections” has been added:

queries

Right click on “Query1” and click “Edit”:

Query Edit

You will see “Query Editor” is opened in a popup, click on “Choose Columns”:

Choose Columns

You will see “Choose Columns” dialog:

Choose Columns 2

Uncheck the very first “(Select All Columns)” checkbox, then select only below columns, then click OK:

  • displayName
  • jobTitle
  • mail
  • mobilePhone
  • officeLocation

You will see now Query Editor will only show the columns we selected in above step:

Close and load

Click on “Close & Load” button on top left to continue.

The Query Editor will close and you will Excel now shows you only those columns you selected:

excel chosen columns

Good job! You got your organization’s data in Excel using MS Graph API. How simple it was!

Now, let’s come back to the receptionist’s requirement I mentioned at the start of the article. A new employee has just joined office. She needs his details in this Excel too. What should she do?

For the demo to work, I have opened Office 365 Admin Portal and added a new user named “Graph Explorer” to my organization using Office 365 developer account. I suggest you also add a new demo user to your developer account using “Office 365 Admin Portal” -> “Add a user” link.

After adding a new user in Admin Portal, right click on “Query1” in Excel and click “Refresh”:

refresh

Excel will once again connect to MS Graph API and will fetch result and refresh the contents in worksheet:

new user

Do you see the user “Graph Explorer” now in the first row?

So, the reception’s requirement is fulfilled. Every time she wants latest data, she has to just hit “refresh” and MS Graph API will do the rest.

What’s next?

The purpose of this article was only to show you how MS Graph API data can be consumed in MS Excel, which I have shown above. Similarly, you can try by yourself calling some other MS Graph API endpoints.

Meanwhile, if you want to read more of my articles on MS Graph API, please visit https://nilesh.live/blogs/msgraph/.

A First Look At The New Microsoft Graph Explorer – Part Three

Note: All my blogs on Microsoft Graph API can be found here.

In first two parts of my article series “A First Look at the New Microsoft Graph Explorer”, I explained about different components of Microsoft Graph Explorer. I suggest you to read those two parts first, before reading this third part for better understanding.

You can read the previous parts here:

I will continue the article series with part three where I will explain how to execute the calls to Microsoft Graph API.

The objectives of this article are:

  • Execute some Graph API GET calls using sample account
  • Look at Microsoft Graph API metadata
  • Calling beta API

Execute Graph API GET calls using sample account

Let’s look at some simple GET calls to Microsoft Graph API using the Graph Explorer.

Open the Microsoft Graph Explorer by clicking here.

Check the left section under “Authentication”.

Office Development

It says currently a sample account provided by Microsoft with some test data is being used. You can fire GET calls using this account right away.

If you see the API endpoint address bar you will notice,

Office Development

API endpoint for getting user’s profile is already loaded.

Simply click on “Run Query” button to execute the API call.

Office Development

You will see that the response area of the page is updated with something, like below.

Office Development

The status in the green background indicates that the call was successful with HTTP status code of 200 and executed in 869 mill seconds.

Look at the JSON data in “Response Preview” section.

It has some data of “user” which is the current user provided by Microsoft sample account. If you are logged in with your account, then you will see your data. I will cover the calls after login with your account later.

There is also something more.

Microsoft Graph API metadata

You might be wondering how to find out what data to expect in an API GET call response or what data to pass in an API call POST request. You can read the Graph API documentation or look at the sample queries on left side section, but there is also another way.

Look at the first line of the JSON response,

Office Development

You will see a URL for “@odata.context” property.

Copy the URL and paste in a new tab.

Office Development

You will see it loads an XML file. A big XML file. That’s the OData documentation of the Microsoft Graph API. Microsoft Graph API metadata in other words.

It specifies the different entities and actions along with properties and parameters.

Search for the following in the page- EntityType Name=”user”.

Office Development

You will find the user entity along with its properties and navigation properties. You will also find some more entities, more actions, functions. You can also see the Graph API metadata page directly here,

The following lines are taken from the Microsoft Graph website as it is:

“The metadata allows you to see and understand the Microsoft Graph data model, including the entity types, complex types, and Enums that make up the resources represented in the request and response packets.

You can use the metadata to understand the relationships between entities in Microsoft Graph and establish URLs that navigate between those entities.

Path URL resource names, query parameters, and action parameters and values are not case sensitive. However, values you assign, entity IDs, and other base64-encoded values are case sensitive.”

For the scope of this article, I will not go deeper inside this XML file and will leave it to you to explore more.

Back to the Graph Explorer

If you place your mouse cursor in the API address bar and press back space key and remove everything till “v1.0/” you will see the Graph Explorer will hint you possible API endpoints you can fire,

Office Development

Similarly, if you start typing “me/” then it will show you possible endpoints after “me”

Office Development

Now, type https://graph.microsoft.com/v1.0/organization in the address bar and press “Run Query” button, you will see the logged in user’s organization info,

Office Development

Please note that in Microsoft Graph API “me” and “organization” are the only two aliases in Microsoft Graph API i.e. these two are not the actual objects in Office 365.

If you want to test more GET calls, then you can see list of some GET calls in left section under “Sample Queries”.

Office Development

More GET calls featured scenarios can be found here on Microsoft Graph website,

Office Development

Calling API in preview

Now, let’s see how to call some Graph API endpoints which are still in preview i.e. in beta.

Change the API version to “Beta” in the version lookup,

Office Development

Copy and paste https://graph.microsoft.com/beta/me/insights/trending in the API endpoint address bar and press “Run Query” button,

Office Development

You will see the names of some documents are returned with their “weight”. These are the “trending” documents around the user and you need to write some code to convert the “weight” of each document to some meaningful representation to end user.

But the purpose of making this call is to make you understand how to fire a beta API call in Microsoft Graph Explorer.

Now change the API version to V1.0, keep the API endpoint URL same and fire the call,

Office Development

You will see it returns an error, because this endpoint is only in beta version and not yet in V1.0.

I hope you will play with Microsoft Graph Explorer and fire some more GET calls until I write the next article and we continue the journey of learning with the new Microsoft Graph Explorer.

Note: This article was first published by me on C# Corner website here.

Header image courtesy: Microsoft

Register your application to work with Office 365 – Part 2

Learn how to register your application to work with Office 365

In this article, I will continue from where we left in part-1 to register an application to work with Office 365 using the Microsoft App Registration Portal.

This is part-2 of the two-part series, I suggest to read the part-1 here first before continuing.

The objectives of this article are:

  • Alternate way to register your application
  • How to run sample code
  • Access your registered application from MS Azure Portal
  • Application flow

Alternate Way to register:

You can also register application from the “Quick Start” page which is shown immediately after your login to App Registration Portal https://apps.dev.microsoft.com/portal/quickstart:

Quick Start.png

Click on the “Web” link, you will be shown following:

“Web” link.png

Enter the application name and your contact email, then click on “Create”. I entered “CSCorner” in the application name:

Create.png

You will be shown a success message and asked for redirect URL:

redirect URL3.png

For a quick demo, enter the same URL we entered above http://localhost:57329/AfterLoginPage and click “Save”.

How to run sample code:

After clicking “Save” button in above section, you will be shown a sample code section:

sample code section.png

You can see that your application’s ID and redirect URL are already there. This is a simple HTML and JavaScript code which you can quickly integrate into your application to redirect users to Microsoft for login.

Copy the script to any HTML page header section or create a new page in sample ASP.Net web application we created above.

Scroll down on the portal registration page, you will see code for HTML button:

HTML button.png

Copy this code to body section of new HTML page you created. Save and run the page in browser.

If you create a new ASP.Net web form, then mark to page as startup page and run your web application.

In both the cases, it is necessary that the http://localhost:57329 site is running so that Microsoft can redirect your application to that page.

Both the before login page and after login page of sample web application are attached with this article. You need to add them to your sample application to test demo. Don’t forget to change “clientId” and “redirectUri” values in your page:

sample application.png

Run the application or browse the HTML page you created:

Run the application.png

Click on the Sign in button. You will be shown a login page from Microsoft:

login page from Microsoft.png

Enter your Microsoft login and password, click on “Sign in”.

You may be shown a page like shown below asking for your permission to give grant to application if you are logging in for the first time. Please note this is not the actual screen shot of my application, I have taken it as reference from Microsoft site:

permission.png

Image source: Microsoft

You will be redirected to the page mentioned in “Redirect URL” setting:

redirect.png

Congratulations! You have implemented the authentication with MS Identity stack. Remember you must write code for fetching data from MS Graph API or any other Office 365 APIs. This article covers only registering your application with MS App Registration Portal and demo of logging in using Microsoft credentials.

Access your registered apps from MS Azure Portal:

The applications you registered here are also accessible from MS Azure Portal.

To do so, login to MS Azure portal https://portal.azure.com with the same login you used to register your app on MS App Registration Portal.

Once you are logged in, find and click on the link “Azure Active Directory” Azure Active Directory in left pane:

Azure Active Directory2.png

One more menu will open, find and click on the link “App registrations”App registrations:

App registrations2.png

Alternatively, without clicking on that link, Azure portal will show you the registered apps on the dashboard:

dashboard.png

Either click on the “App Registrations” menu on left or click on the “App Registrations” web part in dashboard.

You will be shown following screen:

App Registrations3.png

You will not see your registered app directly here, Click on the “Microsoft Application Console” link.

Azure portal will redirect you to a login page, once your login is successful, you will be redirected to “My Applications” page of MS Application Registration Portal:

Microsoft Application Console.png

Application flow:

If you really want to develop an application and fetch some data from Office 365, you will need to do much more than just register an application in the portal.

Here is the complete application flow for your reference, you can follow it step by step to develop an application which will access data from MS Graph API or Office 365 APIs:

  • Register the application on Microsoft App Registration Portal: https://apps.dev.microsoft.com
  • Configure the project with ID & key or copy and paste the sample code from portal quick start
  • Authenticate the user and get an access token
  • Call Microsoft Graph API / Office 365 API(s) / Other MS Cloud API
  • Parse the result, show the result to application user

I will cover these steps in detail in a future article, until then – Happy learning!

 

Header Image Credit: C# Corner

Register your application to work with Office 365 – Part 1

Register your application to work with Office 365 using the Microsoft Application Registration Portal.

In this article, I will explain how you can register your application to work with Office 365 using the Microsoft App Registration Portal.

This is part-1 of the two-part series, you can continue to read another part here.

These are the objectives of the article:

  • What is Microsoft Application Registration portal?
  • Why you should know about it?
  • Overview of components in Microsoft Application Registration portal

 Background:

If you are developing an application which is going to work with Microsoft Office 365, like fetching data using MS Graph API or any other Office 365 API, then you will need to register your application with Microsoft first.

Your application users need to be authenticated in Microsoft identity stack first before your application can fetch data using the MS Graph API or any other Office 365 API on their behalf.

 What is Microsoft Application Registration portal?

MS Application Registration Portal is the website where you can go and register your application so that it can work with MS Identity stack and you can get access token to get data from Microsoft APIs.

Here you can:

  • Register new applications
  • Modify existing application for – access permissions, redirection URL, etc.
  • Generate keys
  • Set up application profile

 Why you should know about Microsoft Application Registration portal?

Apart from the purpose stated above, if you want to eliminate managing user name and passwords in your application on your own and let users log in with Microsoft work or school or personal account, then you can delegate the work of authentication to Microsoft. Users can login to your application using Microsoft Identity stack.

By supporting sign in with Microsoft identity stack, your application can have single sign on with Windows and Microsoft cloud applications, can protect your users with the same technology and investments used to protect Microsoft’s users, and can programmatically access information and insights about users via the Microsoft Graph API or other Office 365 APIs.

Any application which wants to use the capabilities of MS Identity stack must first be registered in MS App Registration portal. Here you will be able to get an App ID and redirect URL along with secret code which is necessary to make your app work with Office 365.

Important:

At the Application Registration portal, you will generate an App Secret which will be shown to you only once. Please retain that App Secret, as you will need it to run your app. If you forget it, you will need to restart the registration flow again. There is no way to get the App Secret again.

Cross-platform support:

It supports registering application for iOS, Android, web, and more:

cross

Access data from Microsoft APIs

Access user data inside the enterprise — get an Office 365 user’s calendar, mail, and contacts. The registration in MS App Registration Portal satisfies the basic authentication requirement, you must write code specific to the Office 365 or any other Microsoft API.

Wide use

The Microsoft identity stack has been battle tested by some of the biggest companies in the world.

Using MS Identity stack, you can offer one-click sign in to:

  • Around 85% of the Fortune 500 companies’ users
  • Around 85M monthly active users on Office 365 commercial
  • Around 400M Outlook.com monthly active users

What you will need to register?

You can register using your Microsoft work or school or personal account. You can use your MS Office 365 developer account or windows live account to register your app.

If you are developing for Office 365 and you want to create a developer trial account, read my article here in which I have explained in detail how you can get a free Office 365 account for 1 year.

Where you can register your application?

You can visit the MS App Registration portal here, and then click “Register your app >

reg.png

If you are not already logged in and you click on “Register your app >” link, then portal will first redirect you to login page:

log.png

If you enter your Office 365 developer account, then you will be shown a screen like below to enter password:

pw.png

Let’s see different components in MS App Registration Component

Once you have entered your correct password and successfully logged in, you will be shown the following screen:

f1.png

You can see here the options to register an application for iOS, Android or Web.

If you click on the “My Applications” link on top right, then it will show you any existing application registration in current login id:

my apps.png

Application name and its GUID app id are masked in above screen shot by me for security purpose. You can also see “Add an app” button on top right in this screen. Click on that button and you will see a popup to register new application:

register new application.png

Enter the name of your application and click “Create application”. I entered “CSharpCorner” and clicked on the button:

Create application.png

Portal will create an application named “CSharpCorner” for you. I have highlighted the application name. I have also hidden my email id and application id which is unique id for your application. Have a look at different options available in this page. One by one I will cover those below.

Also, note the message displayed below application name header “CsharpCorner Registration”:

CsharpCorner Registration.png

It says that the application “CSharpCorner” will be registered in the MS Azure active directory instance which manages the login account with which you have logged in. What it means is covered later in this article.

For the scope of this article, “Azure Active Directory” is not covered in any more detail but I suggest you read about it on Microsoft Docs here.

On the same page, note that a section for assigning Microsoft Graph permissions:

Microsoft Graph permissions.png

Further down the page, you will see some other profile settings:

profile settings.png

You can add logo for your application, and URLs for your application’s home page, ToS, Privacy, etc.

Still further down the page, there are some other advanced options, along with save and cancel buttons:

advanced options.png

“Application Secrets” section:

Scroll to the “Application Secrets” section.

Application Secrets.png

Click on the “Generate New Password” button to create a password for our application. Portal will generate new password for your application and show in a popup:

Generate New Password.png

Note that the password will be shown to you only once now and there is no way to see this password again. So, it is necessary to store this password somewhere safe so that you can use it in your code later.

You will use this password along with the “application id” of this application to make your users authenticated by Microsoft.

Click “Ok” button and you will see that Portal shows you masked password:

masked password.png

Mostly in programming you will use the application id and password combination to redirect your users to authenticate on Microsoft site. But if you want to create a private key/certificate it can be done here too.

Click on the “Generate New Key Pair” link:

Generate New Key Pair.png

Enter the password and click “Ok”. Remember the password used to create the key, store it somewhere safely. Also, within seconds when the private key is ready, Portal will show you message to save it:

download the file.png

Click on “Save File” and then click “Ok” to download the file.

Once the file is downloaded, you can go to the download location and see the file:

download location.png

Double click on it to import; a certificate import wizard will be shown to you:

certificate import wizard.png

For the scope of this article, the certificate import wizard is not covered. You can explore it on your own.

“Platforms” section:

Now go back to the App Registration Portal, scroll to the “Platforms” section and click on “Add Platform” button:

Platforms

You will see the “Add Platform” popup:

Add Platform.png

 

Web application, Native application and Web API platforms can be added here. Click on “Web”. The following section will be added to the page:

Web application.png

The most important setting here is the “Redirect URL”:

Redirect URL.png

It’s the URL to which the user’s browser will be redirected after Microsoft authenticates the user. It should be a URL of a page in your web application which you want to show once user completes authentication with Microsoft, like a landing page.

For showing you a demo, I have created a sample ASP.Net application on my PC and taken its local URL which I will enter in the “Redirect URL” textbox:

http://localhost:57329/AfterLoginPage

Redirect URL 2.png

Similarly, you can also click on “Add Platform” again and select “Native Application” this time:

Native Application.png

You will see the “Native Application” section will be added to the page:

Native Application2.png

Once again click on “Add Platform” and select “Web API”:

Web API.png

The “Web API” section will be added to page:

Web API2.png

I will not go into details of “Native Application” and “Web API” sections.

You can delete these two platforms if you added for testing, because for demo I will show you only “Web” platform.

“Microsoft Graph Permissions” section:

In this section, the permission to your application when it communicates with MS Graph API is decided.

To understand better, read the following extract from Microsoft Docs:

By defining these types of permissions, the resource has fine-grained control over its data and how the data is exposed. A third-party app can request these permissions from an app user. The app user must approve the permissions before the app can act on the user’s behalf. By chunking the resource’s functionality into smaller permission sets, third-party apps can be built to request only the specific permissions that they need to perform their function. App users can know exactly how an app will use their data, and they can be more confident that the app is not behaving with malicious intent.

By default, there is only one “User.Read” permission which is the simple most read-only permission:

User.Read.png

Click on the “Add” button besides “Delegated Permissions”. You will be shown the “Select Permission” popup:

Select Permission.png

It’s up to you which permission you want to give to your application based on the type of work you are doing in it. Never give unnecessary or all permissions to application as it may result in some user data loss inadvertently. Select only those permissions which you actually need in your application. Let’s say your application will send and receive emails, then select the Mail.Read and Mail.Send permissions.

Click “Ok” and see the permissions are there on the page:

permissions.png

Scroll down to the bottom of the page and click on “Save” to save the changes.

There is also another way to register your application which I will cover in part-2 of the series.

To read how to register application in alternate way, how to see registered applications in MS Azure Portal and for a quick demo, check my part-2 article here.

 

Header Image Credit: C# Corner

Introduction to Microsoft Office 365 Developer Program

In this article, I will introduce you to MS Office 365 Developer program.

Background

The user base of MS Office 365 is increasing day by day by leaps and bounds. Microsoft needs to prepare more and more developers who work with Office 365. For this reason, Microsoft has designed the MS Office 365 Developer Program for the developers who build Office 365 solutions across desktop, web, and mobile platforms.

The MS Office 365 Developer Program can be accessed via the link https://dev.office.com/devprogram

MS Office 365

You can start registering for the developer program by clicking on “Join Now” button.

What are the benefits of MS Office 365 developer program?

The program offers many benefits. The most interesting one is one year free Office 365 developer subscription.

MS Office 365

You can also access some free online training on Office 365 too.

If you register now and till next few days, you will also get a chance to participate in a draw to win MS Ignite 2017 event.

MS Office 365

Why you should register

If you want to start with Office 365 development which is very much in demand now, then you will need a demo or test account for your programming. You may have access to Office 365 via your employer organization but that is the live organization data. You may not want to play with live data while you are in  the testing and training phase of some new programming.

Once you get the developer account, you can use it for various Office 365 related programming works, like:

  • MS Graph API
  • Office 365 API
  • Office 365 Add-ins

Microsoft is giving you a free one year subscription which you should not miss.

What you will get

Among other things described in one of the screenshots above, you will get “Office 365 Enterprise E3 Developer Trial” subscription with 5 users and US $10.40 user/month credit.

MS Office 365

Note: Shown above is a screenshot of my developer trial subscription from Office 365 Admin portal.

How to register

You can either click on “Join Now” button as shown in first screen or scroll down on the dev program home page and click on the “Join Developer Program >” button.

MS Office 365

Once you click on the “Join” button, you will be shown a registration page.

MS Office 365

Fill in your details and continue. Once you have completed the registration, you will get an email from Office Developer account.

MS Office 365

This email has a link to redeem your free Office 365 developer account. Click on the “Redeem today” link in the email to continue.

You will be shown the following screen.

MS Office 365

Fill in your details and continue.

You will see the following confirmation page.

MS Office 365

Please keep note of your user id which ends with “.onmicrosoft.com” which you will use to login to Office 365.

Office 365 Portal & Admin Portal

Once you have everything setup, you can visit the Office365 portal to access your account here.

MS Office 365

Note: The above shown image is my office 365 portal landing page. You can start using the Office 365 products right away.

You can visit the Office 365 admin portal here.

MS Office 365

You can manage users, groups, etc. from the Office 365 admin portal.

Finally, go to the billing section and check your subscription. It will show you how many number of days are left.

MS Office 365

Go now and create an Office 365 developer account, create some test data, and start programming with Office 365.

What’s stopping you?

 

Note: This article was published by me on C# Corner website here.

Header Image Credit: C# Corner