jQuery客户端密码验证

Question

首先我想说我意识到这不是一种安全的方法。 这仅用于培训目的。

算法应该是：

1. 点击 id="login-bg" 的 div
2. 应用显示横幅
3. 提供代码
4. 如果代码正常设置 cookie 并淡出横幅
5. 如果代码不正确，则 div 会抖动（仍保留在屏幕上）
6. 如果您不想提供代码，请按“取消”并淡出横幅

设置cookie功能（效果很好）：

<?php
    if(!isset($_COOKIE['is_logged']))
        { ?>
        <script type="text/javascript">
        function SetPwd(c_name,value,expiredays){
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+";path=/"+             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
            }
        </script>
<?php } ?>

这里肯定是 jQuery 的问题：

<?php
        if(!isset($_COOKIE['is_logged']))
        { ?>
        <div id="login-bg">
            <div class="content">
                <h2>Provide the code!</h2>
                <form id="check-form" method="post" action="">
                    <input type="password" name="code" placeholder="code" id="code" />
                    <input type="submit" value="Submit" id="enjoy"/> 
                </form>
                <h3>And enjoy free access!</h3>
                <a id="cancel">Cancel</a>
            </div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
            if( document.cookie.indexOf("is_logged") ===-1 ){
                $('#video').click(function(){
                    $("#login-bg").fadeIn('slow');
                });
                $('#cancel').click(function(){
                    $('#login-bg').fadeOut('slow');
                    //window.location = "<?php echo $this->baseUrl; ?>/index";
                });
            }
            $("#submit").click(function (){
                var value = $('#code').val();
                var pass = 'test';
                if( value == test ){
                    SetCookie('is_logged','is_logged',365*10)
                    $("#login-bg").remove();
                }
                else { 
                    $('#login-bg').effect( "shake" );
                }
            });
        });
        </script>
<?php } ?>

在我看来，值 '#code' id 没有从表单传递给 jQuery。
但我可能错了。

你有什么想法吗？你能做到吗？
感谢您的帮助。

Answer 1

这里似乎有问题..

var value = $('#code').val();
var pass = 'test';
if( value == test ){
    SetCookie('is_logged','is_logged',365*10)
    $("#login-bg").remove();
}

这不会等同于您想要的方式：

if( value == test )

我建议将其更改为，

if( value == pass )

也变了

$("#submit").click(

到

$("#enjoy").click(

Answer 2

我变了。但是，系统仍然没有按应有的方式运行。当我点击“提交”时，横幅就会消失（无论代码是否正常）。

我认为该值未通过，因为当我进行简单测试时会出现任何警报：

$("#submit").click(function (){
                var value = $('#code').val();
                var pass = 'test';
                alert(value);
                if( value == pass ){
                    SetCookie('is_logged','is_logged',365*10)
                    $("#login-bg").remove();
                }
                else { 
                    $('#login-bg').effect( "shake" );
                }
            });

Answer 3

是的，您提交的点击处理程序不正确，并且在密码检查时您错过了引号“测试”。 （正如其他人已经回答的那样。）

以下是您的代码演示，地址为jsFiddle。它使用 jQuery cookie 插件作为 cookie，但您的 PHP cookie 也可以使用。我只是没有演示的后端。

抱歉，由于操作不安全，因此无法在 SO 上运行，可能此处不允许使用 cookie。但在 jsFiddle 它正在工作。

也不要删除带有$("#login-bg").remove(); 的登录 div，因为它将从 DOM 中删除，您可以再次向用户显示它。最好只隐藏它。

// if(!isset($_COOKIE['is_logged']))
$(document).ready(function () {
    if (!$.cookie('is_logged')) {
        console.log('not logged in, show form');
        //document.cookie.indexOf("is_logged") === -1) {
        //$('#video').click(function () {
        //$('#code').val(''); // clear input
        $("#login-bg").fadeIn('slow');
        //});
        $('#cancel').click(function () {
            $('#login-bg').fadeOut('slow');
            //window.location = "<?php echo $this->baseUrl; ?>/index";
        });
    } else {
        $('#mainContent').fadeIn('slow');
    }
    
    $('#logout').click(function () {
        console.log('hide clicked');
        $('#code').val(''); // clear input
        $('#mainContent').hide();
        $("#login-bg").fadeIn('slow');
        $.removeCookie('is_logged');
    });

    $("#check-form").on('click', 'input[type=submit]', function (evt) {
        evt.preventDefault();
        var value = $('#code').val();
        var pass = 'test';
        if (value == pass) { // 'test') {
            //SetCookie('is_logged', 'is_logged', 365 * 10)
            $.cookie('is_logged', 'true', {
                expires: 7
            });
            $('#mainContent').fadeIn('slow');
            $("#login-bg").hide(); // don't remove the login section
        } else {
            $('#login-bg').effect("shake");
        }
    });
});

#login-bg {
    display: none;
}
#mainContent {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div id="login-bg">
    <div class="content">
         <h2>Provide the code!</h2>

        <form id="check-form" method="post" action="">
            <input type="password" name="code" placeholder="code" id="code" />
            <input type="submit" value="Submit" id="enjoy" />
        </form>
         <h3>And enjoy free access!</h3>
 <a id="cancel" href="#">Cancel</a>

    </div>
</div>
<div id="mainContent">
    <strong>Login succeeded!</strong> Shown after login!! 
    <a id="logout" href="#">Logout</a>

</div>