Jak zaimplementować logowanie AJAX za pomocą asp.net mvc5?


Mam formularz logowania częściowego widoku, który jest w trybie modalnym w głównym szablonie (układzie). Po kliknięciu przycisku pojawia się formularz logowania i użytkownik musi wypełnić ten formularz, dopóki wszystko nie będzie w porządku, ale za każdym razem, gdy użytkownik kliknie przycisk logowania, dane są wysyłane na serwer w celu weryfikacji, czy dane były w porządku. Użytkownik jest przekierowywany do bezpiecznego obszaru witryny internetowej, ale jeśli tak nie jest, użytkownik zostaje utracony, ponieważ strona została odświeżona, a modal nie jest ponownie wyświetlany, więc użytkownik musi kliknąć przycisk Wstecz. zaloguj się, aby wyświetlić modalne, a następnie zobacz błąd! Chciałbym zaimplementować logowanie w AJAX, w którym po kliknięciu przez użytkownika przycisku logowania, jeśli dane są poprawne, należy je przekierować do bezpiecznego obszaru strony, w przeciwnym razie powinien zostać wyrzucony błąd. Oto częściowy widok logowania. 
@model Hire.af.WebUI.Models.LoginViewModel <!--Login Form-->

 @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "noo-ajax-login-form form-horizontal", role = "form" }))

 {

 @Html.AntiForgeryToken()

  @Html.ValidationSummary(true, "", new { @class = "text-danger" })

 <div class="form-group row">

 <div class="col-sm-9">

 @Html.TextBoxFor(m => m.Email, new { @class = "log form-control", @placeholder="Email OR Username" })

 @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

 

 

 <div class="form-group row">

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

 <div class="col-sm-9">

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

 @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })

 

 

 <div class="form-group row">

 <div class="col-sm-9 col-sm-offset-3">

 <div class="checkbox">

 <div class="form-control-flat">

 <label class="checkbox">

 @Html.CheckBoxFor(m => m.RememberMe, new { @class = "rememberme", @type = "checkbox" })

 [i][/i] Remember Me

 </label>

 

 

 

  <!--Remember Me Checkbox-->

 <div class="form-actions form-group text-center">

 <input type="submit" value="Sign In" class="btn btn-primary"/>

 <div class="login-form-links">

 <span>[url="#"><i class="fa fa-question-circle">[/i] Forgot Password?[/url]</span>

 <span>

 Don't have an account yet?

 [url="#" class="member-register-link" data-rel="registerModal">

 @Html.ActionLink("Register Now", "Register") <i class="fa fa-long-arrow-right">[/i]

 [/url]

 </span>

 

  @* Enable this once you have account confirmation enabled for password reset functionality

  @Html.ActionLink("Forgot your password?", "ForgotPassword")

 *@

 }

Wszelka pomoc zostanie doceniona. Podziękować.

Edit1 dla Samit Patel:

tutaj jest metoda akcji kontrolera do logowania 
// GET:/Account/Login

[AllowAnonymous]

public ActionResult Login(string returnUrl)

{

 ViewBag.ReturnUrl = returnUrl;

 return View();

}

//

// POST:/Account/Login

[HttpPost]

[AllowAnonymous]

[ValidateAntiForgeryToken]

public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)

{

 if (!ModelState.IsValid)

 {

 return View(model);

 }// This doesn't count login failures towards account lockout

// To enable password failures to trigger account lockout, change to shouldLockout: true

 var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);

 switch (result)

 {

 case SignInStatus.Success:

 return RedirectToLocal(returnUrl);

 case SignInStatus.LockedOut:

 return View("Lockout");

 case SignInStatus.RequiresVerification:

 return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });

 case SignInStatus.Failure:

 default:

 ModelState.AddModelError("", "Invalid login attempt.");

 return View(model);

 }

}

