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:
Click on the “Web” link, you will be shown following:
Enter the application name and your contact email, then click on “Create”. I entered “CSCorner” in the application name:
You will be shown a success message and asked for 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 above section, you will be shown a sample code section:
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 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:
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 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:
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 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:
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