如何在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插件就不需要添加了）：

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

<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)
如何在nopcommerce3.3注册页面添加密码强度检查仪？
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/