如何在登录时创建记住我的功能而不使用 javascript 或 jquery 中的表单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34851064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:56:45  来源:igfitidea点击:

How to create a remember me function in login without using form in javascript or jquery

javascriptjquerylogin

提问by Jojo

I'm almost done with my project, but the specifications for my login is not yet 100% done. Remember me functionis not yet working.

我几乎完成了我的项目,但我的登录规范还没有 100% 完成。记住我功能尚未运行。

HTML

HTML

<input type="text" id="signinId" class="email-input" placeholder="Email">
<input type="password" id="signinPwd" class="password-input" placeholder="Password">


<input id="rememberChkBox" type="checkbox">
<button id="Sign" class="button">Login</button>

Jquery Script

jQuery 脚本

$(document).ready(function(){
    $("#Sign").click(function(){

         //Script for login is here...

    });
});

I am not using form in this login page. The specs is that when the checkbox is checked upon login, the user must be remebered. Once he logout, the textbox should be empty and when clicked on the #signinIdinput his username must be displayed.

我没有在此登录页面中使用表单。规范是,当登录时选中复选框时,必须记住用户。一旦他注销,文本框应该是空的,当点击#signinId输入时,必须显示他的用户名。

It should look like this, if it is possible:

如果可能,它应该是这样的:

Sceenshot 1: When email input is clicked

场景 1: 单击电子邮件输入时

Screenshot 2: Autofill

屏幕截图 2:自动填充

Any help is very much appreciated. Thank you in advance.

很感谢任何形式的帮助。先感谢您。

回答by Sulung Nugroho

Auto Login system.

自动登录系统。

'Remember me' is not actually used to display user name and password on the login form because this feature is already provided by any browser. But it is intended for automatic login when users revisit the web.

“记住我”实际上并不用于在登录表单上显示用户名和密码,因为任何浏览器都已提供此功能。但它是为了在用户重新访问网络时自动登录。

To make auto login system without storing login credential on cookie is by adding database table that store userid and login_string.

通过添加存储用户 ID 和 login_string 的数据库表,使自动登录系统无需在 cookie 上存储登录凭据。

Insert/Update the login_string every user login.

每次用户登录时插入/更新 login_string。

And when user login using remember me (press the radio button), then store the login_string on the cookie.

当用户使用记住我登录时(按下单选按钮),然后将 login_string 存储在 cookie 上。

-------------------------------------------------------------------
id (ai)  | userid   | login_string (128 chars) 
--------------------------------------------------------------------
1        |  1       | 86faabe4142269e2274df911a....
--------------------------------------------------------------------
2        |  2       | 013835e194d75c183dc914c9e....

Login_string must be a unique string and can be created by this way :

Login_string 必须是唯一的字符串,可以通过以下方式创建:

$login_string = hash('sha512', $userid . $_SERVER['HTTP_USER_AGENT'] . time());

The result is a unique 128 string length.

结果是唯一的 128 个字符串长度。

To store login_string on the cookie :

将 login_string 存储在 cookie 上:

if(isset(post('remember_me')) {

     $cookie_name  = 'user_str_session';  
     $cookie_value = $login_string;
     setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); // one day example

}

Next time the user close the browser and revisit the web ( where normally login session has expired ), then at the first page load, system will find the login_string and return the userid. By using this userid, system will create login session for automatic login.

下次用户关闭浏览器并重新访问网络时(通常登录会话已过期),然后在第一次加载页面时,系统将找到 login_string 并返回用户 ID。通过使用此用户 ID,系统将创建登录会话以进行自动登录。

Example script :

示例脚本:

if(!isset($_SESSION['id'])) {

        if(isset($_COOKIE['user_str_session'])) {
            $user_string = $_COOKIE['user_str_session'] ;

            $sql   = "SELECT `userid` FROM `users_log` WHERE `string` =? ";
            $query = $this->db->query($sql, $user_string);

            $userid = $query->row()->userid;

            if($userid) {                                                 
               $_SESSION['id'] = $userid;                     
            }   
           }
     }

To prevent the login_string on a public computer, apply user logout by deleting the login_string on cookie.

要防止公共计算机上的 login_string,请通过删除 cookie 上的 login_string 来应用用户注销。

function logout()
   {            
      // remove cookie
      setcookie("user_str_session", "", time() - 3600);

      session_destroy(); 
      redirect('/');    
   }

This is only a brief description to create an automatic login system. Practically you can play with your own style and needs.

这只是创建自动登录系统的简要说明。实际上,您可以根据自己的风格和需求进行游戏。

回答by Panchi

Its working perfectly for me..

它对我来说非常适合..

You need Jquery.cookie.min.js..

你需要 Jquery.cookie.min.js..

    $(function () {

    if (localStorage.chkbox && localStorage.chkbox != '') {
        $('#rememberChkBox').attr('checked', 'checked');
        $('#signinId').val(localStorage.username);
        $('#signinPwd').val(localStorage.pass);
    } else {
        $('#rememberChkBox').removeAttr('checked');
        $('#signinId').val('');
        $('#signinPwd').val('');
    }

    $('#rememberChkBox').click(function () {

        if ($('#rememberChkBox').is(':checked')) {
            // save username and password
            localStorage.username = $('#signinId').val();
            localStorage.pass = $('#signinPwd').val();
            localStorage.chkbox = $('#rememberChkBox').val();
        } else {
            localStorage.username = '';
            localStorage.pass = '';
            localStorage.chkbox = '';
        }
    });
});

回答by mohammad eslahi sani

When login form has been sumbitted check the checkbox, if it has been checked, store the login form data including username and password in a related cookie. the next time a user comes to the page you can read the cookie, if it is set fill the form with the stored data.

当登录表单已被提交时,选中复选框,如果已选中,则将登录表单数据(包括用户名和密码)存储在相关的 cookie 中。下次用户访问该页面时,您可以读取 cookie,如果已设置,请使用存储的数据填写表单。

this fiddle can help you: https://jsfiddle.net/wrvnsst2/

这个小提琴可以帮助你:https: //jsfiddle.net/wrvnsst2/

you can use the below link to learn how to work with cookies in jquery: http://www.sitepoint.com/eat-those-cookies-with-jquery/

您可以使用以下链接了解如何在 jquery 中使用 cookie:http: //www.sitepoint.com/eat-those-cookies-with-jquery/

some codes to explain more:

一些代码来解释更多:

$(document).on(ready,function(){

fillByMemory()
$('button#sign').on('click',function(){

    if($('#rememberChkBox').val()){
        rememberMe();
    }


doLogin();
});



});

function rememberMe(){
         $.cookie('id',$('#signinId').val());
         $.cookie('pass',$('#signinPwd').val());

}

function fillByMemory(){
    if(!!$.cookie('id'))
        $('#signinId').val($.cookie('id'));

    if(!!$.cookie('pass'))
        $('#signinPwd').val($.cookie('pass'));
}