Electronでパスワード生成アプリを作ってみる
どこかのサイトに登録する際に必ず指定するパスワードですが、
考えるのも面倒なので、ランダムな文字列を出力するシェルスクリプトを使っていました。
しかし、何回か使っているといくつか不満な点が・・・。
- パスワードに使用できない記号を含んでしまう
- 過去に似たようなパスワードになっている?($RANDOMを使っているから?)
そこで、勉強ついでにパスワード生成アプリを作ることにしました。
MacでもWindowsでも使いたいため、クロスプラットフォームで実装できるElectronを使用することに。(Electronを使う意味がない気がしますが、勉強ということで)
ひとまず、パスワード生成アプリに実装したい機能は3つ。
- 文字数が指定可能である
- 使用できない記号または使用できる記号が指定可能である
- パスワードの強度を判定する
Electronの使い方は、こちらのページを参考にHello Worldが表示されるところまでは実行できました。
qiita.com
実装
Hello Worldが表示される状態をベースに、パスワードを生成してalertで表示する処理を実装します。
パスワードを生成するjavascriptは、genPassword.jsとしてhtmlと同じ階層に作成しています。
html側
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron-Password</title> </head> <body style="background-color: #fff"> <p>パスワード生成プログラム</p> <button onclick="generatePassword()">パスワードを生成する</button> <script src="genPassword.js"></script> </body> </html>
function generatePassword() { var length = 10; // 文字数は10文字固定 var pw = ""; for (var i=0; i < length; i++) { pw += randomChar(); } alert(pw); } function randomChar() { var randChar = ""; var randNum; // 33 ~ 126までの乱数を取得 randNum = Math.round( Math.random() * 93 ) + 33; randChar = String.fromCharCode(randNum); return randChar; }
やっていること
- ボタンを押すと33〜126までの乱数を生成
- 乱数(asciiコード)から文字に変換
- 変換された文字をつなげる
Electron-Passwordという名前で作成したので、 以下コマンドで実行します。
このとき、Electron-Passwordの一つ上の階層で実行します。
> electron Electron-Password
実行の様子
デザインもへったくれもないので殺風景ですが、
実行すると、alertにて半角英数字+記号で構成された文字列が表示されます。
今のところ、3つの機能のうちの1つも実装できていないので、
次は文字数を指定できるようにしていきたいと思います。