Skip to content

Latest commit

 

History

History
277 lines (223 loc) · 12.4 KB

Lab.md

File metadata and controls

277 lines (223 loc) · 12.4 KB
Raw

Getting started with Office 365 APIs

In this lab, you will investigate the O365 APIs.

Prerequisites

  1. You must have an Office 365 tenant to complete this lab. If you do not have one, the lab for O3651-7 Setting up your Developer environment in Office 365 shows you how to obtain a trial.

Exercise 1: Create & Configure an MVC Web Application

In this exercise you will create a new MVC web application to utilize the O365 APIs.

  1. In Visual Studio, click File/New/Project.
  2. In the New Project dialog
  3. Select Templates/Visual C#/Web.
  4. Select ASP.NET Web Application.
![](Images/01.png)
  1. Click OK.
  2. In the New ASP.NET Project dialog
  3. Click MVC.
  4. Click Change Authentication.
  5. Select Work And School Accounts.
  6. Select Cloud - Single Organization
  7. Input Domain
  8. Check Read directory data under Directory Access Permissions
  9. Click OK.
  10. Click OK.
![](Images/03.png)

![](Images/02.png)
  1. Update the web project to use SSL by default:
  2. In the Solution Explorer tool window, select the project and look at the Properties tool window.
  3. Change the property SSL Enabled to TRUE.
  4. Copy the SSL URL property to the clipboard for use in the next step.
  5. Save your changes.
![](Images/SslEnabled.png)
> It is important to do this now because in the next step when you create the application in Azure AD, you want the reply URL to use HTTPS. If you did not do this now, you would have to manually make the changes the Visual Studio wizard is going to do for you in creating the app.

  1. Configure the project to always go to the homepage of the web application when debugging:

  2. In the Solution Explorer tool window & select Properties.

  3. Select the Web tab in the left margin.

  4. Find the section Start Action.

  5. Click the radio button Start URL and enter the SSL URL of the web project that you copied from the previous step.

  6. At this point you can test the authentication flow for your application.

  7. In Visual Studio, press F5. The browser will automatically launch taking you to the HTTPS start page for the web application.

  8. To sign in, click the Sign In link in the upper-right corner.

  9. Login using your Organizational Account.

  10. Upon a successful login, since this will be the first time you have logged into this app, Azure AD will present you with the common consent dialog that looks similar to the following image:

![](Images/ConsentDialog.png)
  1. Click OK to approve the app's permission request on your data in Office 365.
  2. You will then be redirected back to your web application. However notice in the upper right corner, it now shows your email address & the Sign Out link.

Congratulations... at this point your app is configured with Azure AD and leverages OpenID Connect and OWIN to facilitate the authentication process!

Exercise 2: Configure Web Application to use Azure AD and OWIN

In this exercise you will take the ASP.NET MVC web application you created in the previous exercise and configure it to use Azure AD & OpenID Connect for user & app authentication. You will do this by utilizing the OWIN framework. Once authenticated, you can use the access token returned by Azure AD to access the Office 365 APIs.

  1. Grant App Necessary Permissions.

  2. Browse to the Azure Management Portal and sign in with your Organizational Account.

  3. In the left-hand navigation, click Active Directory.

  4. Select the directory you share with your Office 365 subscription.

  5. Select the application you created for this lab.

  6. Open Configure tab

  7. Scroll down to the permissions to other applications section.

  8. Click the Add Application button.

  9. In the Permissions to other applications dialog, click the PLUS icon next to the Microsoft Graph option.

  10. Click the CHECK icon in the lower right corner.

  11. For the new Microsoft Graph application permission entry, select the Delegated Permissions dropdown on the same line and then select the following permissions: * Read user calendars

  12. Click the Save button at the bottom of the page.

  13. Add a helper class that will be used to harvest settings out of the web.config and create the necessary strings that will be used for authentication:

  14. Locate the [Lab Files](Lab Files) folder provided with this lab & find the file SettingsHelper.cs. Copy that file to the Utils folder.

  15. Update _Layout file to add Calendar link:

    1. Open the _Layout.cshtml file found in the Views/Shared folder.
    2. Locate the part of the file that includes a few links at the top of the page... it should look similar to the following code:
     ````asp
 <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
     <li>@Html.ActionLink("Home", "Index", "Home")</li>
     <li>@Html.ActionLink("About", "About", "Home")</li>
     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
   </ul>
 </div>
 ````
    1. Update that navigation to have a new link (the Calendar link added below) as well as a reference to the login control you just created:
     ````asp
 <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
     <li>@Html.ActionLink("Home", "Index", "Home")</li>
     <li>@Html.ActionLink("About", "About", "Home")</li>
     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
     <li>@Html.ActionLink("Calendar", "Index", "Calendar")</li>
   </ul>
   @Html.Partial("_LoginPartial")
 </div>
 ````

 > The **Calendar** link will not work yet... you will add that in the next exercise.

Exercise 3: Leverage the Office 365 APIs and SDK

In this exercise you will add a controller and views that utilize the Office 365 APIs and SDK.

  1. With the authentication process complete, add a new controller that will retrieve events from your calendar:
  2. Right-click the Models folder and select Add/Class. 1. In the Add Class dialog, give the Class the name MyEvent and click Add. 1. Implement the new class MyEvent using the following class definition.
