Стандартные инструменты Web Crypto API позволяют сгенерировать пару закрытый-открытый ключ для шифрования и дешифрования данных.
А как сделать так, чтоб сначала пользователь придумал PIN-код, а потом система зашифровала какие-либо данные этим пин-кодом? А потом этим же пин-кодом расшифровала его?
Предполагается, что пин-код состоит из 4 или 6 цифр.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Encrypt PIN</title>
</head>
<body>
<style>
h1 {
margin: 0;
font-size: 22px;
}
p {
margin: 16px 0 12px;
}
.columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
<h1>Шифрование данных PIN-кодом</h1>
<section class="columns">
<div>
<p>Придумать пин-код и зашифровать данные</p>
<form id="encryp">
<input id="encrypt-pin" type="password" placeholder="Придумайте пин-код">
<input id="encrypt-data" placeholder="Данные для шифрования">
<input id="encrypt-button" type="submit" value="Encrypt">
</form>
<div id="encrypt-export"></div> <!-- Здесь выводится зашифрованная информация -->
</div>
<div>
<p>Ввести пин-код и расшифровать данные</p>
<form id="decrypt">
<input id="decrypt-pin" type="password" placeholder="Пин-код шифрования">
<input id="decrypt-data" placeholder="Данные для расшифрования">
<input id="decrypt-button" type="submit" value="Decrypt">
</form>
<div id="decrypt-export"></div> <!-- Здесь выводится расшифрованная информация -->
</div>
</section>
</body>
</html>