使用jQuery開發密碼強度外掛程式

密碼是最常用的身份驗證機制。即使許多站點都採用多步身份驗證，密碼仍然在確保帳戶安全方面起著關鍵作用。強度高的密碼對於帳戶安全至關重要，本文將教您如何開發可衡量密碼強度的外掛程式。我們將使用zxcvbn庫和jquery為**構建功能全面的密碼強度表。

通常，大多數用途是非技術性的，並且對身份驗證的工作知識有限。即使對於技術使用者，也很難弄清哪些密碼強度高，哪些密碼容易破解。例如，簡單增加密碼長度並不一定會使密碼破解變得更加困難。

密碼強度計計算使用者輸入密碼的強度。通常，它以強度級別顯示，如非常弱，弱，良好，強等。儀表在每個使用者輸入上都會更新，因此計算應作為onkeypress或onkeyup事件處理程式進行。當使用者嘗試建立新帳戶時，可以檢測到並拒絕弱密碼，從而提高了站點的整體安全性。

應該有明確定義的標準來計算密碼強度。大多數開發人員傾向於將手動驗證條件用於密碼強度計。這是加強密碼的很好指南，但由於它沒有考慮破解密碼所需的時間，因此可能不是最準確的技術。相反，大多數手動驗證取決於以下條件：

這不是對密碼強度的現實估計，因為通過這些驗證生成的某些密碼將很容易破解。因此，我們需要乙個精確的測量系統來定義密碼強度。

考慮以下**，該**使用zxcvbn函式。第乙個引數是必需的，用於儲存要評估的密碼。在這種情況下，密碼為「密碼」。第二個引數是可選的，可以包含乙個列入黑名單的值的陣列。通常，我們不希望密碼與使用者名稱相似。因此，我們至少必須使用使用者名稱作為列入黑名單的值才能獲得強密碼。

zxcvbn函式返回乙個包含以下屬性的物件。

我們可以使用許多引數來提高密碼強度，但是我們不希望密碼驗證的複雜性過高。因此，通常，我們將僅使用結果的score引數。如果有必要，我們可以加強使用密碼crack_time_display或crack_time與配合score。

我們將使用jquery構建可重用的密碼強度計，並將使用jquery plugin boilerplate維護標準結構。該儀表可以根據您的喜好以多種方式開發。一些外掛程式提供了實際的密碼計量器小部件，而某些外掛程式提供了密碼強度訊息，以便使用者可以將其插入任何喜歡的地方。我們將重點關注後者，因為它在設計密碼表時增加了更多的靈活性。這是我們的電表的要求：

現在開啟jquery.password.strength.js檔案。我假設您熟悉jquery外掛程式樣板。首先，我們必須更新外掛程式名稱和預設選項部分，如以下**所示。在這裡，我們將預設外掛程式名稱更改為passwordstrengthmanager，並將預設選項替換為多個外掛程式特定選項。我們有兩個選項可用於指定密碼值和確認密碼字段。我們也有乙個定義黑名單單詞的陣列。接下來，我們有兩個選項minchars和maxchars用於實現自定義驗證。最後，我們有乙個名為advancedstrength的選項來啟用或禁用使用裂紋時間來計算強度。

var pluginname = "passwordstrengthmanager",
defaults = ;

接下來，我們可以進入外掛程式建構函式，如以下**所示。除了用於保留密碼表生成的訊息的資訊設定之外，這裡還有預設的樣板**。將外掛程式用於任何html元素後，將呼叫此函式。

function plugin(element, options) , defaults, options);
this._defaults = defaults;
this._name = pluginname;
this.init();
this.info = "";
}

外掛程式的init函式用於初始化外掛程式特定的**並啟動該過程。讓我們看一下修改後的init函式（如下所示）。首先，我們執行強制性驗證，例如檢查空密碼和兩個密碼字段是否相等。this.settings將包含傳遞給外掛程式初始化程式的預設值或自定義值。密碼表的訊息儲存在this.info。最後，我們將訊息設定為通過初始化傳遞的密碼表元素。

init: function()  else if (this.settings.password != this.settings.confirm_pass) 
$(this.element).html(this.info);
},

接下來，我們進入自定義驗證器部分。一些站點更喜歡自己的限制，例如密碼的字元範圍或防止某些字元。我們將為minchars和maxchars實現兩個驗證器。我們已經在預設設定中定義了minchars和maxchars。僅當我們在初始化中傳遞值時，這些函式才會執行。讓我們為這些驗證器定義函式：

minchars: function()  else 
},maxchars: function()  else 
},

這兩個函式檢查給定密碼的最小和最大字元長度，並返回布林值。接下來，我們需要一種方法來呼叫這些手動驗證。因此，我們建立了乙個名為customvalidators的函式，如以下**所示。

customvalidators: function() 
}  if (this.settings.maxchars != "") 
}  return err;
}

在這裡，我們執行所有自定義驗證器，並增加err變數的值。正如你所看到的，if條件只會被執行時設定的值不為空。因此，如果我們在初始化時不傳遞引數，則這些驗證器將不會執行。最後，將此函式稱為init函式的第一行，以獲取自定義驗證器上的錯誤。

這是此外掛程式的最後一部分，我們在其中使用zxcvbn計算實際的密碼強度。使用以下**更新init函式。

init: function()  else if (this.settings.password != this.settings.confirm_pass)  else if (errors == 0)  else if (cracktime.indexof("centuries") !=-1) 
} else 
break;
}}  $(this.element).html(this.info);
},

當定製驗證器檢測到零錯誤時，我們將進行實際強度計算。我們可以將初始化過程中定義的password和列入黑名單的單詞的值傳遞給zxcvbn函式。它將使用本文前面提到的屬性來生成結果。

我們使用switch語句過濾分數範圍從零到四的分數，以提供不同的強度級別。您可以根據自己的喜好更改級別。對於前四個級別，我只是考慮了強度score。另外，我們可以使用crack_time_display屬性進一步定義子級別。在此外掛程式中，我僅將其用於強度得分為4。您也可以將其用於其他分數。

crack_time_display值以使用者友好的方式生成破解密碼所需的時間。因此，我們使用crack_time_display值將該級別分為兩個子級別。如果使用者決定不啟用高階強度，則將使用稱為「strong的常規級別。隨意使用這些屬性來建立高階密碼表。

最後，我們必須修改樣板**的最後一部分，如下所示，以啟用多個初始化，因為我們必須在每個鍵事件上執行此功能。

$.fn[pluginname] = function (options) );
return this;
};

現在我們已經完成了外掛程式的實現。讓我們看下面的**，看看它的作用。

我們正在使用乙個名為initializestrengthmeter的通用函式來初始化外掛程式。該功能將在密碼表使用的元素上呼叫。因此，定義乙個空的div元素，並將該元素的id分配給外掛程式初始化程式。在這裡，我們擁有外掛程式中定義的所有屬性。您可以根據需要新增或刪除它們。最後，我們必須把這種對keyup兩個密碼和確認密碼欄位的事件，以啟用密碼公尺。

from:

使用jQuery開發密碼強度外掛程式

jQuery外掛程式之密碼強度檢測

jquery 如何開發自己的jQuery外掛程式

如何使用jQuery寫乙個jQuery外掛程式

使用jQuery開發密碼強度外掛程式

jQuery外掛程式之密碼強度檢測

jquery 如何開發自己的jQuery外掛程式

如何使用jQuery寫乙個jQuery外掛程式

相關推薦