今回の記事ではJavaScriptでパスワードジェネレータを作ってみます。
プログラムはGitHubにも置いてあります。
目次
パスワード生成で便利なメソッド
まずはJavaScriptで用意されている便利なメソッドを紹介します。
ここで紹介するメソッドを使うと、パスワードジェネレータが簡単に作れますよ。
String.fromCharCode()メソッド
このメソッドは、UTF-16コードユニットのシーケンスを指定すると、対応する文字列を返します。
詳細についてはMDN String.fromCharCode()を参照してください。
例えば次のようにして文字列を取得できます。
コード
実行結果
(dx
この例では引数を適当に指定して、まずは実行結果を確認してみました。
実際に使用するパスワードでは、様々な種類の文字を使用しますよね。
引数に指定する値を知りたいときには、Unicode一覧で確認しましょう。
Wikipediaにも情報がありますので、参考にリンクを貼っておきます。
次の画像は表から一部を抜粋したものになります。
パスワードで使用したい文字をこの中から選びますが、一般的に使われるのは、英文字の大文字・小文字、数字、記号だと思います。
具体的には、表内の「!」から「~」の間の文字ですね。
この表では16進数表記になっているので、10進数表記を確認しておきます。
例えば「!」の場合16進数で”0021″なので、10進数で表すと16*2+1で”33″となります。
同様にして、「~」の場合は16進数で”007E”なので、16*7+14で”126″となります。
よって、これらの文字を配列に格納するJavaScriptのコードは、次のように記述できますね。
この記事ではfor文でパスワードに使用する文字を配列charsに格納するようにしました。
コード
実行結果
(94) [“!”, “””, “#”, “$”, “%”, “&”, “‘”, “(“, “)”, “*”, “+”, “,”, “-“, “.”, “/”, “0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “:”, “;”, “<“, “=”, “>”, “?”, “@”, “A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”, “[“, “\”, “]”, “^”, “_”, “`”, “a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”, “{“, “|”, “}”, “~”]
RandomSource.getRandomValues()メソッド
このメソッドは、配列を引数に与えると、すべて乱数で埋められます。
詳細についてはMDN Random.Source.getRandomValues()を参照してください。
次にこのメソッドを使用したコードの例を示します。
この例では、まず1行目で要素数が8の配列を用意しています。
2行目で配列の内容を出力していますが、配列の各要素はゼロで初期化されていることがわかります。
4行目でgetRandomValuesメソッドで乱数列を生成し、5行目で結果を出力しています。
1行目で作成した配列の各要素に乱数が格納されていますね。
コード
実行結果
Uint8Array(8) [0, 0, 0, 0, 0, 0, 0, 0]
Uint8Array(8) [176, 247, 28, 137, 53, 43, 239, 54]
この各要素の乱数を使って、fromCharCode()メソッドで作成した配列から要素を取り出します。
要素から文字を取り出して組み合わせれば、ランダムに生成した文字列になりますので、パスワードとして使用できるかと思います。
String.prototype.match()メソッド
このメソッドは、引数で指定した正規表現に対する文字列のマッチング結果を返します。
詳細についてはMDN String.prototype.match()を参照してください。
次にこのメソッドを使用したコードの例を示します。
この例では、str1とstr2という2つの文字列に大文字の英字が含まれている確認しています。
対象の文字が含まれている場合には、配列が返されます。
配列の要素数をカウントすれば、文字列に含まれる大文字の英字の数を確認することも可能です。
パスワードに「大文字の英字を含む」「数字を含む」といった条件をつけるときにとても便利です。
コード
実行結果
(2) [“A”, “F”]
null
実際にパスワードジェネレータを作る
では、ここまでで紹介したメソッドを使って、パスワードジェネレータを作ってみます。
この記事ではパスワードの生成処理をPasswordGeneratorというクラスにまとめてみました。
7行目のpassword()メソッドで、パスワードを生成します。引数lengthでパスワードの文字数を指定することができます。
14〜17行目では、パスワードで使用する文字をfromCharCode()メソッで取得して、配列validCharsに格納します。
20〜23行目で配列validCharsからランダムに文字を取得して、連結して文字列とすることをパスワードを生成します。
21行目で乱数を生成するためのrand()メソッドを使用しています。このメソッドは、29〜42行目で定義しています。
25行目で生成したパスワードを返します。
31〜32行目では乱数を生成してarrに格納しています。ここで生成した乱数は、配列validCharsの添字の範囲を超えないようにする必要がありますので、35〜39行目でチェックをして、範囲内であれば値を返すようにしています。
もし、arrにこの条件を満たす値が存在しなければ、再度rando()メソッドを呼び出します。
46行目以降は実行確認ですが、実行結果から意図した通りのパスワードを生成できていることが分かります。
ランダムなパスワードを生成しているので、これは実行結果の一例です。実行するたびに異なるパスワードが生成されると思います。
コード
実行結果
‘Xqb;n[T
=`w”o0}fOB9)$/ww
実践的な使い方
基本的なパスワードジェネレータが作れたので、もう少し実践的な例を考えてみます。
フォームにパスワード自動生成ボタンを設置する
ユーザー登録フォームを作成するときには、パスワードの入力欄が必要になることが多いと思います。
入力欄の横にパスワードの自動生成ボタンを設定してみます。
入力フォームのイメージは次のような感じです。
password1〜password3という入力欄があり、右隣にある生成ボタンをクリックすると、対応する入力欄にパスワードを設定するようにします。
次にコードの例を示します。
index.htmlの1〜15行目でフォーム部品の設定をしています。
17〜18行目でJSファイルの読み込み、19〜21行目で処理の実行をしています。
20行目で”generator”を引数として指定していますが、ここで指定したクラスが付けられた要素にパスワード生成のイベントを設定します。
今回の例では、button要素に”generator”というクラスをつけていますので、これらのボタンをクリックしたときに、パスワード生成のイベントが実行されます。
さらにbutton要素にカスタムデータ属性を設定していますが、この属性値のクラスがつけられた要素に生成したパスワードをセットします。
password-generator.jsの内容はlist_5.jsとほとんど同じで、list_5.jsの45行目以降を削除しただけです。
password.jsでイベント処理の設定を行います。
18行目のlistenClick()メソッドでは、クリックイベントリスナーを設定します。
実際のクリック時の処理は、28行目のonClick()メソッドで定義していますが、この例では、ランダムなパスワードを生成して、入力欄にセットします。
対象となる入力欄は、デフォルトでは41行目のdefaultTarget()メソッドで決まります。
クリックする要素にカスタムデータ属性”data-password-target”を付つけると、指定したクラスをもつ要素に対して生成したパスワードをセットします。
デフォルト以外の方法でtargetを取得したいときには、コンストラクタの引数としてカスタム関数を指定することもできます。
51行目のcustomPassword()メソッドでは、パスワード生成します。customとしているのは、ここでパスワードの条件を指定することを想定しているためです。
この例では生成するパスワードの長さを8文字としています。
65行目は属性値を取得するためのヘルパー関数です。
実行結果にパスワードの生成結果を示します。
この結果から意図した通りの結果が得られていることが分かります。
コード
実行結果
パスワードの条件を複雑にしてみる
先ほどの例では、パスワードの条件は「長さが8文字」というものだけでした。
ここでは、生成されるパスワードにもう少し複雑な条件を設定してみます。
次のコードの例を示します。
57行目でisStrongEnough()メソッドを呼び出して、パスワードが条件を満たしているか確認しています。
このメソッドは65行目で定義しています。今回の例では、「大文字の英字」「小文字の英字」「数字」「記号の-,?いずれか」を1文字以上含むという条件を設定しています。
実行結果にパスワードの生成結果を示します。
意図した通りのパスワードを生成できていることが分かります。
コード
実行結果
まとめ
今回の記事では、JavaScriptでパスワードジェネレータを作る方法を紹介しました！
入力フォームにパスワード自動生成する機能をつければ、より使いやすいフォームになると思いますので、みなさんも試してみてはいかがでしょうか。
コメントを残す