Mvc5 개별사용자 인증에 추가 정보란 만들기

사실 저는 Mvc로 작업할 일이 그다지없습니다;;

하지만 그래서 자주 잊어먹죠..ㅡ_ㅡ;;

그래서 기록차 남겨놓습니다.

Mvc가 버전업할때마다 이 부분이 조금씩 업그레이드되는 덕분에..

그 수정위치가 조금씩 바뀐것 같네요.

분명히 5버전으로 넘어왔을때도 체크 했었는데...

엊그제 수정할 부분이 있어서 작업하는 도중에 몇번 삽질...

파일 다 뒤져보고 완료...ㅠ

그래서 기록차 남겨놓습니다.

이 글이 어느 누군가에게는 도움이 되길...

그 누군가가 나라는건 함은정(?)..ㅋ

또한 사진을 클릭하시면 정말 보기 좋은..

큼직막한 사진이 '또옹'하고 팝업됩니다.

참고하세요.ㅋ

1. 새 프로젝트 생성 및 기본 설정

위 그림과 같이 새 프로젝트를 생성합니다.

어렵지않아요~.,~

MVC를 이용할겁니다. 인증은 [개별 사용자 계정]으로 해줍니다.

새 프로젝트가 생성되면..

/Web.config 에 가서 데이터베이스 연결부분을 자신에 맞게 손보자. 물론 기본값으로 쓰실분은 그렇게하셔도 된다.

2. Models 수정

기본 인증에는 유저의 정보를 UserName 과 Password 만 입력 받는다..

여기서 UserName은 보면은 사용자 이름이구나.. 싶지만...

유저의 아이디 입니다.

아이디를 이름으로 만들면... 이름일수도...;;

일단 이게 마음에 안든다고 UserId를 하나 만들어서 이걸 아이디로 쓰고..

UserName를 리얼네임으로 해서 써도 무방하나...

그냥 내 몸은 프로그램에 맞추는게 편합니다.

왜냐.. UserName을 기본키로해서 링크 연결이 되는데...

이걸 다 UserId로 바꿀려면...

해보지는 않았지만.. 이쯤에서 그냥 포기..;;

잡설이 길었는데..

일단 기본 정보에서 추가하고자하는 부분은....

닉네임, 연락처 그리고 이메일 정도만 추가하겠습니다.

그리고 덧붙여서... 마이그레이션 따윈 없을 예정입니다.

그냥 테이블 드랍 시켜서 다시 작업하세요.

그게 편합니다.

우리가 많은 작업할껏도 아니고..

아주 순수하게 기본 사용자 정보만 몇개 더 받을 뿐입니다.ㅋㅋ

/Models/AccountViewModels.cs 파일을 엽니다.

/Models/AccountViewModels.cs

public class RegisterViewModel

{

    [Required]

    [Display(Name = "사용자 이름")]

    public string UserName { get; set; }

    [Required]

    [StringLength(100, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 6)]

    [DataType(DataType.Password)]

    [Display(Name = "암호")]

    public string Password { get; set; }

    [DataType(DataType.Password)]

    [Display(Name = "암호 확인")]

    [Compare("Password", ErrorMessage = "암호와 확인 암호가 일치하지 않습니다.")]

    public string ConfirmPassword { get; set; }z

}

이렇게 되어 있는 부분이 보일겁니다.

이 부분이 회원 가입시 관련된 부분입니다.

이 부분을 아래와 같이 변경하도록 하겠습니다.

/Models/AccountViewModels.cs

public class RegisterViewModel

{

    [Required]

    [Display(Name = "ID")]

    public string UserName { get; set; }

    [Required]

    [StringLength(100, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 4)]

    [DataType(DataType.Password)]

    [Display(Name = "암호")]

    public string Password { get; set; }

    [DataType(DataType.Password)]

    [Display(Name = "암호 확인")]

    [Compare("Password", ErrorMessage = "암호와 확인 암호가 일치하지 않습니다.")]

    public string ConfirmPassword { get; set; }

    [Required]

    [StringLength(20, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 2)]

    [Display(Name = "닉네임")]

    public string UserNick { get; set; }

    public string Hp1 { get; set; }

    [Required]

    [StringLength(4, ErrorMessage = "{0}은(는) {2}자 이상 ~ {1}자 이하여야 합니다.", MinimumLength = 3)]

    [Display(Name = "휴대폰 가운데 번호")]

    public string Hp2 { get; set; }

    [Required]

    [StringLength(4, ErrorMessage = "{0}은(는) {2}자 여야 합니다.", MinimumLength = 4)]

    [Display(Name = "휴대폰 마지막 번호")]

    public string Hp3 { get; set; }

    [Required]

    [StringLength(50)]

    [DataType(DataType.EmailAddress)]

    [Display(Name = "이메일")]

    public string Email { get; set; }

}

이렇게 변경하면 된다.

