КАК зашифровать информацию в LOCALSTORAGE в REACT с помощью cryptoJs

Вы можете посмотреть его на Youtube: https://thewikihow.com/video_80HIaiZG0nM

Базовое репо на github: https://github.com/rabindranathfv/youtube-react-js

Чтобы начать это руководство, помните, что оно начинается с ветки https://github.com/rabindranathfv/youtube-react-js/tree/login-with-react-hook-form-and-validations , поэтому вы можете клонировать репозиторий или сделать форк и выполнить упражнение.

Используемые зависимости/библиотеки

В данном примере мы будем использовать библиотеку crytp-js ( https://www.npmjs.com/package/crypto-js ) для поддержки вопросов шифрования. Первым шагом будет установка этой зависимости

Npm install crypto-js

2. Создайте папку utils и constants

На этом этапе мы создадим внутри папки src папку/каталог под названием constants, где создадим файл secret-keys.js, в который мы экспортируем наш секретный ключ. На данном этапе я предлагаю вам сделать это с помощью переменных окружения, для простоты этого упражнения я не буду использовать переменные окружения.

export const secretKey = '3*U{m1q#t$>.I!/<0/^NXe"|6...gE';

На данном этапе я предлагаю использовать переменные окружения для этого secretKey в качестве хорошей практики, так как его не следует оставлять внутри репозитория, но так как это делается в образовательных целях, мы оставим его таким.

В таком порядке мы создадим папку utils внутри папки src. Там же будут находиться файлы, которые будут использовать библиотеку crypto-js для шифрования, внутри этой папки мы создадим 2 файла data-decrypt.js и data-encrypt.js.

// data-decrypt.js
import CryptoJS from "crypto-js";
import { secretKey } from "../constants/secret-key";

export const dataDecrypt = (value) => {
  try {
    const bytes = CryptoJS.AES.decrypt(value, secretKey);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  } catch (error) {
    console.info("🚀 ~ file: data-decrypt.js:9 ~ dataDecrypt ~ error:", error);
  }
};

Содержимое файла data-encrypt.js

import CryptoJS from "crypto-js";
import { secretKey } from "../constants/secret-key";

export const dataEncrpt = (value) => {
  try {
    return CryptoJS.AES.encrypt(JSON.stringify(value), secretKey).toString();
  } catch (error) {
    console.info("🚀 ~ file: data-encrypt.js:9 ~ dataEncrpt ~ error:", error);
  }
};

В обоих случаях мы размещаем try catch для любого типа исключений, которые могут возникнуть в обоих файлах.

ВАЖНО: В видео мы не размещаем try catch, но я советую вам сделать это, чтобы у вас не было проблем с ошибками в браузере.

3. Используйте методы шифрования/расшифровки

Теперь мы переходим в login.form.js, чтобы использовать наши методы шифрования (не забудьте импортировать методы dataEncrypt и dataDecrypt). Мы используем метод для шифрования электронной почты внутри функции loginSubmit, получив следующий код

const loginSubmit = (formData) => {
    const { email, isChecked } = formData;

    if (!!isChecked) {
      localStorage.setItem("email", dataEncrpt(email));
      localStorage.setItem("isChecked", isChecked);
    } else if (!isChecked) {
      localStorage.clear();
    }

    // here call the API to signup/login
    reset();
  };

Аналогично мы должны выполнить обратный процесс, чтобы загрузить незашифрованную информацию электронной почты в нашу форму, для этого мы обновим функцию checkRemenberMe, используя метод unencrypt в электронной почте, и получим следующий сегмент кода

const checkRemenberMe = useCallback(() => {
    const isCheckedStorage = localStorage.getItem("isChecked");
    const emailStorage = localStorage.getItem("email");
    if (!!isCheckedStorage) {
      setValue("email", dataDecrypt(emailStorage), {
        shouldDirty: true,
        shouldValidate: true,
      });
      setValue("isChecked", isCheckedStorage, { shouldDirty: true });
    }
  }, [setValue]);

После этого вы можете проверить в localStorage, правильно ли зашифровано письмо, а также воспользоваться функцией remenber me, чтобы запомнить и правильно расшифровать введенное вами письмо.

Для завершения перезагрузите браузер и вы должны увидеть email, который вы использовали ранее, предварительно загруженный в форму!

Помните, что вы можете посмотреть его через Youtube: https://thewikihow.com/video_80HIaiZG0nM и если вы хотите увидеть полученный код, вы можете перейти по следующей ссылке https://github.com/rabindranathfv/youtube-react-js/tree/login-with-react-hook-encrypted-data-localstorage

Я оставляю вам ссылку, где вы можете найти мои сети! Меня зовут Рабиндранат, но вы будете знать меня как Лейтора или Рабина.

Следуйте за мной: