WebDesign Dackel

jQueryを使ったパスワードの強度判定用プラグイン、jQuery.pwdMeasure.jsを書いてみた

jQueryを使ったパスワードの強度判定用プラグイン、jQuery.pwdMeasure.jsを書いてみた

Hatena0
Google+0
Pocket0
Feedly0

少し前にユーザが入力したパスワードの強度を判定して表示する、という要件がありました。

それで、何か良いプラグインは無いかなと探してみると幾つか候補があがったのですが、それぞれ良いところはあっても中々要件に合わず…。

サービスの要件に合わせてカスタマイズの出来るものが欲しいと思い、とりあえず自作してみました。


追記:2015.06.16
コムテブログさんでちらっとご紹介頂いていました!ありがとうございますー!

今っぽくなった!トレンドをおさえたjQuery プラグインまとめ | コムテブログ

これからも少しずつですが、アップデートしていく予定なのでよろしくお願いします。

DEMO

jQuery.pwdMeasure.jsデモ画像

プラグイン用にページを用意しましたのでそちらからご確認ください。
WordPressのパスワード再送とかでもある、あれです。

DEMOページ

不満に思っていた箇所

強度の判定結果を表示してくれるのはいいのですが、プラグインによっては表示内容を変えられなかったり、書き換えるためには中身をいじる必要があったり…。

jQuery.pwdMeasure.jsの特徴

不満だった箇所の改善と自分なりに使いやすいかなと思ってつけた機能など、特徴は下記です。

  • 表示する内容を自由に変更できる
  • 強度を示す値をパーセント表示できる
  • 最低限必要な強度を設定できる
  • 単一の入力フィールド、確認用の入力フィールドに対応
  • 強度の調整ができる
  • 最低限のAPIを提供することで、要件に合わせたカスタマイズができる

必要となる要件やデザインに対応できるように意識してみました!

基本の使い方

プラグインの読み込み

いつもとおり、jQueryを読み込んだ後、jQuery.pwdMeasure.jsを読み込みます。

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeasure.min.js"></script>

追記:2015.02.14

Bowerにも対応しました。

$ bower install jquery-pwd-measure

HTML

入力用の<input>要素と強度を表示するための要素を記載します。

<input type="password" id="pwd" name="pwd" value="" placeholder="Your Password">
<p id="pm-indicator"></p>

強度表示用の要素はデフォルトで#pm-indicatorとなっていますが、変更可能です。勿論表示しないことも出来ます。

JavaScript

後は入力用の<input>要素に対してpwdMeasureを実行するだけです。

$(document).ready(function(){
  $("#pwd").pwdMeasure();
});

その他オプションによって挙動を変えることが出来るので、詳細はプラグインのページからご確認いただけたらと思います。

プラグインページ

ダウンロード

Github、またはこちらからダウンロードできます。

強度判定のアルゴリズムについて

プラグインの作成にあたって下記プラグインに使われているアルゴリズムを参考にさせて頂きました。ありがとうございます。

pStrength jQuery Plugin

注意点

フロントエンドも大事ですが、バックエンドでのチェックも必ずするようにしましょう!
あくまで、ユーザビリティの向上を目的とするのが良いかと思います。

また、当プラグインの使用にあたって発生する障害などは自己責任で宜しくお願いします。。

更新履歴

2015.08.10 追記

デモページのプチリニューアルの為、URLを変更しました。