Asp.net mvc : ajax 기술로 인증페이지 구현하기

Configure a database for membership services

membership services 를 제공하기 위해 Northwind 데이터베이스를 연결합니다. 이는 asp.net sql server setup 마법사를 통해 정의 합니다.

Configure forms authentication and membership provider

이제 연결자를 web.config 에 명시합니다.

<system.web>
<authentication mode="Forms">
<forms loginUrl="~/account/login" defaultUrl="~/home/index"></forms>
</authentication>
...
</system.web>

여기서 인증없이 처음에 페이지 호출하게 되면 account 폴더 내부의 login 페이지로 이동합니다. 인증 후 에는 defaulturl 에 명시한 경로로 이동하게 됩니다. Membership 제공자를 사용하기 위해 아래와 같이 환경 정보를 기재합니다.

Create Account controller

이제 account 내부의 login() 함수를 기술 해 보겠습니다.

public ActionResult Login()
{
return View();
}

[HttpPost]
public JsonResult ValidateUser(string userid, string password,
                               bool rememberme)
{
    LoginStatus status = new LoginStatus();
    if (Membership.ValidateUser(userid, password))
    {
        FormsAuthentication.SetAuthCookie(userid, rememberme);
        status.Success = true;
        status.TargetURL = FormsAuthentication.
                           GetRedirectUrl(userid, rememberme);
        if (string.IsNullOrEmpty(status.TargetURL))
        {
            status.TargetURL = FormsAuthentication.DefaultUrl;
        }
        status.Message = "Login attempt successful!";
    }
    else
    {
        status.Success = false;
        status.Message = "Invalid UserID or Password!";
        status.TargetURL = FormsAuthentication.LoginUrl;
    }
    return Json(status);
}

위에 LoginStatus 클래스는 아래와 같이 기술합니다. 속성에는 성공여부,나 메시지, 그리고 이동할 경로를 할당하여 json 형태로 제공해 줍니다.

public class LoginStatus
{
    public bool Success { get; set; }
    public string Message { get; set; }
    public string TargetURL { get; set; }
}

Create Login view

로그인 디자인은 아래와 같습니다.

위에 구현한 validateuser() 컨트롤 함수에 파라미터값들을 json 형태로 전송합니다. 전송 후 받은 값은 success 에서 json 값으로 받아서 이를 parsing 하여 TargetURl 값을 얻어 인증 성공 후 이동할 경로값을 locaton 으로 이동하게 합니다.

$(document).ready(function () {
    $("#login").click(function () {
        $("#message").html("Logging in...");
        var data = { "userid": $("#userid").val(),
                     "password": $("#password").val(),
                     "rememberme":$("#rememberme").prop("checked") };
        $.ajax({
            url: "/account/validateuser",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            success: function (status) {
                $("#message").html(status.Message);
                if (status.Success)
                {
                    window.location.href = status.TargetURL;
                }
            },
            error: function () {
                $("#message").html("Error while authenticating
                                    user credentials!");
            }
        });
    });
});

실행해서 성공하면 좌측처럼 보이며, 틀리면 우측화면처럼 보입니다.

Create Home controller and Index view

[Authorize]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

로긴한 사용자 이름을 출력하도록 기술해 봅니다.

<body>
<h1>Welcome @Membership.GetUser().UserName!</h1>
</body>

화면은 아래와 같습니다.

이를 테스트 하기 전에 사용자 계정을 추가해야 하는데요.이를 global.asax 에서 아래 처럼 간단하게 입력해서 테스트 할수도 있습니다.

protected void Application_Start()
{
...
MembershipCreateStatus status;
Membership.CreateUser("User1",
"some_password_here", "user1@somewebsite.com",
"question", "answer", true, out status);
}

감사합니다.

원문 : http://www.binaryintellect.net/articles/51a057aa-dd50-435c-96a1-31b1fc43b9d6.aspx

'닷넷관련 > ASP.NET MVC 🍕' 카테고리의 다른 글

HTTP Header 에 Sever 명 제거하기 (asp.net , iis 6,7) (보안) (0)	2015.07.29
ASP.NET MVC demo application "ProDinner" (0)	2014.10.28
NHibernate 과 ASP.NET MVC 로 CRUD 만들어 보기 (0)	2014.03.13
ASP.NET MVC 3 - JSONP 요청 JQUERY 에 전송하기 (1)	2012.07.05
asp.net mvc 의 razor 문법 정리 사이트 (0)	2012.05.29

재우니의 블로그