Как сгенерировать пароль на JS

23.11.2020

10516

Небольшая JavaScript функция для генерации пароля:

function generatePassword(){
	var length = 8,
	charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	res = '';
	for (var i = 0, n = charset.length; i < length; ++i) {
		res += charset.charAt(Math.floor(Math.random() * n));
	}
	return res;
}

Но есть один момент – в её основе лежит метод Math.random(), который не предоставляет криптографически стойкие случайные числа.

Вместо Math.random() лучше использовать Web Crypto API и более точный метод crypto.getRandomValues().

Поддержка в браузерах

Data on support for the cryptography feature across the major browsers from caniuse.com

Как видно в старых браузерах нет поддержки Web Cryptography, поэтому для них всё-таки придется использовать Math.random().

function generatePassword(){
	var length = 8,
	charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$";
	if(window.crypto && window.crypto.getRandomValues) {
		return Array(length)
			.fill(charset)
			.map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * (x.length + 1))])
			.join('');    
	} else {
		res = '';
		for (var i = 0, n = charset.length; i < length; ++i) {
			res += charset.charAt(Math.floor(Math.random() * n));
		}
		return res;
	}
}

Пример использования

<form class="form-inline" style="width: 380px;margin: 10px auto;">
	<div class="form-group mx-sm-3">
		<input type="text" class="form-control" id="input-password">
	</div>
	<button type="button" id="input-generate" class="btn btn-primary">Сгенерировать</button>
</form>

<script src="/jquery.min.js"></script>

<script>
$("#input-generate").click(function(){
	$("#input-password").val(generatePassword());
	return false;
});

function generatePassword(){
	var length = 8,
	charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$";
	if(window.crypto && window.crypto.getRandomValues) {
		return Array(length)
			.fill(charset)
			.map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * (x.length + 1))])
			.join('');    
	} else {
		res = '';
		for (var i = 0, n = charset.length; i < length; ++i) {
			res += charset.charAt(Math.floor(Math.random() * n));
		}
		return res;
	}
}
</script>

HTML

Результат:

Заполнение поля с эффектом печатающегося текста

<form class="form-inline" style="width: 380px;margin: 10px auto;">
	<div class="form-group mx-sm-3">
		<input type="text" class="form-control" id="input-password">
	</div>
	<button type="button" id="input-generate" class="btn btn-primary">Сгенерировать</button>
</form>

<script src="/jquery.min.js"></script>
<script>
$("#input-generate").click(function(){
	 var $input = $("#input-password");
	 $input.val('');
	 
	 var pass = generatePassword();
	 var txt = pass.split("");
	 var interval = setInterval(function(){
	 	if(!txt[0]){
			clearInterval(interval);
		} else {
			$input.val($input.val() + txt.shift());
		}
	}, 50);

	return false;
});

function generatePassword(){
	var length = 8,
	charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$";
	if(window.crypto && window.crypto.getRandomValues) {
		return Array(length)
			.fill(charset)
			.map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * (x.length + 1))])
			.join('');    
	} else {
		res = '';
		for (var i = 0, n = charset.length; i < length; ++i) {
			res += charset.charAt(Math.floor(Math.random() * n));
		}
		return res;
	}
}
</script>

HTML