자습서: 애플리케이션에 로그인 추가

이전 자습서에서는 인증을 위해 ASP.NET Core 프로젝트를 만들고 구성했습니다. 이 자습서에서는 필요한 패키지를 설치하고 로그인 및 로그아웃 환경에 인증을 구현하는 코드를 추가합니다.

이 자습서에서:

• 인증에 필요한 NuGet 패키지 식별 및 설치
• 코드에서 인증 구현
• 로그인 및 로그아웃 환경 추가

필수 조건

• 자습서: 인증을 위한 애플리케이션 준비의 필수 조건 및 단계를 완료합니다.

ID 패키지 설치

사용자 인증을 사용하도록 설정하려면 프로젝트에 ID 관련 NuGet 패키지를 설치해야 합니다.

Visual Studio

1. Visual Studio 메뉴에서 도구 > NuGet 패키지 관리자 > 솔루션용 NuGet 패키지 관리를 선택합니다.
2. 찾아보기 탭을 선택한 상태에서 Microsoft.Identity.Web.UI를 검색하여 선택합니다. 프로젝트 확인란을 선택하고 설치를 선택합니다.
3. Microsoft.Identity.Web.Diagnostics 및 Microsoft.Identity.Web.DownstreamApi에 이 작업을 반복합니다.

Visual Studio Code

1. Visual Studio Code 터미널에서 NewWebAppLocal로 이동합니다.

2. 다음 명령을 입력하여 관련 NuGet 패키지를 설치합니다.

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

Mac용 Visual Studio

1. 상단 메뉴에서 도구>NuGet 패키지 관리를 선택합니다.
2. Microsoft.Identity.Web을 검색하고, Microsoft.Identity.Web 패키지를 선택하고, 프로젝트를 선택한 다음, 패키지 추가를 선택합니다.
3. 검색을 수정하여 Microsoft.Identity.Web.UI를 읽고 패키지 추가를 선택합니다.
4. 팝업에서 올바른 프로젝트가 선택되어 있는지 확인하고 확인을 선택합니다.
5. 추가 라이선스 승인 창이 표시되면 동의를 선택합니다.

참고 항목

Mac용 Visual Studio Microsoft 에 따라 2024년 8월 31일에 사용 중지될 예정입니다. 최신 수명 주기 정책입니다. Mac용 Visual Studio 17.6은 2024년 8월 31일까지 계속 지원되며, Apple의 보안 문제 및 업데이트된 플랫폼에 대한 서비스 업데이트가 제공됩니다. 자세한 내용은 Mac용 Visual Studio에 진행되고 있는 작업을 참조하세요.

인증 구현 및 토큰 획득

1. Program.cs를 열고 전체 파일 콘텐츠를 다음 코드 조각으로 바꿉니다.

   // <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();
   

로그인 및 로그아웃 환경 추가

NuGet 패키지를 설치하고 인증에 필요한 코드를 추가한 후 로그인 및 로그아웃 환경을 추가합니다.

_LoginPartial.cshtml 파일 만들기

Visual Studio

1. 페이지를 확장하고 공유를 마우스 오른쪽 단추로 클릭한 다음 >Razor 페이지 추가를 선택합니다.
2. Razor 페이지 - 비어 있음을 선택한 다음 추가를 선택합니다.
3. 이름으로 _LoginPartial.cshtml을 입력한 다음 추가를 선택합니다.

Visual Studio Code

Explorer 표시줄에서 페이지를 선택하고 공유를 마우스 오른쪽 단추로 클릭한 다음 새 파일을 선택합니다. 이름을 _LoginPartial.cshtml로 지정합니다.

Mac용 Visual Studio

1. 페이지를 확장하고 공유를 마우스 오른쪽 단추로 클릭한 다음 >Razor 페이지 추가를 선택합니다.
2. Razor 페이지 - 비어 있음을 선택한 다음 추가를 선택합니다.
3. 이름으로 _LoginPartial.cshtml을 입력한 다음 추가를 선택합니다.

_LoginPartial.cshtml 파일 편집

1. _LoginPartial.cshtml을 열고 로그인 및 로그아웃 환경을 추가하기 위한 다음 코드를 추가합니다.

   @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. _Layout.cshtml을 열고 이전 단계에서 만든 _LoginPartial에 대한 참조를 추가합니다. 이 단일 줄은 </ul>과(와) </div>사이에 배치되어야 합니다.

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

다음 단계

자습서: API 호출 및 결과 표시