Previous

Next

Call secured APIs from web applications

Completed

In this unit, you’ll learn how to create server-side web apps that enable users to sign in and grant the app permissions.

Create Microsoft identity-secured web apps

Now let's see how to create and configure a web app so that it can access a secured web API.

The first step is to register a new Microsoft Entra app in the Microsoft Entra admin center that will represent the web application.

The important part of the app registration is the creation of an app secret. This secret, along with the client ID of the app, are used by the web application to authenticate with Microsoft identity when it requests an access token.

Web apps that call web APIs are confidential client applications. That's why they register a secret (an application password or certificate) with Microsoft Entra ID.

Configure web applications to call secured APIs

The next step is to create the web application that will allow the user to sign in and then access the secured web API.

Create a new ASP.NET Core MVC application using the following command, followed by installing a few NuGet packages to support and Microsoft identity.

dotnet new mvc --auth SingleOrg
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Update web app to support user sign-in for Microsoft identity

Now update the project to associate it with the Microsoft Entra app you registered for the web app. Open the appsettings.json file and set the details of the registered Microsoft Entra application you previously created. This includes details such as:

• Domain: the domain of your Microsoft Entra tenant where you registered the Microsoft Entra application
• TenantId: the ID of your Microsoft Entra tenant where you registered the Microsoft Entra application
• ClientId: the ID of your Microsoft Entra application
• ClientSecret: the secret of your Microsoft Entra application

Next, configure the web app's authentication by updating the ConfigureServices() method in the Startup class for the project. This code will configure the web app's middleware to support Microsoft Entra ID for authentication and to obtain an ID token:

public void ConfigureServices(IServiceCollection services)
{
  services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
      .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
      .EnableTokenAcquisitionToCallDownstreamApi(Constants.ProductCatalogAPI.SCOPES)
      .AddInMemoryTokenCaches();

  services.AddControllersWithViews(options =>
  {
    var policy = new AuthorizationPolicyBuilder()
              .RequireAuthenticatedUser()
              .Build();
    options.Filters.Add(new AuthorizeFilter(policy));
  });
  services.AddRazorPages()
        .AddMicrosoftIdentityUI();
}

At this point, the web app is associated with the registered Microsoft Entra app and configured to support users signing in with their Microsoft identity account.

Add token acquisition

The next step is to create controllers to implement the pages on the site.

When the user requests one of these pages, the web app already has an access token for the user. This token is used, in addition to the web app's Microsoft Entra app details, to obtain a new access token. The resulting access token is intended to be used with the web API but is for the web app to use.

public CategoriesController(ITokenAcquisition tokenAcquisition)
{
  this.tokenAcquisition = tokenAcquisition;
}

[AuthorizeForScopes(Scopes = new[] { Constants.ProductCatalogAPI.CategoryReadScope })]
public async Task<ActionResult> Index()
{
  var client = new HttpClient();

  var accessToken = await tokenAcquisition.GetAccessTokenForUserAsync(Constants.ProductCatalogAPI.SCOPES);
  client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);

  var json = await client.GetStringAsync(url);

  var serializerOptions = new JsonSerializerOptions
  {
    PropertyNamingPolicy = JsonNamingPolicy.CamelCase
  };
  var categories = JsonSerializer.Deserialize(json, typeof(List<Category>), serializerOptions) as List<Category>;
  return View(categories);
}

Summary

In this unit, you learned how to create server-side web apps that enable users to sign in and grant the app permissions.

Continue