Сгенерировать пароль на JS

Небольшая 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;
}
JS

Но есть один момент – в её основе лежит метод 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;
	}
}
JS

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

<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

Результат:

23.11.2020
4158
Предыдущая запись Получить фото из Instagram без API
Следующая запись Таблица символов ASCII

Комментарии 1

Дмитрий Кузьмищев Дмитрий Кузьмищев
29 ноября 2021 в 13:15
0
Спасибо, очень помогли!)

, чтобы добавить комментарий.

Другие публикации

Авторизация через .htaccess
У сервера apache есть возможность сделать базовую авторизацию. Чтобы закрыть директорию, в неё нужно поместить два файла – .htaccess и .htpasswd.
18278
+1
Как интегрировать ReCAPTCHA на сайт
Пример подключения ReCaptcha на php сайт, регистрация в API, вставка кода в форму, проверка правильности введенной...
12004
+1
Вход на сайт через Вконтакте
Многие соцсети позволяют создавать приложения и через API получать данные пользователей, поэтому их использует для быстрой регистрации и авторизации на сайтах.
20804
+10
Авторизация на сайте через Facebook
Инструкция, как получить данные пользователя Facebook через авторизацию OAuth.
13438
+4
Вход через Google
Сервис «Google Аккаунты» позволяет через протокол OAuth 2.0 реализовать авторизацию пользователя на своем сайте. После прохождения авторизации можно получить имя, фамилию, e-mail и юзерпик...
19395
+14
Авторизация на сайте через Яндекс
Сервис Яндекс.Паспорт позволяет через API реализовать авторизацию пользователя на своем сайте. После разрешения доступа...
7961
+8