Package Exports

file-signature-in-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (file-signature-in-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

File signature

npm file-signature-in-react

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

пример
https://bad4iz.github.io/file-signature-in-react

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

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

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

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

Просто подключаем Компонент к себе в проект
Передаем в Компонент a. files - файлы которые надо подписать b. callback функцию callback которая сработает когда файл будет подписан. c. clear - флаг очищения компонента d. callbackError функция вызовится когда будет ошибка
В callback прийдет массив из {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 callback = (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
        {...{
          callback, // функция вызовится когда файл подпишится
          files: filesForSignature, // самм файлы для подписи
          clear, // флаг очищения подписи
          callbackError  // функция вызовится когда будет ошибка
        }}
      />
    </div>
  );
};

Переопределяем компоненты

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, ...props}) => (
  <Select {...props} fullWidth>
    {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 callback = (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,
          callback, // функция вызовится когда файл подпишится
          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 git@github.com:bad4iz/file-signature-in-react.git

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

yarn

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

yarn storybook

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

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