2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    Zaproszony:
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Właściwie musisz przekazywać model tam iz powrotem do widoku i kontrolera, stąd termin MVC (Model View Controller). Utworzyłbym model WebLogin.cs, abyś mógł sprawdzić stan modelu. Największym problemem, jaki mam z powyższym kodem, jest to, że dołączasz token zabezpieczający przed fałszerstwem, ale nadal go nie przetwarzasz, co czyni go bezcelowym.
    WebLogin{
    [Required]
    
public string Name {get;set;}
    
[Required]
    
public string Password {get;set;}
    
}

    Tutaj możesz włączyć HTML, zaprogramować maksymalną długość łańcucha i wiele więcej za pomocą adnotacji danych i skonfigurować niektóre zainstalowane komunikaty o błędach, aby kierować użytkownikiem w przypadku błędu.
    Zobacz następujące:

    https://msdn.microsoft.com/en-us/ library/ee256141(v=vs.100).aspx
    https://msdn.microsoft.com/en-us/library/ee256141(v=vs.100).aspx
    Po stronie sterownika: 
    [HttpGet]
    
public async Task<ActionResult> AuthenticateUser(){
    
 return View(new WebLoginModel());
    
} [HttpPost,ValidateAntiforgeryToken]
    
public async Task<ActionResult> AuthenticateUser(WebLoginModel login){
    
//Right here you can flag a model is invalid and return an error to the Jquery
    
//AJAX call and handle it directly with HTML. 
    
 if(!ModelState.Valid)return new HttpStatusCodeResult(HttpstatusCode.Invalid);
    
 var validLogin = LoginMethodInYourModel( Or whatever else you are using ).
    
}

    W HTML/Jquery można to zrobić tak: 
    <script type="text/javascript">
    
 $('form').submit(function () {
    
 var form = $('form');// This will work if its the only form in the 
    
//view, otherwise use an Id, Name or even a class will work. 
    
 var token = $('input[name="__RequestVerificationToken"]', form).val();
    
 var lData = $('form').serialize();
    
 $.ajax({
    
 url: $(this).data('url'),
    
 type: 'POST',
    
 data: { 
    
 __RequestVerificationToken: token, 
    
 WebLoginModel: lData 
    
 },
    
 success: function (result) {
    
 alert(result.someValue);
    
 },
    
 error:function(errorResult){
    
//You can handle the error gracefully here and allow your user to 
    
//know what is going on.
    
 }
    
 });
    
 return false;
    
 });
    
</script>

    Nie mogę wziąć za to pełnej odpowiedzialności, właściwie znalazłem najlepszy sposób obsługi/weryfikacji tokena zabezpieczającego przed fałszerstwem z następującego postu:
    dołączanie antyfambrotoken w Ajax po ASP.NET MVC
    https://coderoad.ru/14473597/
    Robiąc to w ten sposób z jQuery, możesz zaoferować użytkownikowi oczekującą szklankę lub obracające się logo i wykonać trochę pracy po stronie serwera, i jest to czyste i na temat.
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Wystarczy wysłać żądanie
    AJAX
    po kliknięciu przycisku
    Login
    ,
    Przede wszystkim ustaw swój przycisk logowania jako typ
    Button
    ,

    Przypisz identyfikator do formularza 

    @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "noo-ajax-login-form form-horizontal", role = "form" , @id = "yourID" }))
    
 { 
    
}


    HTML

    <input type="button" id="btnSubmit"/>


    Jquery


    Na kliknięcie 
    btnSubmit
    to odpalenie Jquery 
    $("#btnSubmit").click(function)
    
 {
    
 $,ajax({
    
 url:"Account/Login?Username=" + username + "&pass=" + pass,
    
 success: function(result)
    
 {
    
 if(result == "Authenticated")
    
 {
    
 $("#yourID").submit();
    
 }
    
 else 
    
 {
    
 alert("Login Failed");
    
 }
    
 }
    
 })
    
 }


    Kontroler 

    [HttpGet] 
    
Public ActionResult CheckAuthentication(string username, string pass)
    
{
    
// Your code to check the Authentication
    
 int count = _dbcontext.modal.toList(r => r.Username == username && r. password == pass).toList().Count; 
    
 if(count == 1)
    
 {
    
 return JSON("Authenticated",JsonRequestBehaviour.AllowGet);
    
 }
    
 else
    
 {
    
 return JSON("Failed");
    
 }
    
}
    
[HttpPost]
    
[AllowAnonymous]
    
[ValidateAntiForgeryToken]
    
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
    
{
    
 if (!ModelState.IsValid)
    
 {
    
 return View(model);
    
 }
    
// Remove all this stuff as we could achieve the same in AJAX request
    
}
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

    Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved