使用jQuery和XML的WordPress插件密码强度指示器

分享于 

9分钟阅读

Web开发

  繁體

Wordpress plugins Password strength indicator using jQuery and XML

目录

简介

使用jQuery和XML插件的密码强度指示器的目的是帮助并确保用户输入强密码。 在过去几年,我写了几篇关于如何将这个插件集成到 ASP.NET/MVC 和经典ASP应用程序的文章。 我一直在使用WordPress开源CMS一段时间,最近决定把插件扩展到 WordPress。 在本文中,我将简要介绍如何创建WordPress插件并利用它。 这是我的第一个WordPress插件,所有评论。

启动

如图 1所示,是WordPress插件的文件夹结构。

图 1

wordpress插件文件夹结构

  • PasswordPolicy.xml - 包含密码强度属性
  • Password.xslt - 将 PasswordPoclicy.xml 文件转化为HTML格式
  • jQuery.password-strength.js - 这是我创建的jQuery插件。 从这里获取最新版本
  • ysa-jquery-password-strength.php - 这是插件文件

第一步很简单,在插件 header 中包含一个Readme文件。插件和许可信息。 你可以从 WordPress 获得更多细节。

程序插件

分别有三个函数 inside,即 ysa_password_strength_scriptsysa_validate_passwordysa_plugin_scriptsysa_get_xml_url

ysa_password_strength_scripts 函数负责通过将 textbox ID传递给脚本来初始化jQuery密码强度插件。 在这个版本中,ID被硬编码,因此插件只能在WordPress用户配置文件中工作并添加新的用户页面。 由于某些原因,我无法找到删除WordPress默认密码强度指示器框的方法。 我最终在页面负载下设置了它对 false的可以见性。 这里函数还将在密码策略XML文件中插入超链接链接。

清单 1
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'文件中定义的密码策略动态生成的。 如果输入的密码不符合要求,该函数将返回错误消息"密码不符合密码策略"。

清单 2
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库脚本标记之后。 这个插件的优先级设置为 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个字符。 密码必须包含两个数字,一个大写和一个特殊字符。 显示的below 是允许的特殊字符列表。

@#$%*()_+^&%7D%7B:;

密码策略存储在XML文件中。 要编辑密码策略,请转到控制板,单击左侧导航菜单下的插件链接。 查找 ysa-jquery-password-strength,单击编辑链接。 参见图 2.

图 2

wordpress插件编辑 XML

搜索插件文件" ysa-jquery-password-strength/passwordpolicy。xml"并点击它。 你可以在这里修改密码强度属性。 在编辑特殊字符列表时,不要忘记转义XML特殊字符。 例如ampersand应该作为"&"输入,而不是"&"。 你可能会发现 XML - 特殊字符转换列表( ) 有帮助。

图 3

wordpress插件编辑 XML

如何安装插件

如何安装插件

限制

  • 短代码在这里版本中不可用
  • 目前这个插件只适用于WordPress用户配置文件并添加新用户页面

结论

我希望有人会发现这个信息有用并且让你的编程工作更容易。 如果你找到任何 Bug 或者不同意的内容或者想帮助改进这篇文章,请给我一条线。 为了抓住它的完整概念,我建议下载演示并探索它,因为我可能会错过本文中的一些重要信息。 如果你想帮助改善本文,请向我发送电子邮件。

test: IE 9.0,Firefox 19.0,Google Chrome 25.0和苹果 Safari 5.1.7,WordPress v3.5.1

browsers

历史

  • 06/01/2013 - 初始版本。

注意这个脚本

下载

资源


plugin  str  WORD  Wordpress  password  插件  
相关文章