jquery密码强度_使用jQuery开发密码强度插件

最新推荐文章于 2019-12-18 23:19:08 发布

dingshi7798

最新推荐文章于 2019-12-18 23:19:08 发布

阅读量233

点赞数

文章标签： python java 数据库编程语言 linux

原文链接：https://www.sitepoint.com/developing-password-strength-plugin-jquery/

版权

jquery密码强度

密码是最常用的身份验证机制。即使许多站点都采用多步身份验证，密码仍然在确保帐户安全方面起着关键作用。强大的密码对于帐户安全至关重要，本文将教您如何开发可衡量密码强度的插件。我们将使用zxcvbn库和jQuery为网站构建功能全面的密码强度表。

介绍

通常，大多数用途是非技术性的，并且对身份验证的工作知识有限。即使对于技术用户，也很难弄清楚哪些密码强度高而哪些密码容易破解。例如，简单增加密码长度并不一定会使密码破解变得更加困难。

密码强度计计算用户输入密码的强度。通常，它以强度级别显示，例如非常弱，弱，良好，强等。仪表在每个用户输入上都会更新，因此计算应作为onkeypress或onkeyup事件处理程序进行。当用户尝试创建新帐户时，可以检测到并拒绝弱密码，从而提高了站点的整体安全性。

密码强度计算

应该有明确定义的标准来计算密码强度。大多数开发人员倾向于将手动验证标准用于密码强度计。这是加强密码的很好指南，但由于它没有考虑破解密码所需的时间，因此可能不是最准确的技术。相反，大多数手动验证取决于以下条件：

字符数。
使用大写字母，数字和符号。
黑名单中的单词。

这不是对密码强度的实际估计，因为通过这些验证生成的某些密码将很容易破解。因此，我们需要一个精确的测量系统来定义密码强度。

zxcvbn

在本教程中，我们计划使用zxcvbn实现密码强度计。 zxcvbn被认为是一种现实的密码强度计，它利用常见英语单词，重复模式，序列和常见英语名称的数据集来计算强度。它还使我们在计算强度时可以将某些单词列入黑名单。此功能提供的结果比手动强度计算规则准确得多。了解zxcvbn如何使用数学函数来计算强度超出了本教程的范围。那些想了解zxcvbn内部逻辑的人可以查看Dropbox Tech Blog的文章。

考虑以下代码，该代码使用zxcvbn函数。第一个参数是必需的，用于保存要评估的密码。在这种情况下，密码为“密码”。第二个参数是可选的，可以包含一个列入黑名单的值的数组。通常，我们不希望密码与用户名相似。因此，我们至少必须使用用户名作为列入黑名单的值才能获得强密码。

<script type="text/javascript" >
  var blackList = ["admin"];
  var strength  =  zxcvbn("password", blackList);
</script>

zxcvbn函数返回一个包含以下属性的对象。

strength.entropy –以比特为单位。
strength.crack_time –这是估计的裂纹时间。
strength.crack_time_display –这也用于以用户友好的方式提供破解时间，使用月，年，世纪等。
strength.score –这是我们将在密码强度仪中使用的实际强度。它的范围是从零到四个，其中零代表一个弱密码，四个代表一个强密码。无论您的密码多么复杂，密码都不会超过四个。
strength.match_sequence –提供用于计算强度的模式列表。这是一个具有多个对象的对象，其中包含带有蛮力，字典等模式的对象。您可以通过在strength对象上调用console.log进行检查。
strength.calculation_time –这是用于计算给定密码强度的时间。通常，这将是几毫秒。

我们可以使用许多参数来提高密码强度，但是我们不希望密码验证的复杂性过高。因此，通常，我们将仅使用结果的score参数。如果有必要，我们可以加强使用密码crack_time_display或crack_time与配合score 。

建立密码强度计

我们将使用jQuery构建可重用的密码强度计，并将使用jQuery Plugin Boilerplate维护标准结构。该仪表可以根据您的喜好以多种方式开发。一些插件提供了实际的密码计量器小部件，而某些插件提供了密码强度消息，以便用户可以将其插入任何喜欢的地方。我们将重点关注后者，因为它在设计密码表时增加了更多的灵活性。这是我们的电表的要求：

