JavaScript+phpでパスワード作成に使えるランダム文字列作成ツールの作成方法

font-705665

JavaScriptとPHPを組み合わせてボタンを押してもリロードせずに実行させる「パスワード作成に使えるランダム文字列作成ツール」の作成方法の解説です。



ランダムな文字列を作るPHPファイルを用意

まずはphpファイルを別に用意します。
・test_java2.php

<?php
	error_reporting(0);
	mb_language("ja");
	mb_internal_encoding('UTF-8');

	$url=$_POST["data"];

	$Lis=explode(",",$url);
	$GetData=array();
	$GetData["max"]=$Lis[0];
	$GetData["len"]=$Lis[1];
	$GetData["state01"]=$Lis[2];
	$GetData["state02"]=$Lis[3];
	$GetData["state04"]=$Lis[4];

	$sml=array("a","b","c","d","e","f","g","h","i","j","e","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
	$big=array("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");
	$suj=array("0","1","2","3","4","5","6","7","8","9");

	$datas="";
	$lists=array();
	$k=rand()%4;
	$suu=rand();
	//アルファベットの大文字
	if($GetData["state01"]!=0)
	{
		$lists=array_merge($lists,$big);
	}
	//アルファベットの小文字
	if($GetData["state02"]!=0)
	{
		$lists=array_merge($lists,$sml);
	}
	//数字
	if($GetData["state04"]!=0)
	{
		$lists=array_merge($lists,$suj);
	}
	$m=count($lists);

	for($n=0;$n<$GetData["len"];$n++)
	{
		$datas="";
		for($i=0;$i<$GetData["max"];$i++)
		{
			$m=count($lists);
			if($m!=0)
			{
				$suu=rand()%$m;
				$datas.=$lists[$suu];
			}
		}
		$datas.="\r\n";
		echo  htmlspecialchars($datas, ENT_QUOTES, 'UTF-8');
	}
?>

このPHPファイルは$_POSTのパラメータによって組み合わせる文字の種類を切り替えます。

パラメータは”,”で区切られているのでexplode()関数を用いて分割します。
必要文字数、作成個数、アルファベットの大文字・小文字と数字のON/OFF順のパラメーターです。

このパラメータに合わせてランダム文字列は出力されます。

作成したらサーバーへアップロードしておきます。

JavaScriptとフォームを設定する

function sendRequest()
{
	var xmlhttp=createXmlHttpRequest();
	if(xmlhttp!=null)
	{
		var moji;
		var sel=0;
		moji = document.getElementById( "urlinput1" ).value;
		moji+=","+document.getElementById( "urlinput2" ).value;
		if(document.getElementById( "urlinput3" ).checked!=0)	{	moji+=",1";	}else{	moji+=",0";	}
		if(document.getElementById( "urlinput4" ).checked!=0)	{	moji+=",1";	}else{	moji+=",0";	}
		if(document.getElementById( "urlinput6" ).checked!=0)	{	moji+=",1";	}else{	moji+=",0";	}
		xmlhttp.open("POST", "../test_java2.php", false);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		var data="data="+moji;
		xmlhttp.send(data);
		var res=xmlhttp.responseText;
		document.getElementById( "urloutput2" ).value = res;
	}
}

送受信するデータはフォームから取得し、それをパラメータとして”,”で区切ってtest_java2.phpに送信します。
帰ってきた値はテキストエリアのurloutput2へ送ります。

<form name="FORMs" method="post">
ランダムで英数字の文字列を作成するツールです。
パスワード作成などにお役立て下さい。
&nbsp;
<strong>①何文字の文字列を作成しますか?</strong>
<input type="text" name="max" id="urlinput1" maxlength="4" <?php echo 'value="'.$_POST["max"].'"';?>>
&nbsp;
<strong>②何個作成しますか?</strong>
<input type="text" name="len" id="urlinput2" maxlength="4" <?php echo 'value="'.$_POST["len"].'"';?>>
&nbsp;
<strong>③使用する文字列を決めて下さい</strong>
 <input type="checkbox" name="state01" id="urlinput3" value="1" <?php if(isset($_POST["state01"])){ echo 'checked="checked"';}?>>&nbsp;アルファベットの大文字(ABCD...)
 <input type="checkbox" name="state02" id="urlinput4" value="1" <?php if(isset($_POST["state02"])){ echo 'checked="checked"';}?>>&nbsp;アルファベットの小文字(abcd...)
 <input type="checkbox" name="state04" id="urlinput6" value="1" <?php if(isset($_POST["state04"])){ echo 'checked="checked"';}?>>&nbsp;数字(0-9)
&nbsp;
<input type="button" name="botan" id="button01" onClick="sendRequest();" value="ランダム文字列作成">
<TEXTAREA  id="urloutput2" name="moto" size="70" placeholder="ここに生成した文字を出力します。" style="width:100%;height:160px;" wrap="off"></TEXTAREA>
</form>

フォームには文字数、個数、アルファベットの大文字と小文字、数字を使うかを設定できるフォームになっています。

サンプル

[randm_pass01]

改善すべき点

これでパスワードが簡単に生成する事ができるようになりました。

後はこれに「!」や「@」のような特殊な文字を追加したり、アルファベットが先頭になるように等の機能が欲しい所です。

こう言った機能を追加するにはチェックボックスの有効・無効が切り替えられると便利なので、次回はこれを追加できるようにする解説します。
JavaScriptでフォームのボタンの有効と無効を切り替える方法

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

関連記事



スポンサーリンク