Access Office 365 REST APIs Using .NET Libraries

WEBINAR: On-demand Event

Unleash Your DevOps Strategy by Synchronizing Application and Database Changes REGISTER >

Introduction

Microsoft's new Cloud offering of Office 365 APIs is very popular now a days among developers. Developers can access the Office 365 REST APIs by using libraries available for .NET and JavaScript. Along with these libraries, the Visual Studio 2017 release also brings some key updates to developers for the tooling experience, making it easier to interact with Office 365 services. In this post, I will demonstrate how to log in to Office 365 and access REST services from a Web application.

How the Application Works

When users visit the sample Web site I have developed, they will be redirected to the Office 365 Web site for authentication. After successful authentication, the user will be redirected back to my Web site with a code to request a REST API for a token. The user also will get the account information details with the token. Follow the upcoming steps to create your own app.

Step 1

Visit this link to register your Web application.

Please sign in with Microsoft account credentials when prompted.

Register your app
Figure 1: Register your app

Step 2

Add a meaningful name of your application. Click Create.

Name your application
Figure 2: Name your application

Step 3

Select the server site Web application and ASP.NET. You can change the selection if you are not adding Office 365 authentication for a Web application.

Platform and Technology selection
Figure 3: Platform and Technology selection

Step 4

Next, click Setup.

Set up the app
Figure 4: Set up the app

Step 5

You now can download the sample's Visual Studio project code and copy/paste the authentication code in your Web application. I have mentioned the necessary code snippets and steps to add sample C# authentication code in your Web application.

To add authentication components, go to Visual Studio Editor: Tools > Nuget Package Manager > Package Manager Console > add OWIN middleware NuGet packages and install. Alternatively, you can execute the following install commands in the package manager console manager. Installed OWIN libraries enable single sign-on (SSO) using an OpenID Connect via cookie-based authentication.

Install-Package Microsoft.Owin.Security.OpenIdConnect
Install-Package Microsoft.Owin.Security.Cookies
Install-Package Microsoft.Owin.Host.SystemWeb

Step 6

Next, you have add a new Startup.cs class to your project that will be executed automatically when the IIS process starts. This class is required for OWIN middleware to configure a OpenID connect authentication.

When creating, make sure the class selected is an OWIN startup class and not a standard C# class. Also, add OWIN and Microsoft.IdentityModel references to Startup.cs.

using Microsoft.Owin;
using Owin;
using Microsoft.IdentityModel.Protocols;
using Microsoft.Owin.Security;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.OpenIdConnect;
using Microsoft.Owin.Security.Notifications;

The following is a code snippet of the startup class.

public class Startup
{
   string clientId = System.Configuration.ConfigurationManager
      .AppSettings["ClientId"];
   string redirectUri = System.Configuration.ConfigurationManager
      .AppSettings["RedirectUri"];
   static string tenant = System.Configuration
      .ConfigurationManager.AppSettings["Tenant"];
   string authority = String.Format(System.Globalization
      .CultureInfo.InvariantCulture,
      System.Configuration.ConfigurationManager.AppSettings
      ["Authority"], tenant);
   public void Configuration(IAppBuilder app)
   {
      app.SetDefaultSignInAsAuthenticationType
         (CookieAuthenticationDefaults.AuthenticationType);

      app.UseCookieAuthentication
         (new CookieAuthenticationOptions());
      app.UseOpenIdConnectAuthentication(
         new OpenIdConnectAuthenticationOptions
         {
            ClientId = clientId,
            Authority = authority,
            RedirectUri = redirectUri,
            PostLogoutRedirectUri = redirectUri,
            Scope = OpenIdConnectScopes.OpenIdProfile,
            ResponseType = OpenIdConnectResponseTypes.IdToken,
            TokenValidationParameters = new
               System.IdentityModel.Tokens
                  .TokenValidationParameters() {
               ValidateIssuer = false },

            Notifications = new
               OpenIdConnectAuthenticationNotifications
            {
               AuthenticationFailed = OnAuthenticationFailed
            }
         }
      );
   }


   private Task OnAuthenticationFailed
      (AuthenticationFailedNotification<OpenIdConnectMessage,
      OpenIdConnectAuthenticationOptions> context)
   {
      context.HandleResponse();
      context.Response.Redirect("/?errormessage=" +
         context.Exception.Message);
      return Task.FromResult(0);
   }
}

Step 7

Next, add a controller to your project to handle sign-in and sign-out requests. Also, add OWIN references to the controller class.

using Microsoft.Owin.Security;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.OpenIdConnect;

The following are code snippets of two methods to handle the sign-in and sign-out processes.

public void SignIn()
{
   if (!Request.IsAuthenticated)
   {
      HttpContext.GetOwinContext().Authentication.Challenge(
         new AuthenticationProperties { RedirectUri = "/" },
         OpenIdConnectAuthenticationDefaults.AuthenticationType);
   }
}

public void SignOut()
{
   HttpContext.GetOwinContext().Authentication.SignOut(
      OpenIdConnectAuthenticationDefaults.AuthenticationType,
      CookieAuthenticationDefaults.AuthenticationType);
}

Now, create the application home page for sign-in users. Name it Index page. Add the following HTML code to the Index page.

<html>
<head>
   <meta name = "viewport" content="width=device-width" />
   <title>Sign-In with Microsoft Guide</title>