我们需要进行基本验证，例如检查空值和密码是否相等以及确认密码值。
我们可能需要自定义验证，例如最小字符，阻止某些字符等。
使用预定义的级别（例如非常弱，弱，中等，强等）报告实际强度。
我们可以使用裂纹时间在每个指定级别内实现强度。

实施强度计插件

首先，我们必须从GitHub获取jQuery Plugin Boilerplate的副本。下载后，将文件放在项目文件夹中，并将其重命名为jquery.password.strength.js 。接下来，从GitHub下载zxcvbn 。如以下代码所示，将这些文件包括在您的项目文件中。

<html>
  <head>
    <title>jQuery Password Strength Checker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="zxcvbn.js"></script>
    <script type="text/javascript" src="jquery.password.strength.js"></script>
  </head>
  <body>
  </body>
</html>

现在打开jquery.password.strength.js文件。我假设您熟悉jQuery插件样板。首先，我们必须更新插件名称和默认选项部分，如以下代码所示。在这里，我们将默认插件名称更改为PasswordStrengthManager ，并将默认选项替换为多个插件特定选项。我们有两个选项可用于指定密码值和确认密码字段。我们也有一个定义黑名单单词的数组。接下来，我们有两个选项minChars和maxChars用于实现自定义验证。最后，我们有一个名为advancedStrength的选项来启用或禁用使用裂纹时间来计算强度。

var pluginName = "PasswordStrengthManager",
    defaults = {
      password: "",
      confirm_pass : "",
      blackList : [],
      minChars : "",
      maxChars : "",
      advancedStrength : false
    };

接下来，我们可以进入插件构造函数，如以下代码所示。在这里，除了用于保留密码表生成的消息的信息设置之外，我们还有默认的样板代码。一旦插件在任何HTML元素上使用，此函数将被调用。

function Plugin(element, options) {
  this.element = element;
  this.settings = $.extend({}, defaults, options);
  this._defaults = defaults;
  this._name = pluginName;
  this.init();
  this.info = "";
}

插件的init函数用于初始化插件特定的代码并启动该过程。让我们看一下修改后的init函数（如下所示）。首先，我们执行强制性验证，例如检查空密码和两个密码字段是否相等。 this.settings将包含传递给插件初始化程序的默认值或自定义值。密码表的消息存储在this.info 。最后，我们将消息设置为通过初始化传递的密码表元素。

init: function() {
  if ("" == this.settings.password || "" == this.settings.confirm_pass) {
    this.info = "Password fields cannot be empty";
  } else if (this.settings.password != this.settings.confirm_pass) {
    this.info = "Passwords doesn't match";
  }

  $(this.element).html(this.info);
},

接下来，我们进入自定义验证器部分。一些站点更喜欢自己的限制，例如密码的字符范围或防止某些字符。我们将为minChars和maxChars实现两个验证器。我们已经在默认设置中定义了minChars和maxChars 。仅当我们在初始化中传递值时，这些函数才会执行。让我们为这些验证器定义函数：

minChars: function() {
  if (this.settings.password.length < this.settings.minChars) {
    this.info = "Password should have at least " + this.settings.minChars + " characters";
    return false;
  } else {
    return true;
  }
},

maxChars: function() {
  if (this.settings.password.length > this.settings.maxChars) {
    this.info = "Password should have maximum of " + this.settings.maxChars + " characters";
    return false;
  } else {
    return true;
  }
},

这两个函数检查给定密码的最小和最大字符长度，并返回布尔值。接下来，我们需要一种方法来调用这些手动验证。因此，我们创建了一个名为customValidators的函数，如以下代码所示。

customValidators: function() {
  var err = 0;

  if (this.settings.minChars != "") {
    if (!this.minChars()) {
      err++;
    }
  }

  if (this.settings.maxChars != "") {
    if (!this.maxChars()) {
      err++;
    }
  }

  return err;
}

在这里，我们执行所有自定义验证器，并增加err变量的值。正如你所看到的， if条件只会被执行时设置的值不为空。因此，如果我们在初始化时不传递参数，则这些验证器将不会执行。最后，将此函数称为init函数的第一行，以获取自定义验证器上的错误。

计算zxcvbn强度

