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