QR (Quick Response) — это двумерный штрихкод, который сохраняет информацию в виде, удобном для машинного считывания. Содержание может включать URL компании, меню ресторана, сведения о товаре или страницу с инструкциями.

Технология QR‑кодов даёт бизнесу быстрый способ предоставить пользователю доступ к информации и часто служит конкурентным преимуществом.

В этой статье вы научитесь шаг за шагом собирать простой генератор QR‑кодов на React с практическими примерами кода и рекомендациями по безопасности.

Кому это подойдёт

• Разработчикам фронтенда, знакомым с React и хуком useState.
• Тем, кто понимает работу HTML‑форм и условного рендеринга в React.
• Тем, у кого установлен Node.js и есть опыт работы с yarn или npm.

Готовый проект доступен в репозитории на GitHub для изучения и экспериментов.

Устройство и принципы работы QR‑кодов

QR‑коды могут выглядеть случайно, но формат организован и оптимизирован для надежного хранения и быстрого считывания.

Дизайн и структура

QR‑код состоит из набора визуальных и служебных элементов:

• Data modules — чёрные и белые квадраты, в которых закодированы данные.
• Finder patterns — большие «глаза» в углах, которые помогают сканеру найти код и определить ориентацию.
• Separators — разделители, отделяющие finder patterns от остального содержимого.
• Quiet zone — белый отступ вокруг QR‑кода, необходимый для распознавания.
• Alignment markers — метки выравнивания, упрощающие считывание под разными углами.

Краткое определение: кодирование — перевод входной строки (например, URL) в матрицу QR; декодирование — извлечение этой строки при сканировании.

Библиотека QRCode

QRCode — популярная библиотека для генерации 2D‑штрихкодов. Она поддерживает как клиентскую, так и серверную генерацию.

Установка в существующее приложение React — выполните одну из команд в терминале в корне проекта:

yarn add qrcode

или

npm i qrcode

Важно: используйте стабильную версию библиотеки из npm и следите за обновлениями безопасности.

Настройка проекта

В репозитории есть две ветки: starter и final. Ветка starter содержит интерфейс и базовую разметку — её можно использовать как отправную точку.

Клонирование стартового приложения

Клон ветки starter:

git clone -b starter https://github.com/makeuseofcode/qr-code-generator.git

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

yarn

или

npm install

Запустите приложение:

yarn start

или

npm start

После запуска вы увидите интерфейс в браузере:

Реализация логики по шагам

Откройте файл src/App.jsx и замените его содержимое следующим кодом. Код аккуратно оформлен и локализует строки интерфейса на русский язык.

import { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";

const App = () => {
  const [url, setUrl] = useState("");
  const [dataUrl, setDataUrl] = useState("");

  const handleQRCodeGeneration = (e) => {
    e.preventDefault();
    // Генерируем Data URL для изображения QR
    QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
      if (err) {
        console.error(err);
        return;
      }
      // Устанавливаем state с данными изображения
      setDataUrl(dataUrl);
    });
  };

  return (
    

      
Генератор QR‑кодов

      

         setUrl(e.target.value)}
        />

        
      

      {dataUrl && (
        

          
          Скачать PNG
        
      )}
    
  );
};

export default App;

Что делает этот компонент:

• Импортирует QRCode в верхней части файла.
• Создаёт состояние url для ввода и dataUrl для результата в формате Data URL.
• При отправке формы вызывается handleQRCodeGeneration, который вызывает QRCode.toDataURL с опцией width.
• После успешной генерации результат записывается в state и условно рендерится изображение и ссылка для скачивания.

Важно: сохраняйте width и прочие опции в одном месте, чтобы при изменении размера компонент оставался предсказуемым.

Улучшения и дополнительные возможности

Ниже — подборка идей и готовых паттернов, которые можно применить к этому генератору.

1. Добавление логотипа в центр QR‑кода

Подход: генерируйте Data URL QR‑кода, затем рисуйте изображение и логотип на canvas и экспортируйте его как PNG. Это позволяет сохранить сканируемость при умеренном размере логотипа.

Когда это не сработает: если логотип слишком большой и закрывает критические модули, код становится нечитаемым.