这是此插件的最后一部分，我们在其中使用zxcvbn计算实际的密码强度。使用以下代码更新init函数。

init: function() {
  var errors = this.customValidators();

  if ("" == this.settings.password || "" == this.settings.confirm_pass) {
    this.info = "Password fields cannot be empty";
  } else if (this.settings.password != this.settings.confirm_pass) {
    this.info = "Passwords doesn't match";
  } else if (errors == 0) {
    var strength = zxcvbn(this.settings.password, this.settings.blackList);

    switch (strength.score) {
      case 0:
        this.info = "Very Weak";
        break;
      case 1:
        this.info = "Very Weak";
        break;
      case 2:
        this.info = "Weak";
        break;
      case 3:
        this.info = "Medium";
        break;
      case 4:
        if (this.settings.advancedStrength) {
          var crackTime = String(strength.crack_time_display);

          if (crackTime.indexOf("years") !=-1) {
            this.info = "Very Strong";
          } else if (crackTime.indexOf("centuries") !=-1) {
            this.info = "Perfect";
          }
        } else {
          this.info = "Strong";
        }

        break;
    }
  }

  $(this.element).html(this.info);
},

当定制验证器检测到零错误时，我们将进行实际强度计算。我们可以将初始化过程中定义的password和列入黑名单的单词的值传递给zxcvbn函数。它将使用本文前面提到的属性来生成结果。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

我们使用switch语句过滤分数范围从零到四的分数，以提供不同的强度级别。您可以根据自己的喜好更改级别。对于前四个级别，我刚刚考虑了强度score 。另外，我们可以使用crack_time_display属性进一步定义子级别。在此插件中，我仅将其用于强度得分为4。您也可以将其用于其他分数。

crack_time_display值以用户友好的方式生成破解密码所需的时间。因此，我们使用crack_time_display值将该级别分为两个子级别。如果用户决定不启用高级强度，则将使用称为“ Strong的常规级别。随意使用这些属性来创建高级密码表。

最后，我们必须修改样板代码的最后一部分，如下所示，以启用多个初始化，因为我们必须在每个键事件上执行此功能。

$.fn[pluginName] = function (options) {
  this.each(function() {
    $.data(this, "plugin_" + pluginName, new Plugin(this, options));
  });
  return this;
};

现在我们已经完成了插件的实现。让我们通过看下面的代码来看看它的作用。

<script type="text/javascript" >
  $(function() {
    $("#pass").keyup(function() {
      initializeStrengthMeter();
    });

    $("#confirm_pass").keyup(function() {
      initializeStrengthMeter();
    });
  });

  function initializeStrengthMeter() {
    $("#pass_meter").PasswordStrengthManager({
      password: $("#pass").val(),
      confirm_pass : $("#confirm_pass").val(),
      minChars : "5",
      maxChars : "15",
      blackList : ["efewf"],
      advancedStrength : true
    });
  }
</script>

我们使用一个名为initializeStrengthMeter的通用函数来初始化插件。该功能将在用于密码计量器的元素上调用。因此，定义一个空的div元素，并将该元素的id分配给插件初始化程序。在这里，我们拥有插件中定义的所有属性。您可以根据需要添加或删除它们。最后，我们必须把这种对keyup两个密码和确认密码字段的事件，以启用密码米。

结论

在本教程中，我们确定了普通密码强度计的缺点，并使用zxcvbn进行了实际强度计算。我们开发了一个jQuery插件来处理密码验证的常见用例。您可以在此处查看本教程的演示并下载源代码。可以根据自己的要求随意扩展插件。

翻译自: https://www.sitepoint.com/developing-password-strength-plugin-jquery/

jquery密码强度

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery密码强度_使用jQuery开发密码强度插件

jquery密码强度密码是最常用的身份验证机制。即使许多站点都采用多步身份验证，密码仍然在确保帐户安全方面起着关键作用。强大的密码对于帐户安全至关重要，本文将教您如何开发可衡量密码强度的插件。我们将使用zxcvbn库和jQuery为网站构建功能全面的密码强度表。介绍通常，大多数用途是非技术性的，并且对身份验证的工作知识有限。即使对于技术用户，也很难弄清楚哪些密码强度高而哪些密...
复制链接

扫一扫