スキップしてメイン コンテンツに移動

パスワードの強さを表示するjQueryプラグイン「password_strength_plugin」(js解説付き)

こんにちは、クリエイティブフレークです。





Webサイトでパスワードを入力すると自動的にそのパスワードの強さを表示してくれるやつです。

そのシンプルで設置も簡単、オリジナルの強さに書き換えるのも簡単なjQuery「password_strength_plugin」の紹介と解説です。



↓↓まずはjQuery本体↓↓
jQuery (Google Hosted)

※今回はダウンロードせずGoogleに読みに行かせています。



↓↓そしてpassword_strength_pluginのダウンロード↓↓
password_strength_plugin





まずはHTMLから!!

<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="right"><label>ユーザー名 : </label></td>
<td><input type="text" name="user_name" id="user_id"></td>
</tr>
<tr>
<td align="right"><label>パスワード : </label></td>
<td><input type="password" name="pass_word" class="password_test"></td>
</tr>
</table>


・tabelタグじゃなくてもリストでも、何でもいいのですが、ユーザー名とパスワードを入力させるinputボックスを作ります。
・JavaScriptで必要となるので、ユーザー名のボックスにはidを付けておきましょう。



次にJavaScript↓

$(document).ready( function() {
 $(".password_test").passStrength({
  userid: "#user_id"
 });
});


・HTML内に記述しても(<script type="text/javascript">●●●</script> ●●●内に記述)、外部ファイルから読ませてもOK



本題のpassword_strength_plugin.js を抜粋↓

▼34行目〜38行目

$.fn.shortPass = 'Too short';
$.fn.badPass = 'Weak';
$.fn.goodPass = 'Good';
$.fn.strongPass = 'Strong';
$.fn.samePassword = 'Username and Password identical.';


これが結果表示されるので、必要に応じて日本語だったり、好きな言葉に書き換えてください。

▼77行目〜122行目

$.fn.teststrength = function(password,username,option){
var score = 0; 

//password < 4
if (password.length < 4 ) { this.resultStyle =  option.shortPass;return $(this).shortPass; }

//password == user name
if (password.toLowerCase()==username.toLowerCase()){this.resultStyle = option.badPass;return $(this).samePassword;}

//password length
score += password.length * 4;
score += ( $.fn.checkRepetition(1,password).length - password.length ) * 1;
score += ( $.fn.checkRepetition(2,password).length - password.length ) * 1;
score += ( $.fn.checkRepetition(3,password).length - password.length ) * 1;
score += ( $.fn.checkRepetition(4,password).length - password.length ) * 1;

//password has 3 numbers
if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} 

//password has 2 symbols
if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;}

//password has Upper and Lower chars
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){  score += 10;} 

//password has number and chars
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){  score += 15;} 
//
//password has number and symbol
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)){  score += 15;} 

//password has char and symbol
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)){score += 15;}

//password is just a numbers or chars
if (password.match(/^\w+$/) || password.match(/^\d+$/) ){ score -= 10;}

//verifying 0 < score < 100
if ( score < 0 ){score = 0;} 
if ( score > 100 ){  score = 100;} 

if (score < 34 ){ this.resultStyle = option.badPass; return $(this).badPass;} 
if (score < 68 ){ this.resultStyle = option.goodPass;return $(this).goodPass;}

this.resultStyle= option.strongPass;
return $(this).strongPass;


このjsの中枢、計算式です。
このjsは「ポイント制」でよいパスワードには加点、悪いパスワードだったら減点していき、0点〜100点で判断します。



計算結果の判別
最後の方にもありますが、
・34点未満・・・badPass(悪いパスワード)
・68点未満・・・goodPass(よいパスワード)
・68点以上・・・strongPass(強いパスワード)
となっています。

※0点未満=0、100点以上=100としています。



パスワードが短すぎるとき
最初の方に戻って、1文字〜3文字はshortPass(短すぎるパスワード)としています。 ↑
例えば、パスワードを6文字以上とさせたいなら、
if (password.length < 6 ) { this.resultStyle = option.shortPass;return $(this).shortPass; }
としましょう。



パスワードがユーザー名と同じだったとき
また、ユーザー名とパスワードが一緒ならsamePasswordとしています。



ポイントに関するルール
・パスワードに2つの記号が含まれている・・・プラス5点
・パスワードにアルファベットの大文字と小文字がある・・・プラス10点
・パスワードがアルファベットと数字から構成されている・・・プラス15点
・パスワードがアルファベットと記号から構成されている・・・プラス15点
・パスワードが数字だけ、またはアルファベットだけ・・・マイナス10点



