Register Your Application To Work With Office 365 - Part Two

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 the second part of the two-part series, I suggest you read  part one before continuing.

• Register Your Application To Work With Office 365 – Part One 

The objectives of this article are,

• Alternate way to register your application
• 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 you login to App Registration Portal https://apps.dev.microsoft.com/portal/quickstart.

Click on the “Web” link.

Enter the application name and your contact email. Then, click “Create”.

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

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 the above section, you will be shown a sample code section.

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,

Copy this code to the body section of the 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,

Run the application or browse the HTML page you created,

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

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

You may be shown a page like the one shown below asking for your permission to give permission  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,

Image source: Microsoft

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

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” in left pane,

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

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

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

You will be shown the following screen,

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,

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 registering an application on 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!