Tutorial: Add sign in to an application

In the previous tutorial, an ASP.NET Core project was created and configured for authentication. This tutorial will install the required packages and add code that implements authentication to the sign-in and sign-out experience.

In this tutorial:

• Identify and install the NuGet packages that are needed for authentication
• Implement authentication in the code
• Add the sign in and sign out experiences

Prerequisites

• Completion of the prerequisites and steps in Tutorial: Prepare an application for authentication.

Install identity packages

Identity related NuGet packages must be installed in the project for authentication of users to be enabled.

Visual Studio

1. In the top menu of Visual Studio, select Tools > NuGet Package Manager > Manage NuGet Packages for Solution.
2. With the Browse tab selected, search for and select Microsoft.Identity.Web.UI. Select the Project checkbox, and then select Install.
3. Repeat this for Microsoft.Identity.Web.Diagnostics and Microsoft.Identity.Web.DownstreamApi.

Visual Studio Code

1. In the Visual Studio Code terminal, navigate to NewWebAppLocal.

2. Enter the following commands to install the relevant NuGet packages:

   dotnet add package Microsoft.Identity.Web.UI
   dotnet add package Microsoft.Identity.Web.Diagnostics
   dotnet add package Microsoft.Identity.Web.DownstreamApi 
   

Visual Studio for Mac

1. In the top menu, select Tools > Manage NuGet Packages.
2. Search for Microsoft.Identity.Web, select the Microsoft.Identity.Web package, select Project, and then select Add Package.
3. Modify your search to read Microsoft.Identity.Web.UI and select Add Packages.
4. In the pop-up, ensure the correct project is selected, then select Ok.
5. Select Accept if additional License Acceptance windows appear.

Note

Visual Studio for Mac is scheduled for retirement by August 31, 2024 in accordance with Microsoft’s Modern Lifecycle Policy. Visual Studio for Mac 17.6 will continue to be supported until August 31, 2024, with servicing updates for security issues and updated platforms from Apple. Refer to What's happening to Visual Studio for Mac for more information.

Implement authentication and acquire tokens

1. Open Program.cs and replace the entire file contents with the following snippet:

   // <ms_docref_import_types>
   using Microsoft.AspNetCore.Authorization;
   using Microsoft.AspNetCore.Mvc.Authorization;
   using Microsoft.Identity.Web;
   using Microsoft.Identity.Web.UI;
   // </ms_docref_import_types>
   
   // <ms_docref_add_msal>
   WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
   IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');
   
   
   builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
       .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
           .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
           .AddInMemoryTokenCaches();
   // </ms_docref_add_msal>
   
   // <ms_docref_add_default_controller_for_sign-in-out>
   builder.Services.AddRazorPages().AddMvcOptions(options =>
       {
           var policy = new AuthorizationPolicyBuilder()
                         .RequireAuthenticatedUser()
                         .Build();
           options.Filters.Add(new AuthorizeFilter(policy));
       }).AddMicrosoftIdentityUI();
   // </ms_docref_add_default_controller_for_sign-in-out>
   
   // <ms_docref_enable_authz_capabilities>
   WebApplication app = builder.Build();
   
   app.UseAuthentication();
   app.UseAuthorization();
   // </ms_docref_enable_authz_capabilities>
   
   app.UseHttpsRedirection();
   app.UseStaticFiles();
   
   app.UseRouting();
   
   app.MapRazorPages();
   app.MapControllers();
   
   app.Run();
   

Add the sign in and sign out experience

After installing the NuGet packages and adding necessary code for authentication, add the sign-in and sign-out experiences.

Create the _LoginPartial.cshtml file

Visual Studio

1. Expand Pages, right-click Shared, and then select Add > Razor page.
2. Select Razor Page - Empty, and then select Add.
3. Enter _LoginPartial.cshtml for the name, and then select Add.

Visual Studio Code

In the Explorer bar, select Pages, right-click Shared, and select New File. Give it the name _LoginPartial.cshtml.

Visual Studio for Mac

1. Expand Pages, right-click Shared, and then select Add > Razor page.
2. Select Razor Page - Empty, and then select Add.
3. Enter _LoginPartial.cshtml for the name, and then select Add.

Edit the _LoginPartial.cshtml file

1. Open _LoginPartial.cshtml and add the following code for adding the sign in and sign out experience:

   @using System.Security.Principal
   
   <ul class="navbar-nav">
   @if (User.Identity?.IsAuthenticated == true)
   {
           <li class="nav-item">
               <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
           </li>
           <li class="nav-item">
               <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
           </li>
   }
   else
   {
           <li class="nav-item">
               <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
           </li>
   }
   </ul>
   

2. Open _Layout.cshtml and add a reference to _LoginPartial created in the previous step. This single line should be placed between </ul> and </div>:

       </ul>
       <partial name="_LoginPartial" />
   </div>
   

Next steps

Tutorial: Call an API and display results