如何通过 Ajax 返回无效密码错误消息 - MVC答案

【问题标题】：How to return invalid password error message via Ajax - MVC如何通过 Ajax 返回无效密码错误消息 - MVC
【发布时间】：2018-08-20 14:05:48
【问题描述】：

我有登录页面，用户输入他们的电子邮件和密码，但我想在他们输入错误密码时显示警报或文本，例如（您输入的密码无效）。我已经检查了Checkpass 不为空做某事，否则我不知道我应该做什么老实说。谁能帮助我或指出我正确的方向！

提前致谢：)

控制器：

    [HttpPost]
    public JsonResult Login(string Mail, string pass)
    {

        var hashedPass = PasswordSecurity.PasswordStorage.CreateHash(pass);
        using (DbNameSpace db = new DbNameSpace())
        {
            var query = from cbr in db.Contact_Business_Relation
                        join c in db.Contact on cbr.Contact_No_ equals c.Company_No_

                        join sa in db.Sales_Header on cbr.No_ equals sa.Sell_to_Customer_No_
                        join px in db.PX2 on c.E_Mail equals px.Email_ID

                        where c.E_Mail == Mail.ToLower()
                        select new
                        {
                            Mail = c.E_Mail,
                            pass = px.PS,

                        };

            var user = query.FirstOrDefault();
            var CheckPass = PasswordSecurity.PasswordStorage.VerifyPassword(pass, user.pass);

            if (user != null && CheckPass) //Checkpassword
            {

                Session["Email"] = user.Mail.ToString();

            }

     else {

                // ??
         }

            return Json(user, JsonRequestBehavior.AllowGet);
        }


    }

JavaScript：

<script>

    $(document).ready(function () {

        $("#login").click(function (e) {

            var email = $("input[name=Mail]").val();
            var password = $("input[name=pass]").val();
            e.preventDefault();


            $.ajax({

                type: "POST",
                dataType: "json",
                url: '@Url.Action("Login", "Account")',
                data: { Mail: email, pass: password },
                success: function (status) {


                    if (status) {

                        window.location.href = "/Account/Index";

                    }


                }

            });

        });
    });

</script>

查看：

        <form autocomplete="on" class="login100-form validate-form">

            <div>

                <label>E-mail</label>
                <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">

                    <input class="input100" type="email" id="Email" name="Mail" placeholder="E-mail">

                </div>

                <label>Password</label>
                <div class="wrap-input100 validate-input" data-validate="Password is required">
                    <input class="input100" type="password" id="Password" name="pass" placeholder="Kodeord">

                </div>

                <div id="invalidpassword"></div>

                <div class="container-login100-form-btn">

                    <button id="login" class="login100-form-btn">
                        Log in
                    </button>

                </div>

        </form>

【问题讨论】：

您使用哪种形式的身份验证？我没有看到您发出令牌或 cookie。
返回json时可以设置错误信息。想要样品吗？
@Tomato32 如果能给我一个例子就好了:)
@Marco 直到现在还只是形式 :)
使用ajax，然后重定向是没有意义的。 ajax 的全部意义在于保持在 same 页面上。正常提交即可，如果有错误，返回视图显示，否则在 POST 方法中重定向。

标签： javascript c# ajax asp.net-mvc

【解决方案1】：

查看这个 jquery 教程。我个人会使用 Fail 和 Done 回调方法。修改您的 c# 控制器以返回不同的 HTTP 状态代码。当他们通过良好的用户名和密码时使用 HTTP 200。当他们传递错误的密码时使用 HTTP 400 这应该会触发 Fail() 回调并允许您在失败时发出警报。

https://learn.jquery.com/ajax/jquery-ajax-methods/

// Using the core $.ajax() method
$.ajax({

    // The URL for the request
    url: "post.php",

    // The data to send (will be converted to a query string)
    data: {
        id: 123
    },

    // Whether this is a POST or GET request
    type: "GET",

    // The type of data we expect back
    dataType : "json",
})
  // Code to run if the request succeeds (is done);
  // The response is passed to the function
  .done(function( json ) {
     $( "<h1>" ).text( json.title ).appendTo( "body" );
     $( "<div class=\"content\">").html( json.html ).appendTo( "body" );
  })
  // Code to run if the request fails; the raw request and
  // status codes are passed to the function
  .fail(function( xhr, status, errorThrown )** {
    alert( "Sorry, there was a problem!" );
    console.log( "Error: " + errorThrown );
    console.log( "Status: " + status );
    console.dir( xhr );
  })
  // Code to run regardless of success or failure;
  .always(function( xhr, status ) {
    alert( "The request is complete!" );
  });