2. Сохранение настроек пользователя

Храните параметры (цвета, размер, маржа) в localStorage, чтобы пользователь не вводил их заново.

3. Пакетная генерация

Добавьте обработку CSV: считывайте список URL и генерируйте ZIP с PNG для каждого URL.

4. Альтернативные библиотеки

• react-qr-code — простая компонентная библиотека для React.
• qrcode.react — компонент на базе canvas/SVG.

Выбор зависит от потребностей: если нужен Data URL для скачивания — qrcode (низкоуровневый) удобен; если нужен компонент для рендера — react‑qr‑code проще.

Безопасность при сканировании QR‑кодов

QR‑код сам по себе не может «выполнить» код, но он часто хранит ссылку. Главные риски связаны с переходом по вредоносной ссылке.

Рекомендации по безопасности:

• Отображайте целевой URL пользователю перед переходом.
• Подсвечивайте домен и используйте проверку против фишинговых доменов.
• Всегда открывайте ссылки по HTTPS, если это возможно.
• Не доверяйте коротким ссылкам без возможности предварительного просмотра.
• На сервере валидируйте и разрешайте только whitelisted‑URL для автоматической обработки.

Экспертное мнение: Всегда валидируйте и показывайте явную целевую ссылку пользователю перед тем, как открыть её в браузере.

Матрица рисков и меры смягчения

Чек‑лист ролей при внедрении

Разработчик:

• Реализовать генерацию Data URL и кнопку скачивания.
• Добавить валидацию URL (type=”url” + дополнительная проверка).
• Логировать ошибки генерации.

QA:

• Тестирование с валидными и невалидными URL.
• Проверка скачиваемого PNG и его читаемости.
• Тестирование на разных размерах и с логотипами.

Продукт/безопасность:

• Политика отображения целевых URL.
• Список разрешённых доменов для автоматической обработки.

План тестирования: кейсы приёмки

• Генерация QR для корректного HTTPS URL. Ожидаемый результат: изображение отображается и скачивается.
• Ввод некорректного URL. Ожидаемый результат: форма не отправляется, пользователю показывается ошибка.
• Сохранение с логотипом: QR должен быть сканируемым.
• Массовая генерация: ZIP создаётся и содержит все файлы.

Критерии приёмки

• Компонент генерирует рабочий QR, который сканируется большинством мобильных камер.
• Ссылка для скачивания корректно содержит изображение PNG.
• Система не раскрывает целевой URL без явного подтверждения пользователя.

Плейбук инцидента: если появились злонамеренные QR‑коды

1. Отключить автоматическую генерацию/распространение.
2. Собрать список всех сгенерированных URL и пользователя, которому они были выданы.
3. Сообщить пользователям о возможной угрозе с инструкцией, как проверить ссылку.
4. Восстановить сервис после ревью и добавления фильтров.

Мини‑методология внедрения

1. Минимальный рабочий продукт: генерация, просмотр, скачивание.
2. Мини‑безопасность: отображение целевого URL и ограничение схем (только https/http).
3. Улучшения: логотип, стиль, пакетная обработка, интеграция с CMS.

Глоссарий в одну строчку

• QR: двумерный штрихкод для хранения машинно‑читаемой информации.
• Data URL: строка, представляющая бинарные данные в виде текста (base64).
• Finder pattern: большие квадраты в углах QR‑кода для нахождения и ориентации.

Лёгкий список альтернатив и миграционные заметки

• Для простого рендера используйте react‑qr‑code.
• Если нужен контроль над пикселями и экспортом — qrcode (npm) удобнее.
• При миграции: сохранить форматы изображений и проверять совместимость canvas/SVG на целевых браузерах.

Заключение

Генератор QR‑кодов в React — это короткий путь от идеи до рабочего инструмента. Используйте библиотеку qrcode для получения Data URL и добавляйте слой безопасности: отображение целевой ссылки и валидация. Расширяйте функционал аккуратно: логотипы и стили допустимы, пока сохраняется читаемость кода.

Важно: тестируйте на реальных сканерах (мобильные камеры и приложения) после каждого визуального изменения.