Electronでパスワード生成アプリを作ってみる 3 (パスワードに使用する記号を指定する)
前回の続きです。
blauthree.hatenablog.com
使用できる記号を選べるようにします。
とりあえず使用する記号を選択する方法としては2つ考えました。
- 使用可能な記号のみを選択する
- 使用禁止する記号を選択する
しかし、サイトによって使用できる記号がバラバラであることを考えると、
使用禁止する記号を指定するのは現実的ではない気がするので、
使用可能な(使用したい)記号のみを選択できるようにします。
ここで一つ、巷にあるパスワード生成サービスを見てみることにしました。
見た感じだと記号を使用する・使用しないを選択できるようになっていますが、
個別に使用したい文字を選ぶことはできなさそうでした。
ここではせっかくなので、個別にチェックボックスで選べるようにしたいと思います。
パスワードに使うであろう記号は、キーボードに印字されているものになると考えられます。
!"#$%&'()-=^~\|`@[]{};+:*,<>./?_
数えると32文字でした。
32個もチェックボックスを置くのかと思ってしまいましたが、
愚直にやってみました。
html側
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron-Password</title> </head> <body style="background-color: #fff"> <p>パスワード生成プログラム</p> <div> 文字数 <input type="range" id="passLength" value="1" min="1" max="99" step="1" oninput="getPasswordLength();"> <output id="length">1</output> </div> <!-- ここにチェックボックスをべた書きしてしまう HTML特殊文字は一応エスケープしておく また、正規表現を使用するため特殊文字となる記号はあらかじめエスケープする(value) --> 使用する記号 <div> <div> <input type="checkbox" name="sign" value="!">! <input type="checkbox" name="sign" value=""">" <input type="checkbox" name="sign" value="#"># <input type="checkbox" name="sign" value="\$">$ <input type="checkbox" name="sign" value="%">% <input type="checkbox" name="sign" value="&">& <input type="checkbox" name="sign" value="'">' <input type="checkbox" name="sign" value="\(\)">() <input type="checkbox" name="sign" value="\-">- <input type="checkbox" name="sign" value="=">= </div> <div> <input type="checkbox" name="sign" value="\/">/ <input type="checkbox" name="sign" value="\\">\ <input type="checkbox" name="sign" value="\^">^ <input type="checkbox" name="sign" value="~">~ <input type="checkbox" name="sign" value="\|">| <input type="checkbox" name="sign" value="@">@ <input type="checkbox" name="sign" value="`">` <input type="checkbox" name="sign" value="\[\]">[] <input type="checkbox" name="sign" value="\{\}">{} <input type="checkbox" name="sign" value=";">; </div> <div> <input type="checkbox" name="sign" value="\+">+ <input type="checkbox" name="sign" value=":">: <input type="checkbox" name="sign" value="\*">* <input type="checkbox" name="sign" value="<>"><> <input type="checkbox" name="sign" value=",">, <input type="checkbox" name="sign" value="\.">. <input type="checkbox" name="sign" value="\?">? <input type="checkbox" name="sign" value="_">_ </div> </div> <button onclick="generatePassword()">パスワードを生成する</button> <script src="genPassword.js"></script> </body> </html>
括弧系はまとめているため、結果的にチェックボックスは28個になりました。
見た目的にはアレですが、これで進めます。
次にjavascript側に以下の処理を追加します。
- 選択されている記号を取得する
- 使用する記号を含んだパスワードを生成する
2では正規表現を使って使用する記号を含むかを判定しています。
js側
function generatePassword() { var length = document.getElementById("passLength").value; // テキストボックスの値を取得 var pw = ""; for (var i=0; i < length; i++) { pw += randomChar(); } alert(pw); return pw; } function randomChar() { var randChar = ""; var randNum; var sign = getSelectedSign(); // 使用する記号 // 半角英数字 + 使用する記号を含めた正規表現オブジェクト var regexp = new RegExp("[A-Za-z0-9" + sign + "]+"); while (true) { randNum = Math.round( Math.random() * 93 ) + 33; // 33 ~ 126 randChar = String.fromCharCode(randNum); // 半角英数字または使用する記号の場合はループから抜ける(2の処理) if (randChar.match(regexp)) { break; } } return randChar; } function getPasswordLength() { var length = document.getElementById("passLength").value; document.getElementById("length").value = length; } /** * 選択されている記号を取得する(1の処理) */ function getSelectedSign() { var elements = document.getElementsByName("sign"); var selectedSign = ""; // 使用する記号 // nameがsignとなっているチェックボックスの状態を確認 for (var i = 0; i < elements.length; i++) { // チェックされていれば使用する記号とする if (elements[i].checked) { selectedSign += elements[i].value; } } return selectedSign; }
記号なしVer
記号ありVer
実装はこれでいいのか怪しいところもありますが、
ひとまず動いているっぽいので、今のところはこれでよしとします。