Skip to content

Latest commit

 

History

History
218 lines (164 loc) · 9.02 KB

README.md

File metadata and controls

218 lines (164 loc) · 9.02 KB

File signature

React Компонент для подписи файла ЭЦП, с помощью плагина «КриптоПро ЭЦП Browser plug-in»

Wallaby.js

main-branch

master test master build

develop-branch

develop test develop build

npm file-signature-in-react

Компонент на реакте для подписи файла Крипто Про с помощью плагина «КриптоПро ЭЦП Browser plug-in»

пример

https://bad4iz.github.io/file-signature-in-react

!!! У вас должен быть установлен сертификат и плагин проверить работу установленного плагина и сертификата

Используется плагин crypto-pro-cadesplugin https://www.npmjs.com/package/crypto-pro-cadesplugin

ЭЦП в браузере – попробуйте прямо сейчас!

Компания КРИПТО-ПРО предлагает плагин для создания и проверки электронной подписи на web-страницах. КриптоПро ЭЦП Browser plug-in позволяет создавать и проверять как обычную электронную подпись, так и усовершенствованную электронную подпись.

Самое простое подключение компонента

  1. Просто подключаем Компонент к себе в проект
  2. Передаем в Компонент a. files - файлы которые надо подписать b. onChange функцию callback которая сработает когда файл, будет подписан. c. onSelect функция callback при выборе сертификата. На вход принимает сертификат. d. clear - флаг очищения компонента e. callbackError функция вызовется когда, будет ошибка
  3. В onChange прейдет массив из {fileNameSign:<String>, sign:<Blob>}. fileNameSign - название файла подписи и сама sign - подпись в формате Blob

Как подключить

yarn add file-signature-in-react

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

import React, { useState } from 'react';
import FileSignature from 'file-signature-in-react';

export const FileSignatureCryptoPro = () => {
  const [filesForSignature, setFilesForSignature] = useState(null);
  const [clear, setClear] = useState(false);

  const fileInputHandler = ({ target: { files = [] } }) => {
    setFilesForSignature(files);
  };

  const onChange = (e) => console.log(e);
  const callbackError = (e) => console.error(e);

  return (
    <div>
      <h2>Подписываем файл или файлы</h2>

      <input
        type="file"
        onChange={fileInputHandler}
        multiple // если хотим подписать много файлов скопом
      />

      <button onClick={() => setClear(true)}> Удалить подпись</button>

      <FileSignature
        {...{
          onChange, // функция вызовится когда файл подпишится
          files: filesForSignature, // самм файлы для подписи
          clear, // флаг очищения подписи
          callbackError, // функция вызовится когда будет ошибка
        }}
      />
    </div>
  );
};

Кастомизация ... Переопределяем компоненты на основе Material UI

import React, { useState } from 'react';
import FileSignature from 'file-signature-in-react';

import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';

const MySelect = ({ options, onChange, ...props }) => {
  const handleChange = (event) => {
    onChange(event.target.value);
  };

  return (
    <Select {...props} fullWidth onChange={handleChange}>
      {options.map((item) => (
        <MenuItem key={item.value} value={item.value}>
          {item.label}
        </MenuItem>
      ))}
    </Select>
  );
};

const MyButton = (props) => (
  <Button {...props} variant={'contained'} color={'primary'}>
    sign my button
  </Button>
);

export const FileSignatureCryptoPro = () => {
  const [filesForSignature, setFilesForSignature] = useState(null);
  const [clear, setClear] = useState(false);

  const fileInputHandler = ({ target: { files = [] } }) => {
    setFilesForSignature(files);
  };

  const onChange = (e) => console.log(e);
  const callbackError = (e) => console.error(e);

  return (
    <div>
      <h2>Подписываем файл или файлы</h2>

      <input
        type="file"
        onChange={fileInputHandler}
        multiple // если хотим подписать много файлов скопом
      />

      <button onClick={() => setClear(true)}> Удалить подпись</button>

      <FileSignature
        {...{
          SelectComponent: MySelect,
          ButtonComponent: MyButton,
          onChange, // функция вызовится когда файл подпишится
          files: filesForSignature, // самм файлы для подписи
          clear, // флаг очищения подписи
          callbackError, // функция вызовится когда будет ошибка
        }}
      />
    </div>
  );
};

Обратите внимание! Для пробной работы с Компонентом вам необходимо иметь

  • Компьютер под управлением Windows, Linux, MacOS или FreeBSD
  • Один из современных браузеров (Internet Explorer, Mozilla Firefox, Opera, Chrome, Яндекс.Браузер, Safari) с поддержкой сценариев JavaScript
  • Установленный плагин для браузера «КриптоПро ЭЦП Browser plug-in» (Установить)
  • Если планируется создание ЭЦП по ГОСТ Р 34.10-2001/2012, то необходимо установить СКЗИ КриптоПро CSP
  • Cертификат ключа подписи, который можно получить на странице тестового центра
  • Проверить работу установленного плагина

для поднятия песочницы используется Storybook

скачиваем репозиторий

git clone [email protected]:bad4iz/file-signature-in-react.git

Устанавливаем зависимости

yarn

Для запуска используем команду

yarn dev

Поднимется локальный сервер на http://localhost:5173/

тут можно будет проверить свои кейсы


IDE предоставлена компанией JetBrains, для поддержки опенсорса https://jb.gg/OpenSource.

the IDE is provided by the JetBrains to support open source https://jb.gg/OpenSource.