ASP.NET 웹 페이지(Razor) 사이트에 보안 및 멤버 자격 추가

Tom FitzMacken

이 문서에서는 로그인하는 사용자만 일부 페이지를 사용할 수 있도록 ASP.NET 웹 페이지(Razor) 웹 사이트를 보호하는 방법을 설명합니다. (누구나 액세스할 수 있는 페이지를 만드는 방법도 확인할 수 있습니다.)

학습할 내용:

  • 일부 페이지의 경우 구성원에 대한 액세스를 제한할 수 있도록 등록 페이지와 로그인 페이지가 있는 웹 사이트를 만드는 방법입니다.
  • 공용 및 멤버 전용 페이지를 만드는 방법입니다.
  • 사이트에 대해 서로 다른 보안 권한이 있는 그룹인 역할을 정의하는 방법 및 역할에 사용자를 할당하는 방법입니다.
  • CAPTCHA를 사용하여 자동화된 프로그램(봇)이 멤버 계정을 만들지 못하도록 방지하는 방법입니다.

다음은 문서에 도입된 ASP.NET 기능입니다.

  • WebMatrix 시작 사이트 템플릿입니다.
  • WebSecurity 도우미 및 Roles 클래스입니다.
  • 도우미입니다 ReCaptcha .

자습서에서 사용되는 소프트웨어 버전

  • ASP.NET 웹 페이지(Razor) 2
  • WebMatrix 3
  • ASP.NET 웹 도우미 라이브러리

사용자가 로그인할 수 있도록 웹 사이트를 설정할 수 있습니다. 즉, 사이트에서 멤버 자격을 지원하도록 할 수 있습니다. 이는 여러 가지 이유로 유용할 수 있습니다. 예를 들어 사이트에는 구성원만 사용할 수 있어야 하는 페이지가 있을 수 있습니다. 경우에 따라 피드백을 보내거나 의견을 남기기 위해 사용자가 로그인하도록 요구할 수 있습니다.

웹 사이트에서 멤버십을 지원하더라도 사용자가 사이트의 일부 페이지를 사용하기 전에 반드시 로그인할 필요는 없습니다. 로그인하지 않은 사용자를 익명 사용자라고 합니다.

사용자는 웹 사이트에 등록한 다음 사이트에 로그인할 수 있습니다. 웹 사이트에는 사용자가 자신이 주장하는 사용자임을 확인하기 위해 사용자 이름(이메일 주소) 및 암호가 필요합니다. 로그인하고 사용자의 ID를 확인하는 이 프로세스를 인증이라고 합니다.

다음과 같은 다양한 방법으로 보안 및 멤버 자격을 설정할 수 있습니다.

  • WebMatrix를 사용하는 경우 시작 사이트 템플릿을 기반으로 새 사이트로 쉽게 만들 수 있습니다. 이 템플릿은 이미 보안 및 멤버 자격에 대해 구성되었으며 등록 페이지, 로그인 페이지 등이 이미 있습니다.

    템플릿에서 만든 사이트에는 사용자가 Facebook, Google 또는 Twitter와 같은 외부 사이트를 사용하여 로그인할 수 있는 옵션도 있습니다.

  • 기존 사이트에 보안을 추가하려는 경우 또는 시작 사이트 템플릿을 사용하지 않으려면 사용자 고유의 등록 페이지, 로그인 페이지 등을 만들 수 있습니다.

이 문서에서는 시작 사이트 템플릿을 사용하여 보안을 추가하는 방법인 첫 번째 옵션에 중점을 둡니다. 또한 사용자 고유의 보안을 구현하는 방법에 대한 몇 가지 기본 정보를 제공하고 이를 수행하는 방법에 대한 자세한 정보에 대한 링크를 제공합니다. 외부 로그인을 사용하도록 설정하는 방법에 대한 정보도 있습니다. 이 정보는 별도의 문서에서 자세히 설명합니다.

시작 사이트 템플릿을 사용하여 웹 사이트 보안 만들기