【讨论】：

谢谢它有帮助:)

【解决方案2】：

通常的做法是将响应状态设置为 401，并省略通常会随成功响应发送的数据负载。然后由客户端代码来识别错误状态并做出适当的响应（例如，可能通过显示警报并保留在名称/密码表单上）；此客户端行为将在 $.ajax 调用中指定。

【讨论】：

【解决方案3】：

这是一个例子。希望能帮到你，我的朋友。

[HttpPost]
    public JsonResult Login(string Mail, string pass)
    {
        var status = true; 
        var hashedPass = PasswordSecurity.PasswordStorage.CreateHash(pass);
        using (DbNameSpace db = new DbNameSpace())
        {
            var query = from cbr in db.Contact_Business_Relation
                        join c in db.Contact on cbr.Contact_No_ equals c.Company_No_

                        join sa in db.Sales_Header on cbr.No_ equals sa.Sell_to_Customer_No_
                        join px in db.PX2 on c.E_Mail equals px.Email_ID

                        where c.E_Mail == Mail.ToLower()
                        select new
                        {
                            Mail = c.E_Mail,
                            pass = px.PS,

                        };

            var user = query.FirstOrDefault();
            var CheckPass = PasswordSecurity.PasswordStorage.VerifyPassword(pass, user.pass);

            if (user != null && CheckPass) //Checkpassword
            {

                Session["Email"] = user.Mail.ToString();

            }

     else {
                status = false;                
         }

            return Json(status, JsonRequestBehavior.AllowGet);
        }


    }

在 Javascript 中：

<script>

    $(document).ready(function () {

        $("#login").click(function (e) {

            var email = $("input[name=Mail]").val();
            var password = $("input[name=pass]").val();
            e.preventDefault();


            $.ajax({

                type: "POST",
                dataType: "json",
                url: '@Url.Action("Login", "Account")',
                data: { Mail: email, pass: password },
                success: function (status) {
                    if (status) {
                        window.location.href = "/Account/Index";
                    }else{
                         $('#invalidpassword').html('You have entered wrong password!');
                    }


                }

            });

        });
    });

</script>

【讨论】：

谢谢你的例子 :) 但这还不够 :)
@7seconds：你还想要什么，我的朋友？ :))

【解决方案4】：

这就是我最终归档如何返回无效密码错误消息的方式，也许它对当天的某人有所帮助:)

我创建了一个enum 来保存 MessageType 的值：

  public enum MessageType
    {
        Valid,
        InvalidEmail,
        InvalidUerNameAndPass,
    }

然后我更改我的控制器以获得不同的消息类型：

    public JsonResult Login(string Mail, string pass)
    {
        MessageType messageType = MessageType.InvalidEmail;

        using (DbNamesapce db = new DbNamesapce())
        {
            var query = // do Join
                        select new
                        {
                            //Select Something
                        };

            var user = query.FirstOrDefault();

            if (user == null)
            {
                return Json(new { messageType = MessageType.InvalidEmail }, JsonRequestBehavior.AllowGet);
            }

            if (user != null && CheckPass)
            {
                messageType = MessageType.Valid;
            }

            else
            {
                messageType = MessageType.InvalidUerNameAndPass;
            }

            return Json(new { messageType = messageType }, JsonRequestBehavior.AllowGet);
        }

    }

我将脚本更改为：

<script>

    $(document).ready(function () {

        $("#login").click(function (e) {
            var email = $("input[name=Mail]").val();
            var password = $("input[name=pass]").val();
            e.preventDefault();

            $.ajax({
                type: "POST",
                dataType: "json",
                url: '@Url.Action("Login", "Account")',
                data: { Mail: email, pass: password },
                success: function (response) {

                    switch ($.trim(response.messageType))
                    {
                        case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.Valid)':
                            alert("Valid");
                            break;
                        case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.InvalidEmail)':
                             alert("InvalidUerNameAndPass");
                            break;
                       case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.InvalidUerNameAndPass)':
                            alert("InvalidUerNameAndPass");
                            break;

                    }

                }

            });

        });
    });

</script>

【讨论】：