친절하게도 추가되거나 변경된 부분은 눈에 띄게 표시해드렸음.

맨 위에부터 설명하자면..

[Display(Name = "사용자 이름")] 이라고 되어 있는 부분이었는데..

사용자 이름을 ID로 변경해줬다.

등록페이지가 호출되었을때 사용자 이름을 적는칸으로 오인될 수 있기 때문에..

자잘한 수정을 해줬다.

물론 여기만 수정하면 되는건 아니다. 수정 페이지도 수정해줘야 하고... 로그인 페이지도 수정해줘야 하지만..

우선은 등록할때 사용자 정보를 더 받기 위함이 목적이기에 여기만 수정해보도록 한다.

다음은 이부분입니다.

[StringLength(100, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 6)]

패스워드 최소 길이를 4자이상으로 바꿨습니다. 6자에서 4자. 딱히 이유는 없습니다.

대국민 비밀번호 1234 를 사용할수 있게 해주는 친절한 보안의식없는 어느 한 개발자의 말도안되는 배려입니다..ㅡ_ㅡ;

[Required]

[StringLength(20, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 2)]

[Display(Name = "닉네임")]

public string UserNick { get; set; }

[Required] 이부분은 필수입력 항목이란 뜻입니다.

[StringLength(20, ErrorMessage = "{0}은(는) {2}자 이상이어야 합니다.", MinimumLength = 2)]

이부분은 최대 20자까지 가능. 최소 2자 이상을 입력 받는다는 구문이구요. 그걸 어길시 나오는 멘트를 정하시면 됩니다.

형식은 크게 어렵지않으니간 패스~

나머지도 별로 크게 어려운게 없습니다...

대충 넘어가고..

이메일 부분에 보시면

[Required]

[StringLength(50)]

[DataType(DataType.EmailAddress)]

[Display(Name = "이메일")]

public string Email { get; set; }

이 중에서 DataType을 정하는 부분에서 저렇게 EmailAddress로 정해줍니다.

이로써 AccountViewModels 수정이 완료되었습니다.

하지만 이게 끝이 아닙니다.

한군데를 더 수정해야합니다.

/Models/IdentityModels.cs

/Models/IdentityModels.cs

using Microsoft.AspNet.Identity.EntityFramework;

namespace Mvc5TestUser.Models

{

    // You can add profile data for the user by adding more properties to your ApplicationUser class, please visit http://go.microsoft.com/fwlink/?LinkID=317594 to learn more.

    public class ApplicationUser : IdentityUser

    {

        public string UserNick { get; set; }

        public string Hp { get; set; }

        public string Email { get; set; }

    }

    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>

    {

        public ApplicationDbContext()

            : base("DefaultConnection")

        {

        }

    }

}

변경 추가된 부분은 색칠해 드렸고요.

잘보면 딱히 이상을 느낄만한곳이 Hp 부분일껍니다.

모델에서는 Hp1, Hp2, Hp3 이렇게 받았는데...

왜 이랬을까요...??

저렇게 나눠서 입력받을 내용을 합쳐서 Hp 라는 컬럼에다가 입력할려고 그랬습니다.;;

여기서 주의깊게 볼것은...

http://go.microsoft.com/fwlink/?LinkID=317594

여기를 방문해라는건데요.

들어가면 영어인데... 어딘가에 번역 버튼이 있을껍니다.

참고하시면 좋은 정보가 될듯합니다.

근데 언제 저런 링크가 있었지..;;

이 블로그 쓰면서 처음보고 방금 들어가 봤음.;;;

이로써 모델 수정이 완료 되었습니다.

3. Controllers 수정

Mvc의 꽃인 컨트롤러 수정이다.

/Controllers/AccountController.cs

/Controllers/AccountController.cs

//

// POST: /Account/Register

[HttpPost]

[AllowAnonymous]

[ValidateAntiForgeryToken]

public async Task<ActionResult> Register(RegisterViewModel model)

{

    if (ModelState.IsValid)

    {

        var user = new ApplicationUser() {

            UserName = model.UserName,

            UserNick = model.UserNick,

            Hp = model.Hp1 + "-" + model.Hp2 + "-" + model.Hp3,

            Email = model.Email

        };

        var result = await UserManager.CreateAsync(user, model.Password);

        if (result.Succeeded)

        {

            await SignInAsync(user, isPersistent: false);

            return RedirectToAction("Index", "Home");

        }

        else

        {

            AddErrors(result);

        }

    }

    // 이 경우 오류가 발생한 것이므로 폼을 다시 표시하십시오.

    return View(model);

}

언제나 그렇듯....

수정된 부분은 색칠했다.

파일을 열면 내용이 좀 많다.

저 부분은 알아서 찾아라..;;

제 컴퓨터에서는 72라인부터 시작이었습니다.

기존에는 UserName 하나만들 넘겨받았던 부분인데..

이제는 좀 많은걸 넘겨봤습니다.

