javascriptでランダムなパスワードを自動生成

プログラム動作

数字 英大文字 英小文字 記号
長さ

ソースコード

<script>
      
      //パスワード初期設定。letで変数に文字を入れる。
      let password_numeric = "1234567890";
      let password_uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let password_lowercase = "abcdefghijklmnopqrstuvwxyz";
      let password_symbol = "!\"#$%&()=~|@[];:+-*<>?_>.,'";

      function genPassword(length = 12) {
        let password = "";
        let password_base = "";

        //チェックボックスにチェックが入っていたら変数に文字情報を追加
        if (document.getElementById("rule_numeric").checked)
          password_base += password_numeric;
        if (document.getElementById("rule_uppercase").checked)
          password_base += password_uppercase;
        if (document.getElementById("rule_lowercase").checked)
          password_base += password_lowercase;
        if (document.getElementById("rule_symbol").checked)
          password_base += password_symbol;

          //lengthで全体の文字数を出してfloorとrandomでその中からランダムで数字を1つ選ぶ
          //charAtでpassword_baseから文字を1つ抽出してpasswordに追加する
          for (let i = 0; i < length; i++) {
          password += password_base.charAt(
            Math.floor(Math.random() * password_base.length)
          );
        }
        return password;
      }
      //buttonが押されたら setPassword('passwd')関数が動作
      //id="passwd"のテキストフォームのvalueにgenPassword(rule_length)を代入
      //genPassword(rule_length) = パスワード生成の独自関数

      function setPassword(id) {
        let rule_length = document.getElementById("rule_length").value;
        document.getElementById(id).value = genPassword(rule_length);
      }
    </script>

    <form>
        <input type="checkbox" id="rule_numeric" checked="">数字
        <input type="checkbox" id="rule_uppercase" checked="">英大文字
        <input type="checkbox" id="rule_lowercase" checked="">英小文字
        <input type="checkbox" id="rule_symbol">記号<br>
        長さ<input type="number" id="rule_length" style="width:100px;">
      <p>
        <input type="button" onclick="setPassword('passwd');" value="パスワード生成" style="padding:3px;">
        <input type="text" id="passwd" style="max-width:200px;">
      </p>
    </form>

varとletの違い

  • varもletも変数宣言は同じ。
  • varもletも再代入可能。
  • varは関数スコープ、letはブロックスコープ。
  • ブロックとは、{}で括られた処理のこと。
  • letを使うと、同じ関数内であってもブロックの外側からは変数を呼び出せない。

参照サイト

JavaScriptでパスワードを自動生成するサンプル
パスワード関連の記事が続きましたので、ついでにJavaScriptでパスワードを生成する方法について記事にしたいと思います。パスワードに限らず、ユーザー識別のために一時的なIDを生成したりするときにも使えると思います。■関連記事記憶できる程

コメント