以前に作成したパスワード自動生成ツールのソースを解説したいと思います。
※作成したパスワード自動生成ツールは以下の記事にあります。
参考記事
大枠については以下の記事を参考にさせて頂きました。
JavaScriptでパスワードを自動生成するサンプル
パスワード関連の記事が続きましたので、ついでにJavaScriptでパスワードを生成する方法について記事にしたいと思います。
パスワードに限らず、ユーザー識別のために一時的なIDを生成したりするとき
blog.ver001.com
使用している文字列、パスワードの生成方法について、自分好みに変更しています。
詳細は後述します。
ソース解説
ソースコード
下記のソースコードをコピーし、（WordPressの場合）投稿画面のカスタムHTMLブロックに張り付ければ、動作するかと思います。
<html><body>
<script>
let password_numeric = '1234567890';
let password_uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let password_lowercase = 'abcdefghijklmnopqrstuvwxyz';
let password_symbol = '!@#%^&*';
function genPassword(length = 20)
{
let password = '';
let password_base = '';
let now = new Date();
//生成ルールの確認
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;
//パスワード文字列作成
//指定文字数になるまでパスワード文字列を取得・追加し続ける
while (password.length < length) {
let temp = '';
//文字コードの範囲は33!～122z
temp = String.fromCharCode(((Math.random() * length * now.getMilliseconds()) % (122-33+1)) + 33);
//取得文字が生成ルール対象文字に含まれるか確認
if ( password_base.indexOf(temp) != -1) {
password += temp;
}
}
return password;
}
function setPassword(id)
{
let rule_length = document.getElementById('rule_length').value;
document.getElementById(id).value = genPassword(rule_length);
}
</script>
<form>
<fieldset>
<legend>パスワード生成ルール</legend>
<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" checked>記号<br><br>
長さ(5～80)<input type="number" id="rule_length" min="5" max="80" value="20">
</fieldset>
<p>
<input type="button" onclick="setPassword('passwd');" value="パスワード生成">
<input type="text" id="passwd">
</p>
</form>
</body></html>説明
使用する文字列候補
「let password_」使用する文字列候補を定義しています。
参考サイトと異なるのは、symbol（記号）です。
使用可能な記号文字は「!@#%^&*」の７文字にしました。
英数字は変更ありません。
パスワード文字列の取得
「temp = String.fromCharCode(((Math.random() * length * now.getMilliseconds()) % (122-33+1)) + 33);」はパスワード文字列を取得しています。
乱数、指定された文字列長、現在時刻（ミリ秒）を掛けた値の剰余で、文字列候補の範囲の文字コードを取得します。
指定された文字列長を掛けているのは、特に意味はありません。
なんとなく同じ文字列や連続した文字列が出やすい感じがしたので、入れてみたら良い感じになりました。
まとめ
最初はブログ上での書き方も分からずでしたが、試行錯誤して自分好みのツールを作れました。
この記事を読んだ方の参考になれば幸いです。
