WordPress 插件 - 使用 jQuery 和 XML 的密码强度指示器
4.38/5 (4投票s)
创建 WordPress 插件 - 使用 jQuery 和 XML 的密码强度指示器
目录
引言
使用 jQuery 和 XML 实现的密码强度指示器插件的目的是帮助用户输入强密码。在过去的几年里，我写过几篇关于如何将此插件集成到 ASP.NET/MVC 和经典 ASP 应用程序中的文章。我现在使用 WordPress 开源 CMS 已经有一段时间了，最近决定将其扩展到 WordPress。在这篇文章中，我将简要介绍我是如何创建 WordPress 插件并加以利用的。这是我的第一个 WordPress 插件，所有评论都将受到赞赏。
开始
图 1 显示了 WordPress 插件的文件夹结构。
- PasswordPolicy.xml – 包含密码强度属性
- Password.xslt – 将 PasswordPoclicy.xml 文件转换为 HTML 格式
- jQuery.password-strength.js – 这是我创建的 jQuery 插件。在此处获取最新版本
- ysa-jquery-password-strength.php – 这是插件文件
第一步总是很容易的，在插件头中包含一个 Readme 文件、插件和许可证信息。您可以从 WordPress 获取更多详细信息。
编写插件
插件中有四个函数，分别是 ysa_password_strength_scripts、ysa_validate_password、ysa_plugin_scripts 和 ysa_get_xml_url。
ysa_password_strength_scripts 函数负责初始化 jQuery 密码强度插件，通过将文本框 ID 传递给脚本。在此版本中，ID 是硬编码的，因此该插件仅在 WordPress 用户个人资料和添加新用户页面上有效。出于某种原因，我一直找不到一种方法来移除 WordPress 默认的密码强度指示器框。我最终在页面加载时将其可见性设置为 false。此函数还将注入一个指向密码策略 XML 文件的超链接。
function ysa_password_strength_scripts() {
$pwdPolicyText = "Password policy";
$xmlPath = ysa_get_xml_url();
$html = '';
$html .='<script type="text/javascript">';
$html .='/* <![CDATA[ */';
$html .=' jQuery(document).ready(function() {';
$html .=' if (jQuery("[id=\'pass-strength-result\']").length>0) {';
$html .='setTimeout(function() {';
$html .='jQuery("#pass-strength-result").css({\'visibility\':\'hidden\',\'display\':\'none\'});';
$html .='jQuery("#pass-strength-result").html("");';
$html .='}, 1000);';
$html .=' }';
$html .='if (jQuery(".indicator-hint").length>0) {';
$html .=' jQuery(".indicator-hint").append(
" <br/><a id=\'passwordPolicy\' href=\'#\'>'. $pwdPolicyText.'</a>");';
$html .='}';
$html .='jQuery("[id$=\'passwordPolicy\']").click(function(event) {';
$html .='var width = 350, height = 300, left = (screen.width / 2) - (width / 2),';
$html .='top = (screen.height / 2) - (height / 2);';
$html .='window.open("' . $xmlPath . '", "'. $pwdPolicyText .'",
\'width=\' + width + \',height=\' + height + \',left=\' + left + \',top=\' + top);';
$html .='event.preventDefault();';
$html .='return false;';
$html .='});';
$html .='var myPSPlugin = jQuery("[id=\'pass1\']").password_strength();';
$html .=' });';
$html .='/* ]]> */ ';
$html .='</script>';
echo $html;
}
列表 2 显示了使用正则表达式验证密码强度的函数。正则表达式是根据 'PasswordPolicy.xml' 文件中定义的密码策略动态生成的。如果输入的密码不符合要求，该函数将返回错误消息“密码不符合密码策略”。
function ysa_validate_password($errors, $update, $user) {
if (isset($user->user_pass)) {
//read from XML
$xml = simplexml_load_file(plugins_url('PasswordPolicy.xml', __FILE__))
or die("Error: Cannot create object");
foreach($xml->children() as $PasswordPolicy=> $data){
$minLength = $data->minLength;
$maxLength = $data->maxLength;
$numsLength = $data->numsLength;
$upperLength = $data->upperLength;
$specialLength = $data->specialLength;
$specialChars = $data->specialChars;
}
$passwordReg ="(?=^.{".$minLength.",".$maxLength."}$)(
?=(?:.*?\d){".$numsLength."})(?=.*[a-z])(?=(?:.*?[A-Z]){".$upperLength."})(
?=(?:.*?[".$specialChars."]){
".$specialLength."})(?!.*\s)[0-9a-zA-Z".$specialChars."]*$";
if (!preg_match("/$passwordReg/", $user->user_pass, $matches)) {
$errors->add( 'weak-password',
__( '<strong>ERROR</strong>: Password does not meet Password Policy.' ));
}
}
}
function ysa_plugin_scripts() {
wp_enqueue_script('ysa_password_strength_scripts',
plugins_url('scripts/jquery.password-strength.js', __FILE__), array('jquery'), '1.0', true);
wp_enqueue_script('ysa-jquery-password-strength');
}
最后一步是将函数挂钩到特定的动作。第一个动作将在用户访问管理区域时加载 jQuery 插件脚本。然后通过调用 ysa_password_strength_scripts 函数来初始化插件。此插件依赖于 jQuery 库，因此我们希望确保初始化脚本放置在 jQuery 库脚本标签之后。在此 WordPress 插件中，优先级设置为 9999，以确保脚本在最后创建。最后，如果密码不符合密码策略，则向用户显示错误消息。
列表 3
add_action('admin_init', 'ysa_plugin_scripts',100,1);
add_action('admin_footer', 'ysa_password_strength_scripts',9999,1);
add_action('user_profile_update_errors', 'ysa_validate_password', 999, 3);
如何修改密码策略
默认情况下，最小密码长度为 12 个字符，最大长度为 25 个字符。密码必须包含两个数字、一个大写字母和一个特殊字符。下面列出了允许的特殊字符。
| ! | @ | # | \ | $ | % | * | ( | ) | _ | + | ^ | & | } | { | : | ; | ? | . |
密码策略存储在 XML 文件中。要编辑密码策略，请转到仪表盘，单击左侧导航菜单下的“插件”链接。找到 ysa-jquery-password-strength，然后单击“编辑”链接。请参阅图 2。
图 2
搜索插件文件“ysa-jquery-password-strength/PasswordPolicy.xml”并单击它。在这里，您可以修改密码强度属性。编辑特殊字符列表时，请勿忘记转义 XML 特殊字符。例如，and 应该输入为“&”而不是“&”。您可能会发现 XML – 特殊字符转换列表 有所帮助。
图 3
如何安装插件
- 从 http://download.ysatech.com/wordpress/plugins/ysa-jquery-password-strength-v1.zip 下载插件
- 解压 zip 文件并将 ysa-jquery-password-strength 文件夹上传到您的 WordPress wp-content/plugins/ 目录，或者转到“插件”页面并上传 zip 文件
- 从“插件”页面激活插件
- 在 WordPress 用户个人资料和添加新用户页面上试用插件
如何卸载插件
限制
- 此版本中不提供短代码
- 目前此插件仅在 WordPress 用户个人资料和添加新用户页面上工作
结论
我希望这些信息能对您有所帮助，让您的编程工作更轻松。如果您发现任何错误或不同意内容，或者想帮助改进本文，请给我留言，我将与您一起进行更正。我建议下载演示并进行探索，以便充分理解其概念，因为我可能在本文中遗漏了一些重要信息。如果您想帮助改进本文，请给我发送电子邮件。
测试于：Internet Explorer 9.0、Firefox 19.0、Google Chrome 25.0 和 Apple Safari 5.1.7、WordPress v3.5.1
历史
- 2013 年 6 月 1 日 – 初始版本。