</head>
<body>
@if (!Request.IsAuthenticated)
{
   < !--If the user is not authenticated,
        display the sign-in button-- >
      < a href = "@Url.Action("SignIn", "Home")"
        style = "text-decoration: none;" >
         < svg xmlns = "http://www.w3.org/2000/svg"
           xml: space = "preserve" width = "300px"
           height = "50px" viewBox = "0 0 3278 522"
           class="SignInButton">
            <style type = "text/css" >.fil0:hover
             {fill: #4B4B4B;} .fnt0 {font-size: 260px;
             font-family: 'Segoe UI Semibold', 'Segoe UI';
             text-decoration: none;}</style>
            <rect class="fil0" x="2" y="2" width="3174"
                  height="517" fill="black" />
            <rect x = "150" y="129" width="122"
                  height="122" fill="#F35325" />
            <rect x = "284" y="129" width="122"
                  height="122" fill="#81BC06" />
            <rect x = "150" y="263" width="122"
                  height="122" fill="#05A6F0" />
            <rect x = "284" y="263" width="122"
                  height="122" fill="#FFBA08" />
            <text x = "470" y="357" fill="white"
                  class="fnt0">Sign in with Microsoft</text>
         </svg>
      </a>
}
else
{
   <span><br/>Hello @System.Security.Claims
      .ClaimsPrincipal.Current.FindFirst("name").Value;</span>
   <br /><br />
   @Html.ActionLink("See Your Claims", "Index", "Claims")
   <br /><br />
   @Html.ActionLink("Sign out", "SignOut", "Home")
}
@if(!string.IsNullOrWhiteSpace
   (Request.QueryString["errormessage"]))
{
   <div style = "background-color:red;color:white;
    font-weight: bold;" >
    Error: @Request.QueryString["errormessage"]</div>
}
</body>
</html>

Next, add a controller to display the user's claims. Next is the code of your controller class.

[Authorize]
public class ClaimsController : Controller
{
   /// <summary>
      /// Add user's claims to viewbag
   /// </summary>
   /// <returns></returns>
   public ActionResult Index()
   {
      var claimsPrincipalCurrent = System.Security.Claims
         .ClaimsPrincipal.Current;
      // You get the user's first and last name below:
      ViewBag.Name =
         claimsPrincipalCurrent.FindFirst("name").Value;

      // The 'preferred_username' claim can be used for showing
      // the username
      ViewBag.Username = claimsPrincipalCurrent.FindFirst
         ("preferred_username").Value;

      // The subject claim can be used to uniquely identify the
      // user across the Web
      ViewBag.Subject = claimsPrincipalCurrent.FindFirst
         (System.Security.Claims.ClaimTypes.NameIdentifier).Value;

      // TenantId is the unique Tenant ID - which represents an
      // organization in Azure AD
      ViewBag.TenantId = claimsPrincipalCurrent.FindFirst
         ("http://schemas.microsoft.com/identity/claims/tenantid")
         .Value;

      return View();
   }
}

Add a view to display the user's claims details. Add the following HTML to it.

<html>
<head>
   <meta name = "viewport" content="width=device-width" />
   <title>Sign-In with Microsoft Sample</title>
   <link href = "@Url.Content("~/Content/bootstrap.min.css")"
         rel= "stylesheet" type= "text/css" />
</ head >
< body style= "padding:50px" >
   < h3 > Main Claims:</h3>
   <table class="table table-striped table-bordered
                 table-hover">
      <tr><td>Name</td><td>@ViewBag.Name</td></tr>
      <tr><td>Username</td><td>@ViewBag.Username</td></tr>
      <tr><td>Subject</td><td>@ViewBag.Subject</td></tr>
      <tr><td>TenantId</td><td>@ViewBag.TenantId</td></tr>
   </table>
   <br />
   <h3>All Claims:</h3>
   <table class="table table-striped table-bordered
                       table-hover table-condensed">
      @foreach(var claim in System.Security.Claims.ClaimsPrincipal
         .Current.Claims)
      {
         < tr >< td > @claim.Type </ td >
               < td > @claim.Value </ td ></ tr >
      }
   </table>
   <br />
   <br />
   @Html.ActionLink("Sign out", "SignOut", "Home", null,
      new { @class = "btn btn-primary" })
</body>
</html>

Step 8

Now, configure your ASP.NET Web App with the application's registration information, SSL, and RedirectUri.

Configure for successful redirection
Figure 5: Configure for successful redirection

Add the following entries in the Web application's web.config file located in the root's folder. The RedirectUri value will be different for your application.

<add key = "ClientId"
     value="669eabf8-0497-4ee4-a3ef-8b5279532fgt" />
<add key = "RedirectUri"
     value="http://localhost/MyNewWebApplication" />
<add key = "Tenant" value="common" />
<add key = "Authority"
     value="https://login.microsoftonline.com/{0}/v2.0" />

Step 9

Execute your code and let the browser open and direct you to http://localhost/MyNewWebApplication. Now, click the Sign in button and complete the sign-in process. After a successful sign-in, the user will be redirected to the home page of the sample Web site. To view the user's claims, click the hyperlink; you should see a table containing the basic logged-in user properties.

Summary

For more information about the Office 365 authentication process and code snippets, refer to this MSDN Web site.



About the Author

Tapas Pal

I am working in Microsoft Technology for last 15 years and presently working with Cognizant Technology Solutions, India as Senior Architect. I have completed TOGAF 9.1,Microsoft Certification on .NET 1.1 , .NET 2.0, SQL Server 2005 and Sharepoint. Please visit my Blog - http://tapas-pal.blogspot.com/

Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date