ASP.NET Core MVC 6 앱 보안 - 애플리케이션에 인증 추가 - 1부

주변의 모든 사람들이 항상 React, Angular, Vue로 작성된 애플리케이션에 대해 이야기하지만 ASP.NET Core는 특히 엔터프라이즈 애플리케이션에서 살아 있고 많이 채택되고 있습니다.

이 시리즈에서는 ASP.NET MVC 6 응용 프로그램에서 Auth0을 사용하는 방법을 보여줍니다.

시작하자.

VS2022를 사용하여 빈 ASP.NET Core MVC 6 애플리케이션 만들기

Visual Studio 2022를 열고 템플릿 ASP.NET MVC를 검색합니다.
올바른 템플릿을 선택하고 "다음"을 클릭합니다.



애플리케이션 이름과 소스 코드를 저장할 경로를 선택합니다.
그런 다음 Framework .NET 6을 선택하고 마법사의 추가 정보 양식에서 모든 기본값을 유지합니다.



프로젝트가 생성되면 "launchSettings.json"파일을 열고 애플리케이션 url 값을 임시 메모장 파일에 저장합니다.
다음 단계에서 필요합니다.

Auth0으로 앱 등록

ASP.NET MVC 응용 프로그램을 변경하기 전에 Auth0으로 앱을 등록해야 합니다.
계정이 없는 경우 무료 계정을 만들 수 있습니다here .

대시보드에 있으면 응용 프로그램 섹션으로 이동하여 "응용 프로그램 만들기"를 클릭합니다.



새 화면에서 애플리케이션 이름을 제공하고 애플리케이션 유형 섹션에서 "일반 웹 애플리케이션"을 선택합니다.



그런 다음 "설정"탭을 클릭하고 Auth0 도메인 및 ClientID의 메모장 파일에 기록해 둡니다.
지금은 Client Secret 값이 필요하지 않습니다.



페이지를 조금 아래로 스크롤하여 Allowed Callback URLs 및 Allowed Logout URLs 안에 이전에 메모한 애플리케이션 URL 값을 삽입합니다.

프로젝트에 인증 추가

appsettings.json 파일을 열고 파일 끝에 Auth0 섹션을 추가합니다.

 "Auth0": {
    "Domain": "DOMAIN",
    "ClientId": "CLIENT_ID"
  }

자리 표시자를 메모장의 값으로 바꿉니다.

NuGet 패키지 관리자에서 Auth0.AspNetCore.Authentication이라는 패키지를 추가합니다.



프로젝트의 루트에서 "GlobalUsing.cs"라는 파일을 추가하고 다음 코드 줄을 추가합니다.

global using Auth0.AspNetCore.Authentication;

우리는 나중에 다른 사용을 추가할 것입니다.

Program.cs 파일에서 상단에 빌더 생성 후 아래 코드를 추가합니다.

builder.Services
    .AddAuth0WebAppAuthentication(options => {
        options.Domain = builder.Configuration["Auth0:Domain"];
        options.ClientId = builder.Configuration["Auth0:ClientId"];
    });

그런 다음 app.UseAuthorization() 위에 다음 코드 줄을 추가합니다. 성명.

app.UseAuthentication();

이제 실제 로그인 흐름을 구현할 준비가 되었습니다.

로그인 및 로그아웃 흐름 구현

먼저 GlobalUsing 파일에 다음 using 문을 추가합니다.

global using Microsoft.AspNetCore.Authentication;
global using Auth0.AspNetCore.Authentication;
global using Microsoft.AspNetCore.Mvc;
global using Microsoft.AspNetCore.Authorization;
global using Microsoft.AspNetCore.Authentication.Cookies;

이제 Controllers 폴더에 AccountController라는 새 컨트롤러를 만들 수 있습니다.
다음 코드를 복사하여 붙여넣을 수 있습니다.

public class AccountController : Controller
{
    public async Task Login(string returnUrl = "/")
    {
        var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
            .WithRedirectUri(returnUrl)
            .Build();

        await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
    }

  [Authorize]
  public async Task Logout()
  {
    var authenticationProperties = new LogoutAuthenticationPropertiesBuilder()
        .WithRedirectUri(Url.Action("Index", "Home"))
        .Build();

    await HttpContext.SignOutAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
    await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
  }
}

이제 인증 상태에 따라 UI를 변경할 차례입니다.
Views/Shared/_Layout.cshml에 있는 레이아웃 파일을 열고 다음 섹션을 아래와 같이 변경합니다.

                @if (User.Identity.IsAuthenticated)
                {
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Logout">Logout</a>
                            </li>
                        </ul>
                    </div>
                }
                else
                {
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>
                            </li>
                        </ul>
                    </div>
                }

애플리케이션 실행

이제 전체 로그인 및 로그아웃 흐름을 테스트할 준비가 되었습니다.
F5 키를 누르거나 디버그 단추를 사용하여 수동으로 Visual Studio에서 디버그 세션을 시작합니다.
다음과 같은 웹 페이지가 표시되어야 합니다.

로그인 링크를 클릭하면 애플리케이션이 Auth0 로그인 페이지로 리디렉션합니다.
새 사용자 계정을 만들려면 가입을 클릭하십시오.

아래 이미지에서 볼 수 있듯이 기본적으로 암호 복잡성 요약이 있습니다. 매우 유용하며 Auth0 대시보드에서 구성할 수도 있습니다.


새 계정을 등록하거나 기존 계정으로 로그인하면 메인 메뉴에 로그아웃 버튼이 표시되어 애플리케이션이 실행되고 있는 것을 볼 수 있습니다.

결론

이 시리즈의 첫 번째 부분에서는 Auth0을 사용하여 기본 권한 부여 흐름을 구현하는 방법을 배웠습니다.
다음 부분에서는 프로필 페이지를 추가하는 방법, 역할을 사용하는 방법 및 Auth0 및 ASP.NET MVC와 관련된 기타 멋진 기능을 배웁니다.

여기에서 소스 코드를 찾을 수 있습니다link.