Эта статья является частью серии сообщений в блоге о взаимодействии с виртуальной машиной Zenroom в запутанном мире JavaScript / Typescript. Это вторая статья из этой серии, и к концу статьи вы сможете запустить новую службу шифрования с помощью Эллиптической кривой Диффи – Хеллмана в своем браузере (Plain JS и HTML).
- Часть первая Zencode в node.js
- Часть вторая Zencode в браузере
- Часть третья, Zencode в React
- Часть четвертая Zencode в машинописном тексте
- Часть пятая. Улучшение Zencode с помощью собственных предложений в туалете-mw
- Часть шестая. Простое создание цепочки API с помощью apiroom
🏹 Давайте создадим сервис шифрования / дешифрования
Итак, вы только что экспериментировали, как зашифровать и расшифровать сообщение с паролем / секретом с помощью ECDH (Эллиптическая кривая Диффи – Хеллмана) на эллиптической кривой SECP256K1 (А вы? Нет? Затем, вернуться назад к п. 1 »).
Теперь скажите, что вы любите простые вещи, и вам просто нужны некоторые базовые функции внутри вашей HTML-страницы (без npm, без nodejs, без модных хипстерских новых блестящих вещей) с помощью старого доброго простого JavaScript.
НЕТ ПРОБЛЕМ. Готов поспорить, нам это нравится.
💻 Давай запачкаем руки
Давайте создадим index.html файл, первое, что нам нужно, это импортировать нашу zencode_exec функцию
С такими CDN, как jspm, которые позволяют импортировать модули JavaScript, это не проблема. На сайте jspm говорится:
jspm предоставляет модуль CDN, позволяющий напрямую загружать любой пакет из npm в браузер и другие среды JS как полностью оптимизированный собственный модуль JavaScript.
Так что это удобно и аккуратно, давайте продолжим. Помните функцию шифрования? Давайте скопируем и вставим его, и вместо получения password и message в качестве параметров функции мы извлечем их из двух HTMLElements и распечатаем результат в третий элемент.
Теперь откройте файл в своем любимом браузере, и вы должны увидеть что-то вроде этого…
Это некрасиво, почти непригодно для использования, но это работает! 🥳
Как я уже сказал, пара советов, на которые следует обратить внимание. Мы будем использовать модуль JavaScript, поэтому type="module" в теге <script> важен. Поскольку мы находимся внутри области видимости модуля, чтобы сделать функцию encrypt() доступной для нашей страницы, мы должны добавить ее к объекту window, поэтому обратите внимание на строку 12 предыдущего фрагмента.
Давайте добавим пару строк стиля (не так много) и несколько визуальных отзывов об успешном шифровании. Я буду использовать здесь bulma, очень простой CSS-фреймворк.
Это покажет что-то вроде
Да, это намного лучше 💅🏼
Давайте добавим также функцию дешифрования, и мы готовы развернуть нашу статическую и сверхбыструю службу шифрования / дешифрования ECDH через WWW.
Конечный результат выглядит примерно так
Вы можете попробовать это самостоятельно, зашифровать сообщение паролем, затем скопировать / вставить результат в поле Зашифрованное сообщение, и если вы введете тот же пароль, сообщение будет расшифровано, и результат отобразится правильно.
Что делать, если пароль неправильный? Проверка требуется только в ZenroomVM, поэтому я только что добавил catch к zencode_exec обещанию (см. Строки 51–55), которые будут отображать журналы в элементе результата, если что-то пойдет не так!
Как обычно, код доступен в этом репо:
А теперь отложите до следующей недели часть 3, в которой мы поиграем с react и некоторыми компонентами здесь и там, чтобы сделать вещи реактивными и анимированными; p
