前端用户登录时对密码进行加密传输

使用场景：网页中登录窗口提交密码传输、APP或小程序的API密码传输

本例以网页登录窗口登录为例，默认情况下的登录代码是：

<div class="form-group">

    <div class="input-icon">

        <i class="fa fa-user"></i>

        <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="账号/邮箱/手机" name="data[username]">

    </div>

</div>

<div class="form-group">

    <div class="input-icon">

        <i class="fa fa-lock"></i>

        <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="登录密码" name="data[password]">

    </div>

</div>

<div class="form-actions">

    <button type="button" onclick="dr_ajax_member('{dr_now_url()}', 'myform');" class="btn green pull-right"> 登录 </button>

</div>

其中password字段是明文的，在提交请求的post记录中可以看到明文的密码字符串，那么如何进行加密这个密码呢

加密原理：

只需要将password字符串进行32位md5加密就行了，加密后传输32位值

实现方法：

1、引入jquery.md5的js文件

2、执行代码：

<div class="form-group">

    <div class="input-icon">

        <i class="fa fa-user"></i>

        <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="账号/邮箱/手机" name="data[username]">

    </div>

</div>

<div class="form-group">

    <div class="input-icon">

        <i class="fa fa-lock"></i>

        <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="登录密码" id="mypassword">

        <input type="hidden" placeholder="md5加密后的密码" name="data[password]" id="password">

    </div>

</div>

<div class="form-actions">

    <button type="button" onclick="dr_login_new()" class="btn green pull-right"> 登录 </button>

</div>

<script>

function dr_login_new() {

    // 这里进行md5加密存储

    var pwd = $('#mypassword').val();

    pwd = $.md5(pwd); // 进行md5加密

    $('#password').val(pwd);

    dr_ajax_member('{dr_member_url('login/index')}', 'myform');

}

</script>