Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: Azure AD configuration

Introduction

 

 

We’ll see how to setup Azure for being consumed by a SPA, how to setup and include in claims, roles and groups and see where are defined clientId and the tenantId required by ADAL for the SPA.

Create an application

First step is to create an application in the Azure portal, to do this go to “Azure Active directory” then “App registrations”:

Then click on “New application registration”:

Add a name, application type and the login pahe URL:

Then the application will apear in the list:

The Application Id is the clientId required for your SPA, remember where to find it 😉

Finally, find your tenantId, it could be your tenantName like this: “yourtenantname@onmicrosoft.com” but it doesn’t work for all, because if your account email is not a Microsoft one, such as mine “anthony.giretti@gmail.com” it will be formatted as “anthonygirettigmail.onmicrosoft.com” won’t work at all, so I suggest you to use your tenantGuid  that you can find there:

“Azure Active Directory -> Enterprise applications -> All Applications -> Properties”

The Object ID is your tenantId required for ADAL

Enabling users request access to the application

To do this go to: “Azure Active Directory -> Enterprise applications -> All Applications -> Self Service”

Then “Allow” users by selecting “Yes” and select a group for users asignations:

 

Enabling Implicit flow

To use it in a SPA you have to enable Implicit flow mode, here:

To do this, click on your application in the list, then click on “Manifest”:

Find oauthAllowImplicitFlow property and set its value to true:

Assign a group to an user and add it in claims

Let’s go there:

“Azure Active Directory -> Users -> All Users -> Select users in the list to edit them -> Groups”

Then go back to the “Application Manifest” and activate roles in claims by setting the property groupMembershipClaims to All:

 

Assign a role to an user and add it in claims

There is no UI to create a role, so you have to create them within the “Application Manifest”, like this:

You have to set isEnabled to true, displayName, id, description, value are up to you.

Now you have to assign it to users, and there is a UI for this here:

“Azure Active Directory -> Enterprise applications -> Users and groups”

Select a user to edit then assign to him a role:

Set your SPA post login page (callback page)

There is a UI to do this, but you can go to “Manifest” to add callback pages like this:

You can set several URI, for example one callback URI for each environment of your SPA:

 

We just configured Azure AD 🙂

Let’s go to setup our Angular 5 app: Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: Angular5 configuration

Streaming video asynchronously in ASP.NET Core 2 with Web API

 

Introduction

No matter what kind of project you are working on, at some point you will find the need to stream videos in your website or mobile apps for many purposes. So, we will learn how we can live stream our video content over HTTP, using ASP.NET Core 2 Web APIs.

Set up a service that get a Stream from a video hosted in the web using HttpClient

Example with videos hosted in Azure:

public class AzureVideoStreamService : IAzureVideoStreamService
{
   private HttpClient _client;

   public AzureVideoStreamService()
   {
      _client = new HttpClient();
   }

   public async Task<Stream> GetVideoByName(string name)
   {
      var urlBlob = string.Empty;
      switch (name)
      {
         case "earth":
         urlBlob = "https://anthonygiretti.blob.core.windows.net/videos/earth.mp4";
         break;
         case "nature1":
         urlBlob = "https://anthonygiretti.blob.core.windows.net/videos/nature1.mp4";
         break;
         case "nature2":
         default:
         urlBlob = "https://anthonygiretti.blob.core.windows.net/videos/nature2.mp4";
         break;
      }
      return await _client.GetStreamAsync(urlBlob);
   }

   ~AzureVideoStreamService()
   {
      if (_client != null)
      _client.Dispose();
   }
}
public interface IAzureVideoStreamService
{
   Task<Stream> GetVideoByName(string name);
}

Then don’t forget to register the service and it’s interface in Injection Dependency system

public void ConfigureServices(IServiceCollection services)
{
   services.AddMvc();
   services.AddScoped<IAzureVideoStreamService, AzureVideoStreamService>();
}

Set up a Streaming controller that stream videos using FileStreamResult object

FileStreamResult sends binary content to the response using a Stream instance

Example of an API that return a video by its name:

[Route("api/[controller]")]
public class StreamingController : Controller
{
   private IAzureVideoStreamService _streamingService;

   public StreamingController(IAzureVideoStreamService streamingService)
   {
      _streamingService = streamingService;
   }

   [HttpGet("{name}")]
   public async Task<FileStreamResult> Get(string name)
   {
      var stream = await _streamingService.GetVideoByName(name);
      return new FileStreamResult(stream, "video/mp4");
   }
}

Run the Web API to test….

 

 

Easy isn’t it ? 😉