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

我刚刚完成了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 * {

        display: inline;

    }

</style>

6) 到这里 - 你可以下载这个页面的源代码了Register.cshtml: RegisterPageCode.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/