طراحی فرم لاگین با استفاده از JSON

طراحی فرم لاگین با استفاده از JSON

بسم الله الرحمن الرحیم

 

آموزش JSON در ASP.NET MVC

طراحی یک فرم لایگن با استفاده از روش JSON

مزیت این روش در این است که اگر شما بخواهید اطلاعات کاربر را چک کنید نیازی نیست تا ضفحه را رفرش کنید و کاربر در صورتی که کلمه عبور خود را فراموش کرده و می خواهد نام کاربری و کلمه عبور خود را تست کند مدت زیادی را برای لود شدن صفحه صرف کند

برای شروع کار ابتدا در webconfig کد زیر را اضافه کنید


<connectionStrings>
  <add name="connstr" connectionString="data source=.\sqlexpress;
initial catalog=Northwind;integrated security=true"/></connectionStrings>
<system.web>

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

  ...

</system.web>

و همچنین کد زیر را به webconfig اضافه کنید

بسم الله الرحمن الرحیم

 

آموزش JSON در ASP.NET MVC

طراحی یک فرم لایگن با استفاده از روش JSON

مزیت این روش در این است که اگر شما بخواهید اطلاعات کاربر را چک کنید نیازی نیست تا ضفحه را رفرش کنید و کاربر در صورتی که کلمه عبور خود را فراموش کرده و می خواهد نام کاربری و کلمه عبور خود را تست کند مدت زیادی را برای لود شدن صفحه صرف کند

برای شروع کار ابتدا در webconfig کد زیر را اضافه کنید


<connectionStrings>
  <add name="connstr" connectionString="data source=.\sqlexpress;
initial catalog=Northwind;integrated security=true"/></connectionStrings>
<system.web>

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

  ...

</system.web>

و همچنین کد زیر را به webconfig اضافه کنید

 


<membership defaultProvider="p1">
  <providers>
    <add name="p1" connectionStringName="connstr"
                   type="System.Web.Security.SqlMembershipProvider" />
  </providers>
</membership>

 

 

 حال یک کنترلر برای چک کردن اطلاعات ایجاد می کنیم


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);
}

یک کلاس هم برای تعیین وضعیت کاربر در همان کنترلر ایجاد می کنیم


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

یک صفحه HTML   یا CSHTML  ایجاد می کنیم که به شکل زیر است

 


$(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!");
            }
        });
    });
});

 

برای جلوگیری از دسترسی کاربر به یکی از کنترلر ها مثلا برای کنترلر Home کد زیر را اضافه کنید تا وقتی که کاربر بخواهد به این صفحه دسترسی پیدا کند احراز هویت انجام شود

 

 


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

برای اضافه کردن یک کاربر به membership باید به صورت زیر عمل کنیم. در فایل Global.asax کد زیر را اضافه کنید

 


protected void Application_Start()
{
...
 MembershipCreateStatus status;

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

 

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس