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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s