WebMatrix에서 시작 사이트 템플릿을 사용하여 다음이 포함된 웹 사이트를 만들 수 있습니다.

  • 멤버의 사용자 이름 및 암호를 저장하는 데 사용되는 데이터베이스입니다.
  • 익명(신규) 사용자가 등록할 수 있는 등록 페이지입니다.
  • 로그인 및 로그아웃 페이지입니다.
  • 암호 복구 및 재설정 페이지입니다.

다음 절차에서는 사이트를 만들고 구성하는 방법을 설명합니다.

  1. WebMatrix를 시작하고 빠른 시작 페이지에서 서식 파일에서 사이트를 선택합니다.

  2. 시작 사이트 템플릿을 선택한 다음 확인을 클릭합니다. WebMatrix는 새 사이트를 만듭니다.

  3. 왼쪽 창에서 파일 작업 영역 선택기를 클릭합니다.

  4. 웹 사이트의 루트 폴더에서 전역 설정을 포함하는 데 사용되는 특수 파일인 _AppStart.cshtml 파일을 엽니다. 여기에는 문자를 사용하여 // 주석 처리되는 몇 가지 문이 포함되어 있습니다.

    //WebMail.SmtpServer = "mailserver.example.com";
    //WebMail.EnableSsl = true;
    //WebMail.UserName = "username@example.com";
    //WebMail.Password = "your-password";
    //WebMail.From = "your-name-here@example.com";
    

    이러한 문은 전자 메일을 WebMail 보내는 데 사용할 수 있는 도우미를 구성합니다. 멤버 자격 시스템은 사용자가 등록하거나 암호를 변경하려는 경우 전자 메일을 사용하여 확인 메시지를 보낼 수 있습니다. (예를 들어 사용자가 등록한 후 등록 프로세스를 완료하기 위해 클릭할 수 있는 링크가 포함된 전자 메일을 받습니다.)

    전자 메일을 보내려면 ASP.NET 웹 페이지 사이트에 Email 추가에 설명된 대로 SMTP 서버에 액세스해야 합니다. 전자 메일 설정을 전자 메일을 보낼 수 있는 각 페이지에 반복적으로 코딩할 필요가 없도록 이 중앙 _AppStart.cshtml 파일에 저장합니다. (등록 데이터베이스를 설정하도록 SMTP 설정을 구성할 필요는 없습니다. 전자 메일 별칭에서 사용자의 유효성을 검사하고 사용자가 잊어버린 암호를 재설정하도록 하려면 SMTP 설정만 필요합니다.)

  5. 각 문 앞에서 을 제거하여 // 문의 주석 처리를 제거합니다.

    전자 메일 확인을 설정하지 않으려면 이 단계와 다음 단계를 건너뛸 수 있습니다. SMTP 값이 설정되지 않은 경우 확인 이메일 없이 새 계정을 즉시 사용할 수 있습니다.

  6. 코드에서 다음 전자 메일 관련 설정을 수정합니다.

    • 액세스 권한이 있는 SMTP 서버의 이름으로 설정합니다 WebMail.SmtpServer .

    • 로 설정된 상태로 둡니다 WebMail.EnableSsltrue. 이 설정은 SMTP 서버로 전송되는 자격 증명을 암호화하여 보호합니다.

    • SMTP 서버 계정의 사용자 이름으로 설정합니다 WebMail.UserName .

    • SMTP 서버 계정의 암호로 설정합니다 WebMail.Password .

    • 을 사용자 고유의 전자 메일 주소로 설정합니다 WebMail.From . 메시지가 전송되는 전자 메일 주소입니다.

      참고

      이러한 속성의 값에 대한 자세한 내용은 ASP.NET 웹 페이지 대한 Site-Wide동작 사용자 지정에서 Email 설정 구성을 참조하세요.

  7. _AppStart.cshtml을 저장하고 닫습니다.

  8. 브라우저에서 Default.cshtml 페이지를 실행합니다.

    security-membership-2

    참고

    속성이 의 instance 해야 한다는 오류가 표시되면 사이트가 ASP.NET 웹 페이지 ExtendedMembershipProvider멤버 자격 시스템(SimpleMembership)을 사용하도록 구성되지 않을 수 있습니다. 호스팅 공급자의 서버가 로컬 서버와 다르게 구성된 경우 이 문제가 발생할 수 있습니다. 이 문제를 해결하려면 사이트의 Web.config 파일에 다음 요소를 추가합니다.

    <appSettings>
        <add key="enableSimpleMembership" value="true" />
    </appSettings>
    

    이 요소를 요소의 <configuration> 자식으로 추가하고 요소의 피어로 추가합니다 <system.web> .

  9. 페이지의 오른쪽 위 모서리에서 등록 링크를 클릭합니다. Register.cshtml 페이지가 표시됩니다.

  10. 사용자 이름 및 암호를 입력한 다음 등록을 클릭합니다.

    security-membership-3

    시작 사이트 템플릿에서 웹 사이트를 만들 때 사이트의 App_Data 폴더에 StarterSite.sdf라는 데이터베이스가 만들어졌습니다. 등록하는 동안 사용자 정보가 데이터베이스에 추가됩니다. SMTP 값을 설정하면 등록을 완료할 수 있도록 사용한 전자 메일 주소로 메시지가 전송됩니다.

    security-membership-4

  11. 전자 메일 프로그램으로 이동하여 확인 코드와 사이트에 대한 하이퍼링크가 있는 메시지를 찾습니다.

  12. 하이퍼링크를 클릭하여 계정을 활성화합니다. 확인 하이퍼링크가 등록 확인 페이지를 엽니다.

    security-membership-5

  13. 로그인 링크를 클릭한 다음 등록한 계정을 사용하여 로그인합니다.

    로그인한 후 로그인등록 링크가 로그아웃 링크로 대체됩니다. 로그인 이름이 링크로 표시됩니다. (링크를 사용하면 암호를 변경할 수 있는 페이지로 이동합니다.)

    security-membership-6

    참고

    기본적으로 ASP.NET 웹 페이지는 사용자가 읽을 수 있는 텍스트로 명확한 텍스트로 서버에 자격 증명을 보냅니다. 프로덕션 사이트는 보안 HTTP(https://( 보안 소켓 계층 또는 SSL이라고도 함)를 사용하여 서버와 교환되는 중요한 정보를 암호화해야 합니다. 이전 예제와 같이 를 설정 WebMail.EnableSsl=true 하여 SSL을 사용하여 전자 메일 메시지를 보내야 할 수 있습니다. SSL에 대한 자세한 내용은 웹 통신 보안: 인증서, SSL 및 https:// 참조하세요.

사이트의 추가 멤버 자격 기능

사이트에는 사용자가 계정을 관리할 수 있는 다른 기능이 포함되어 있습니다. 사용자는 다음을 수행할 수 있습니다.

  • 암호를 변경합니다. 로그인한 후 사용자 이름(링크)을 클릭할 수 있습니다. 그러면 새 암호(Account/ChangePassword.cshtml)를 만들 수 있는 페이지로 이동합니다.
  • 잊어버린 암호를 복구합니다. 로그인 페이지에는 사용자가 이메일 주소를 입력할 수 있는 페이지(Account/ForgetPassword.cshtml)로 연결되는 링크(암호를 잊어버렸나요?)가 있습니다. 사이트에서 새 암호(Account/PasswordReset.cshtml)를 설정하기 위해 클릭할 수 있는 링크가 있는 전자 메일 메시지를 보냅니다.

나중에 설명한 대로 사용자가 외부 사이트를 사용하여 로그인할 수도 있습니다.

Members-Only 페이지 만들기

당분간 누구나 웹 사이트의 모든 페이지를 찾아볼 수 있습니다. 그러나 로그인한 사람(즉, 구성원에게)만 사용할 수 있는 페이지가 있을 수 있습니다. ASP.NET 로그인한 멤버만 액세스할 수 있는 페이지를 만들 수 있습니다. 일반적으로 익명 사용자가 멤버 전용 페이지에 액세스하려고 하면 로그인 페이지로 리디렉션됩니다.

이 절차에서는 로그인한 사용자만 사용할 수 있는 페이지가 포함된 폴더를 만듭니다.

  1. 사이트의 루트에서 새 폴더를 만듭니다. 리본에서 새로 만들기 아래의 화살표를 클릭한 다음 새 폴더를 선택합니다.

  2. 새 폴더의 이름을 멤버로 지정합니다.

  3. 멤버 폴더 내에서 새 페이지를 만들고 MembersInformation.cshtml이라는 이름을 지정합니다.

  4. 기존 콘텐츠를 다음 코드 및 태그로 바꿉다.

    @{
        if (!WebSecurity.IsAuthenticated) {
            Response.Redirect("~/Account/Login?returnUrl="
                + Request.Url.LocalPath);
        }
        Layout = "~/_SiteLayout.cshtml";
        Page.Title = "Members Information";
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Members Information</title>
      </head>
      <body>
        <p>You can only see this information if you've logged into the site.</p>
      </body>
    </html>
    

    이 코드는 IsAuthenticated 사용자가 로그인한 경우 를 반환 true 하는 개체의 WebSecurity 속성을 테스트합니다. 사용자가 로그인되지 않은 경우 코드는 를 호출 Response.Redirect 하여 사용자를 Account 폴더의 Login.cshtml 페이지로 보냅니다.

    리디렉션의 URL에는 현재 페이지의 경로를 설정하는 데 사용하는 Request.Url.LocalPath 쿼리 문자열 값이 포함됩니다returnUrl. 이와 같이 쿼리 문자열에서 값을 설정 returnUrl 하면(반환 URL이 로컬 경로인 경우) 로그인 페이지에서 사용자가 로그인한 후 이 페이지로 돌아갑니다.

    또한 코드는 _SiteLayout.cshtml 페이지를 레이아웃 페이지로 설정합니다. 레이아웃 페이지에 대한 자세한 내용은 ASP.NET 웹 페이지 사이트에서 일관된 레이아웃 만들기를 참조하세요.

  5. 사이트를 실행합니다. 여전히 로그인한 경우 페이지 맨 위에 있는 로그아웃 단추를 클릭합니다.

  6. 브라우저에서 /Members/MembersInformation 페이지를 요청합니다. 예를 들어 URL은 다음과 같이 표시될 수 있습니다.

    http://localhost:38366/Members/MembersInformation

    (포트 번호(38366)는 URL에서 다를 수 있습니다.)

    로그인하지 않았으므로 Login.cshtml 페이지로 리디렉션됩니다.

  7. 이전에 만든 계정을 사용하여 로그인합니다. MembersInformation 페이지로 다시 리디렉션됩니다. 로그인했기 때문에 이번에는 페이지 내용이 표시됩니다.

여러 페이지에 대한 액세스를 보호하려면 다음을 수행할 수 있습니다.

  • 각 페이지에 보안 검사 추가합니다.
  • 보호된 페이지를 유지하는 폴더에 _PageStart.cshtml 페이지를 만들고 보안 검사 추가합니다. _PageStart.cshtml 페이지는 폴더의 모든 페이지에 대한 일종의 전역 페이지 역할을 합니다. 이 기술은 ASP.NET 웹 페이지 대한 Site-Wide 동작 사용자 지정에 자세히 설명되어 있습니다.

사용자 그룹에 대한 보안 만들기(역할)

사이트에 구성원이 많은 경우 페이지를 표시하기 전에 각 사용자에 대한 권한을 개별적으로 검사 것은 효율적이지 않습니다. 대신 수행할 수 있는 작업은 개별 멤버가 속한 그룹 또는 역할을 만드는 것입니다. 그런 다음 역할에 따라 권한을 검사 수 있습니다. 이 섹션에서는 "관리자" 역할을 만든 다음 해당 역할에 속한 사용자가 액세스할 수 있는 페이지를 만듭니다.

ASP.NET 멤버 자격 시스템은 역할을 지원하도록 설정됩니다. 그러나 멤버 자격 등록 및 로그인과 달리 시작 사이트 템플릿에는 역할을 관리하는 데 도움이 되는 페이지가 포함되어 있지 않습니다. (역할 관리는 사용자 작업이 아닌 관리 작업입니다.) 그러나 WebMatrix의 멤버 자격 데이터베이스에 그룹을 직접 추가할 수 있습니다.

  1. WebMatrix에서 데이터베이스 작업 영역 선택기를 클릭합니다.

  2. 왼쪽 창에서 StarterSite.sdf 노드를 열고 테이블 노드를 연 다음 webpages_Roles 테이블을 두 번 클릭합니다.

    security-membership-7

  3. "admin"이라는 역할을 추가합니다. RoleId 필드가 자동으로 채워집니다. (기본 키이며 ASP.NET 웹 페이지 사이트에서 데이터베이스 작업 소개에 설명된 대로 식별 필드로 설정되었습니다.)

  4. RoleId 필드의 값을 기록해 둡니다. (정의하는 첫 번째 역할인 경우 1이 됩니다.)

    security-membership-8

  5. webpages_Roles 테이블을 닫습니다.

  6. UserProfile 테이블을 엽니다.

  7. 테이블에 있는 사용자 중 하나 이상의 UserId 값을 적어 두고 테이블을 닫습니다.

  8. webpages_UserInRoles 테이블을 열고 UserIDRoleID 값을 테이블에 입력합니다. 예를 들어 사용자 2를 "관리자" 역할에 배치하려면 다음 값을 입력합니다.

    security-membership-9

  9. webpages_UsersInRoles 테이블을 닫습니다.

    이제 역할이 정의되었으므로 해당 역할에 있는 사용자가 액세스할 수 있는 페이지를 구성할 수 있습니다.

  10. 웹 사이트 루트 폴더에서 AdminError.cshtml 이라는 새 페이지를 만들고 기존 콘텐츠를 다음 코드로 바꿉니다. 페이지에 대한 액세스가 허용되지 않는 경우 사용자가 리디렉션되는 페이지입니다.

    @{
        Layout = "~/_SiteLayout.cshtml";
        PageData["Title"] = "Admin-only Error";
    }
    <p>You must log in as an admin to access that page.</p>
    
  11. 웹 사이트 루트 폴더에서 AdminOnly.cshtml 이라는 새 페이지를 만들고 기존 코드를 다음 코드로 바꿉니다.

    @{
        Layout = "~/_SiteLayout.cshtml";
        PageData["Title"] = "Administrators only";
    }
    
    @if ( Roles.IsUserInRole("admin")) {
        <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span>
    }
    else {
         Response.Redirect("~/AdminError");
    }
    

    메서드는 Roles.IsUserInRole 현재 사용자가 지정된 역할의 멤버인 경우 를 반환 true 합니다(이 경우 "관리자" 역할).

  12. 브라우저에서 Default.cshtml 을 실행하지만 로그인하지 않습니다. (이미 로그인한 경우 로그아웃합니다.)

  13. 브라우저의 주소 표시줄에서 URL에 AdminOnly 를 추가합니다. 즉, AdminOnly.cshtml 파일을 요청합니다. 현재 "admin" 역할의 사용자로 로그인되지 않았기 때문에 AdminError.cshtml 페이지로 리디렉션됩니다.

  14. Default.cshtml로 돌아가서 "admin" 역할에 추가한 사용자로 로그인합니다.

  15. AdminOnly.cshtml 페이지로 이동합니다. 이번에는 페이지가 표시됩니다.

자동화된 프로그램이 웹 사이트에 가입하지 못하도록 방지

로그인 페이지는 자동화된 프로그램( 웹 로봇 또는 이라고도 함)이 웹 사이트에 등록하는 것을 멈추지 않습니다. 이 절차에서는 등록 페이지에 대해 ReCaptcha 테스트를 사용하도록 설정하는 방법을 설명합니다.

/media/38777/ch16securitymembership-18.jpg

  1. ReCaptcha 서비스에 웹 사이트를 등록합니다. 등록을 완료하면 공개 키와 프라이빗 키가 표시됩니다.

  2. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  3. 계정 폴더에서 Register.cshtml이라는 파일을 엽니다.

  4. 페이지 위쪽의 코드에서 다음 줄을 찾아 주석 문자를 제거하여 // 주석 처리를 제거합니다.

    if (!ReCaptcha.Validate("PRIVATE_KEY")) {
        ModelState.AddError("recaptcha", "Captcha response was not correct");
    }
    
  5. 를 사용자 고유의 ReCaptcha 프라이빗 키로 대체 PRIVATE_KEY 합니다.

  6. 페이지의 태그에서 페이지 태그의 @* 다음 줄에서 및 *@ 주석 달기 문자를 제거합니다.

    @ReCaptcha.GetHtml("PUBLIC_KEY", theme: "white")
    @Html.ValidationMessage("recaptcha")
    
  7. PUBLIC_KEY를 원하는 키로 바꿉니다.

  8. 아직 제거하지 않은 경우 "CAPTCHA 확인을 사용하도록 설정하려면..."으로 시작하는 텍스트가 포함된 요소를 제거 <div> 합니다. (전체 <div> 요소 및 해당 내용을 제거합니다.)

  9. 브라우저에서 Default.cshtml 을 실행합니다. 사이트에 로그인한 경우 로그아웃 링크를 클릭합니다.

  10. 등록 링크를 클릭하고 CAPTCHA 테스트를 사용하여 등록을 테스트합니다.

    security-membership-10

도우미에 ReCaptcha 대한 자세한 내용은 CATPCHA를 사용하여 자동화된 프로그램(봇)이 ASP.NET 웹 사이트를 사용하지 못하도록 방지를 참조하세요.

사용자가 외부 사이트를 사용하여 로그인하도록 허용

시작 사이트 템플릿에는 사용자가 Facebook, Windows Live, Twitter, Google 또는 Yahoo를 사용하여 로그인할 수 있는 코드와 태그가 포함되어 있습니다. 기본적으로 이 기능은 사용하도록 설정되지 않습니다. 사용자가 이러한 외부 공급자를 사용하여 로그인하도록 하는 일반적인 절차는 다음과 같습니다.

  • 지원하려는 외부 사이트를 결정합니다.
  • 필요한 경우 해당 사이트로 이동하여 로그인 앱을 설정합니다. (예를 들어 Facebook 로그인을 허용하려면 이 작업을 수행해야 합니다.)
  • 사이트에서 공급자를 구성합니다. 대부분의 경우 _AppStart.cshtml 파일에서 일부 코드의 주석 처리를 제거하면 됩니다.
  • 사용자가 로그인을 위해 외부 사이트에 연결할 수 있도록 하는 태그를 등록 페이지에 추가합니다. 일반적으로 필요한 태그를 복사하고 텍스트를 약간 변경할 수 있습니다.

ASP.NET 웹 페이지 사이트의 외부 사이트에서 로그인 사용 항목에서 단계별 지침을 찾을 수 있습니다.

사용자가 다른 사이트에서 로그인한 후 사용자는 사이트로 돌아와 해당 로그인을 사이트와 연결 합니다. 실제로 사용자의 외부 로그인에 대한 멤버 자격 항목이 사이트에 만들어집니다. 이렇게 하면 외부 로그인과 함께 멤버 자격의 일반 기능(예: 역할)을 사용할 수 있습니다.

기존 웹 사이트에 보안 추가

이 문서의 앞부분에서 절차는 웹 사이트 보안의 기초로 스타터 사이트 템플릿을 사용하는 것입니다. 시작 사이트 서식 파일에서 시작하거나 해당 템플릿을 기반으로 사이트에서 관련 페이지를 복사하는 것이 실용적이지 않은 경우 직접 코딩하여 자체 사이트에서 동일한 유형의 보안을 구현할 수 있습니다. 등록, 로그인 등과 같은 유형의 페이지를 만든 다음 도우미 및 클래스를 사용하여 멤버 자격을 설정합니다.

기본 프로세스는 블로그 게시물에서 ASP.NET Razor 보안을 구현하는 가장 기본적인 방법에 설명되어 있습니다. 대부분의 작업은 도우미의 다음 메서드와 속성을 WebSecurity 사용하여 수행됩니다.

역할을 관리하려면 블로그 항목에 설명된 대로 역할멤버 자격 클래스를 사용할 수 있습니다.

추가 리소스