wucf2004的博客

asp.net和ajax
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

如何在nopcommerce3.3注册页面添加密码强度检查仪?

Posted on 2014-07-10 08:53  wucf2004  阅读(190)  评论(0编辑  收藏  举报

我刚刚完成了nopCommerce注册页面的密码强度检查仪,因为我觉得在电子商务交易平台,安全问题是非常重要的。在注册页面有必要添加一个密码强度检测仪,以便通知用户他们的密码是否足够强大。今天,大多数网站都使用这个密码强度计来检查密码的强度。

为什么一个密码强度计如此重要?
- 拥有一个强密码来保护我们的,因为我们每天都在网上共享个人信息 
- 拥有一个强密码来保护我们,如信用卡信息,社会保障,银行帐号,密码#S等敏感信息

如何建立一个强大的密码?
- 一个强大的密码至少有8个字符
- 一个强大的密码应该有特殊字符 
- 一个强大的密码应该有字母和数字 
- 一个强大的密码应该有小写字母和大写字母

提示:
- 请在至少2个月更改一次密码的做法。 
- 避免使用正确的拼写。例如:你应该使用“ef4t”代替单词“effort”。

现在,是时候看代码了:

1) 在nopCommerce代码,注册页面在以下位置:
根目录\Views\Customer\ Register.cshtml   <-- 打开这个文件

2) 在代码中找到这里:

<div class="form-fields">
                    <div class="inputs">
                        @Html.LabelFor(model => model.Password, new { }, ":")
                        @Html.EditorFor(model => model.Password)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.Password)
                    </div>
                    <div class="inputs">
                        @Html.LabelFor(model => model.ConfirmPassword, new { }, ":")
                        @Html.EditorFor(model => model.ConfirmPassword)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.ConfirmPassword)
                    </div>
                    @if (Model.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            @Html.Raw(Html.GenerateCaptcha())
                        </div>
                    }
                </div>

  

3) 在这种情况下,我们需要添加javascript,jQuery和CSS。因此,为了做到这一点,我们将在我们的“Register.cshtml”页面中添加这样的代码:

<script type='text/javascript'>
    $(function () {
        // This applies the Strength checking plug-in to your particular element
        $('#Password').strength({ strengthButtonText: "" });
        // Fixup your Required indicator (inserts it explicitly after your password element)
        $('.required-indicator').insertAfter($("#Password"));
    });
</script>

  

注: 这里的 $('#Password') 将引用密码输入字段。

4) 我们还需要添加相应的JQuery插件(如果存在jquery插件就不需要添加了):

<!-- Example jQuery -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/jquery.min.js"></script>

<!-- Strength.js -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/strength.js"></script>

注: "strength.js" 这个文件里面定义什么是弱,中,强密码。根据您的要求,如果你愿意你可以修改它。

5) 现在,我们将增加CSS样式:

<style type='text/css'>
    .strength_meter, .strength_meter * {
        displayinline;
    }
</style>

6) 到这里 - 你可以下载这个页面的源代码了Register.cshtmlRegisterPageCode.zip (2.9KB)

P.S. 此代码经过测试,适用于nopCommerce3.30版本

注: 在nopCommerce,您可以通过将定义的最小长度的密码:
Administration > Configuration > Settings > All settings  
找到: "customersettings.passwordminlength" 并且修改它的值

希望对你有所帮助...
翻译自:http://www.strivingprogrammers.com/Blog/post/Lavish-Kumar/29/Steps-to-add-password-strength-meter-in-nopCommerce-3-30-register-page/

分享是一种美。版权所有,转载请注明出处 http://www.nopchina.net/