````c#
public class MyEvent {
       
    [DisplayName("Subject")]
    public string Subject { get; set; }

    [DisplayName("Start Time")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTimeOffset? Start { get; set; }

    [DisplayName("End Time")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTimeOffset? End { get; set; }
}
````
  1. Right-click the Controllers folder and select Add/Controller. 1. In the Add Scaffold dialog, select MVC 5 Controller - Empty and click Add. 1. In the Add Controller dialog, give the controller the name CalendarController and click Add.
  2. Add the following using statements after the existing using statements in the CalendarController.cs file:
````c#
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System.Security.Claims;
using System.Threading.Tasks;
using Exercise2.Utils;
using Exercise2.Models;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json.Linq;    
````
  1. Decorate the controller to only allow authenticated users to execute it by adding the [Authorize] attribute on the line immediately before the controller declaration:
````c#
namespace Exercise2.Controllers {
  [Authorize]
  public class CalendarController : Controller {}
}
````
  1. Create a function GetGraphAccessTokenAsync to get access token for Graph API Authentication:
````c#
public async Task<string> GetGraphAccessTokenAsync()
{
    var signInUserId = ClaimsPrincipal.Current.FindFirst(ClaimTypes.NameIdentifier).Value;
    var userObjectId = ClaimsPrincipal.Current.FindFirst(SettingsHelper.ClaimTypeObjectIdentifier).Value;

    var clientCredential = new ClientCredential(SettingsHelper.ClientId, SettingsHelper.ClientSecret);
    var userIdentifier = new UserIdentifier(userObjectId, UserIdentifierType.UniqueId);

    // create auth context
    AuthenticationContext authContext = new AuthenticationContext(SettingsHelper.AzureAdAuthority, new ADALTokenCache(signInUserId));
    var result = await authContext.AcquireTokenSilentAsync(SettingsHelper.AzureAdGraphResourceURL, clientCredential, userIdentifier);

    return result.AccessToken;
}
````
  1. Modify the Index() method to be asynchronous by adding the async keyword and modifying the return type:
````c#
public async Task<ActionResult> Index() {}
````
  1. In the Index() method, use the HttpClient to call Graph Rest API to retrieve the first 20 events in the user's calendar:
````c#
var eventsResults = new List<MyEvent>();
var accessToken = await GetGraphAccessTokenAsync();
var restURL = string.Format("{0}me/events?$top=20&$skip=0", SettingsHelper.GraphResourceUrl);

try
{
    using (HttpClient client = new HttpClient())
    {
        var accept = "application/json";

        client.DefaultRequestHeaders.Add("Accept", accept);
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);

        using (var response = await client.GetAsync(restURL))
        {
            if (response.IsSuccessStatusCode)
            {
                var jsonresult = JObject.Parse(await response.Content.ReadAsStringAsync());

                foreach (var item in jsonresult["value"])
                {
                    eventsResults.Add(new MyEvent
                    {
                        Subject = !string.IsNullOrEmpty(item["subject"].ToString()) ? item["subject"].ToString() : string.Empty,
                        Start = !string.IsNullOrEmpty(item["start"]["dateTime"].ToString()) ? DateTime.Parse(item["start"]["dateTime"].ToString()) : new DateTime(),
                        End = !string.IsNullOrEmpty(item["end"]["dateTime"].ToString()) ? DateTime.Parse(item["end"]["dateTime"].ToString()) : new DateTime()

                    });
                }
            }                
        }
    }
}
catch (Exception el)
{
    el.ToString();
}

ViewBag.Events = eventsResults.OrderBy(c => c.Start);
````

The last line in the Index() method will return the default view for the controller so leave that as is.

  1. Save your changes.
  2. Finally, update the view to display the results.
  3. Within the CalendarController class, right click the View() at the end of the Index() method and select Add View.
  4. Within the Add View dialog, set the following values: 1. View Name: Index. 1. Template: Empty (without model).
> Leave all other fields blank & unchecked.
  1. Click Add.
  2. Within the Views/Calendar/Index.cshtml file, delete all the code in the file and replace it with the following code:
````html
@{
  ViewBag.Title = "Home Page";
}
<div>
  <table>
    <thead>
      <tr>
        <th>Subject</th>
        <th>Start</th>
        <th>End</th>
      </tr>
    </thead>
    <tbody>
      @foreach (var o365Event in ViewBag.Events) {
        <tr>
          <td>@o365Event.Subject</td>
          <td>@o365Event.Start</td>
          <td>@o365Event.End</td>
        </tr>
      }
    </tbody>
  </table>
</div>
````
  1. Save your changes.
  2. Run the application by pushing F5.
  3. You're now prompted to login (if you're not already logged in). Note that if you're not prompted to login immediately, click Sign in in the upper-right corner on the homepage.
  4. When prompted, login using your Organizational Account.
  5. If prompted, trust the permissions requested by the application.
  6. On the homepage of the application, click the Calendar link in the top navigation.
  7. Verify that events appear in the web application.

Congratulations! You have completed your first Office 365 API application.