パスワードの長さに関する計算
ここにも注意したいのが、
パスワードの長さ×4=点数
としていますが、いくらパスワードが長くても例えば「1111111」や「abababab」などのように、規則的な繰り返しがあるとよいパスワードとはいえません。

そこで、88行目〜91行目では1文字の繰り返し(例:aaaaa)、2文字の繰り返し(例:ababab)、3文字の繰り返し(例:abcabc)、4文字の繰り返し(例:abcdabcd)には加点させていないことに注意です。



「password_strength_plugin」のサンプルデモ




Written by Creative Flake

コメント

このブログの人気の投稿

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。 一度は聞いたことがあるかもしれない「ゲシュタルト」。 ゲシュタルト 人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ。 人間の脳がものの形、要素をどのように認識するか、ということですね。 人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。 ゲシュタルトの法則1 : 近接の法則 近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。 ゲシュタルトの法則2 : 類同の法則 類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。 ゲシュタルトの法則3 : 共通運命の法則 共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。 共通運命の法則は、近接の法則や類同の法則よりも強く働く。 ゲシュタルトの法則4 : 良い連続の法則 良い連続の法則は、図形はつながった形になりやすいと認識されやすい。 近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。 ゲシュタルトの法則5 : 閉合の法則 【】や()のように、閉じた形は同じグループだと認識されやすい。 】【 は同じグループと認識しづらい。 ゲシュタルトの法則6 : 面積の法則 小さいものが図として、大きいものが背景として認識されやすい。 ゲシュタルトの法則7 : 対称の法則 対称な図形は閉じた図として認識されやすい。 このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。 たとえばリモコンのボタン配列。 数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。 こちらは私のMacのドック。 急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。 Webデザインにおいては、もしすべてのパーツが単調に置かれて

Google「ハングアウト」の絵文字が可愛すぎる。

こんにちは、クリエイティブフレークです。 チャットやインスタントメッセージ機能と言えば、LINEやFacebook、Skypeなど今やたくさんありますが、みなさんはどれを使ってますか? 私はこういうのを使い始めたのが、かれこれ10年近く前になりますねー。 MSNメッセンジャーと、Yahooメッセンジャーを使っていました。 今回はGoogle「ハングアウト」の絵文字がゆるかわな件をご紹介。 ハングアウトの前身が「Googleトーク」というものなのですが、まさに最近「ハングアウト」へ移行したばかり。 ▼他のチャットシステムと同じような使い勝手 ▼絵文字(顔文字) ゆるい! ▼絵文字(乗り物) かわいい! ▼絵文字(いろいろ) 今年流行のカラーとフラットデザインを用いたアイコンは、なんと日本初! 絵文字は一覧から選べるだけでなく、キーボードからの入力も可能! ▼Google IMEで「くだもの」と入力すると いろいろ出てきます。 ここでのプレビューとハングアウトで送信される絵文字はちょっと違いますが、断然ハングアウトの絵文字がかわいい! ぜひぜひ試してみてください。 Googleハングアウト Written by Creative Flake

Photoshopで文字にアンチエイリアスをかける

こんにちは、クリエイティブフレークです。 Photoshopで文字を書いていると、「太字を選択するほどでもないけど、あと気持ちちょっと太かったらいいのに!」、「あとちょっとクリアに見せたいのに!」と思ったことはありませんか? そんなときに活用したいのが「アンチエイリアス」です。 「エイリアス」とは曲線がギザギザ、ガタガタに表現されてしまうことで、ドット絵みたいに見えます。 なので「アンチ」って言うんですね。 実際に見比べてみると ▲ヒラギノ角ゴシックPro 24pt 明らかに「なし」を選択したものはギザギザです。 「太く」と「シャープ」はちょっと太い感がありますが、「鮮明」と「なめらか」の差が難しいですね。 今度はフォントサイズを変えてみました。 ▲ヒラギノ角ゴシックPro 14pt 個人的には、文字が太くなる「シャープ」と「太く」がややジャギー感(ギザギザ感)が残っていますが、「鮮明」と「滑らかに」はフォントサイズを小さくしたときに潰れてしまいやすいイメージです。 では実際どうやって変更するの?なのですが、Photoshop CS6を例に説明します。 ▲テキストツール(Tの形)を選びます ▲文字を書いたら上のアンチエイリアスを選びます(うちのマシンが英語ですみません) Web用や印刷用など、用途によって強弱を使い分けたいですねヽ(・∀・)ノ Written by Creative Flake