딱히 보실부분은 핸드폰 번호를 3개로 나눠 입력 받았던걸 여기서 합쳐서 넣습니다.

구분자로 "-"까지 넣어서 말입니다.

알고나면 정말 아무것도 아닌 내용이지요.

컨트롤러도 끝!!

4. Views 수정

/Views/Account/Register.cshtml

/Views/Account/Register.cshtml

@model Mvc5TestUser.Models.RegisterViewModel

@{

    ViewBag.Title = "등록";

}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{

    @Html.AntiForgeryToken()

    <h4>새 계정을 만드십시오.</h4>

    <hr />

    @Html.ValidationSummary()

    <div class="form-group">

        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })

        <div class="col-md-10">

            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })

        <div class="col-md-10">

            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })

        <div class="col-md-10">

            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(m => m.UserNick, new { @class = "col-md-2 control-label" })

        <div class="col-md-10">

            @Html.TextBoxFor(m => m.UserNick, new { @class = "form-control" })

        </div>

    </div>

    <div class="form-group">

        <label class="col-md-2 control-label" for="Hp1">휴대폰</label>

        <div class="col-md-2">

            @Html.DropDownListFor(m => m.Hp1,

            new List<SelectListItem> {

                new SelectListItem { Value = "010" , Text = "010" , Selected = true },

                new SelectListItem { Value = "011" , Text = "011" },

                new SelectListItem { Value = "016" , Text = "016" },

                new SelectListItem { Value = "017" , Text = "017" },

                new SelectListItem { Value = "018" , Text = "018" },

                new SelectListItem { Value = "019" , Text = "019" }

            },

            new { @class = "form-control" })

        </div>

        <div class="col-md-2">

            @Html.TextBoxFor(m => m.Hp2, new { @type = "number", @class = "form-control" })

        </div>

        <div class="col-md-2">

            @Html.TextBoxFor(m => m.Hp3, new { @type = "number", @class = "form-control" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

        <div class="col-md-10">

            @Html.TextBoxFor(m => m.Email, new { @type = "email", @class = "form-control" })

        </div>

    </div>

    

    <div class="form-group">

        <div class="col-md-offset-2 col-md-10">

            <input type="submit" class="btn btn-default" value="등록" />

        </div>

    </div>

}

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

}

색칠된 부분이 내가 추가한 부분이다.

닉네임은 그냥 평범하니 패스~

우선 핸드폰에서 Hp1 부분을 보자.

DropDownListFor를 사용했다.

그냥 이런것도 있다는 의미에서 사용했다.

블로그 작성용으로 안했다면...

그냥 select로 했을꺼다.

단순히봐도 구문만 길어졌다.;;

구문엔 그렇게 어려워보이는건 없으니깐 패스하자.

다음은 Hp2다.

<div class="col-md-2">

    @Html.TextBoxFor(m => m.Hp2, new { @type = "number", @class = "form-control" })

</div>

Hp2부분이다.

@type = "number"로 설정한 부분이 보일것이다.

이렇게해놓으면 html5의 input type="number"로 생성해준다.

조흔 기능이다~

이메일부분을 보자.

<div class="form-group">

    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

    <div class="col-md-10">

        @Html.TextBoxFor(m => m.Email, new { @type = "email", @class = "form-control" })

    </div>

</div>

대단한건 아니고 저렇게 @type = "email"로 해주면 html5의 input type="email"로 생성해준다.

아이디 부분만 input type="text"로 받고..

@뒤쪽의 도메인 부분은 셀렉트 박스로 받는 형태도 많은데...

그냥 이렇게 했다. 개인 취향이다.;;

다음은 마스터 페이지 뷰 수정이다.

/Views/Shared/_Layout.cshtml

/Views/Shared/_Layout.cshtml

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - 내 ASP.NET 응용 프로그램</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

별다른건 아니다.

기본적으로 실행하면 익스플로어7버전으로 실행되어서..

부트스트랩이 춤을 춘다.

그걸 방지하기 위해 최신 브라우저의 문서모드로 실행하게 만든거다.

이것으로 기본적인 작업은 끝났다.

5. 실행

실행해서 등록페이지로 가보자.

몇개는 잘못된 형태로 입력해보았다.

그러면 그림의 빨간 테두리 같이 뭐가 잘못되었는지가 나타난다.

나처럼 입력하지말고....

정상적으로 입력하고 등록버튼을 눌러보자.

그리고 등록이 됐다면...

DB를 한번 까보자...

왼쪽이 새로 생긴 테이블이다.

여기 제일 중요한 AspNetUsers를 까보자.

오른쪽 상단이 테이블 디자인이고.. 오른쪽 하단이 들어있는 데이터다.

빨간 테두리를 잘보면 만들고자하는 컬럼이 잘 만들어졌고..

거기에 원하는 형태로 데이터가 들어가있는것이 보일것이다.

우선은 여기까지이다.

끝!