Реализация формы согласия на обработку персональных данных по категориям

Реализация формы согласия на обработку персональных данных по категориям

Форма согласия по категориям позволяет пользователю дать или отозвать согласие отдельно для каждой цели обработки данных. Этого требует GDPR: согласие должно быть конкретным (specific), а не одним общим «я согласен на всё».

Категории согласий

Стандартный набор для веб-сервиса:

Frontend реализация

// ConsentBanner.jsx
import { useState, useEffect } from 'react'

const CONSENT_KEY = 'user_consent_v2'

const CATEGORIES = [
  {
    id: 'necessary',
    name: 'Необходимые',
    description: 'Авторизация, безопасность, базовый функционал',
    required: true
  },
  {
    id: 'analytics',
    name: 'Аналитика',
    description: 'Google Analytics, Яндекс.Метрика для улучшения сервиса',
    required: false
  },
  {
    id: 'marketing',
    name: 'Маркетинг',
    description: 'Персонализированная реклама и ретаргетинг',
    required: false
  },
  {
    id: 'preferences',
    name: 'Настройки',
    description: 'Запоминание языка, темы и других предпочтений',
    required: false
  }
]

function ConsentBanner() {
  const [visible, setVisible] = useState(false)
  const [showDetails, setShowDetails] = useState(false)
  const [consents, setConsents] = useState({
    necessary: true,
    analytics: false,
    marketing: false,
    preferences: false
  })

  useEffect(() => {
    const stored = localStorage.getItem(CONSENT_KEY)
    if (!stored) setVisible(true)
    else applyConsents(JSON.parse(stored))
  }, [])

  const acceptAll = () => {
    const all = Object.fromEntries(CATEGORIES.map(c => [c.id, true]))
    saveConsents(all)
  }

  const rejectOptional = () => {
    const minimal = Object.fromEntries(
      CATEGORIES.map(c => [c.id, c.required])
    )
    saveConsents(minimal)
  }

  const saveConsents = (consent) => {
    localStorage.setItem(CONSENT_KEY, JSON.stringify({
      ...consent,
      version: 'v2024-03',
      timestamp: new Date().toISOString()
    }))
    applyConsents(consent)
    setVisible(false)
    reportConsentToServer(consent)
  }

  const applyConsents = (consent) => {
    if (consent.analytics) initAnalytics()
    if (consent.marketing) initMarketing()
  }

  if (!visible) return null

  return (
    <div className="consent-banner" role="dialog" aria-label="Настройки cookie">
      <h3>Мы используем cookie</h3>
      <p>Для работы сайта и улучшения вашего опыта.</p>

      {showDetails && (
        <div className="consent-categories">
          {CATEGORIES.map(cat => (
            <label key={cat.id} className="consent-category">
              <input
                type="checkbox"
                checked={consents[cat.id]}
                disabled={cat.required}
                onChange={e => setConsents(prev => ({
                  ...prev,
                  [cat.id]: e.target.checked
                }))}
              />
              <div>
                <strong>{cat.name}</strong>
                <p>{cat.description}</p>
              </div>
            </label>
          ))}
        </div>
      )}

      <div className="consent-actions">
        <button onClick={acceptAll}>Принять все</button>
        <button onClick={rejectOptional}>Только необходимые</button>
        {showDetails
          ? <button onClick={() => saveConsents(consents)}>Сохранить настройки</button>
          : <button onClick={() => setShowDetails(true)}>Настроить</button>
        }
      </div>
    </div>
  )
}

Сохранение согласий на сервере

@app.route('/api/consent', methods=['POST'])
def save_consent():
    data = request.json
    user_id = current_user.id if current_user.is_authenticated else None

    consent_record = {
        'user_id': user_id,
        'session_id': session.get('id'),
        'ip': request.remote_addr,
        'user_agent': request.user_agent.string,
        'consent_data': data['consents'],
        'version': data.get('version'),
        'timestamp': datetime.utcnow(),
        'method': 'banner'
    }

    db.execute("""
        INSERT INTO consent_log
        (user_id, session_id, ip, user_agent, consent_data, version, accepted_at, method)
        VALUES (%(user_id)s, %(session_id)s, %(ip)s, %(user_agent)s,
                %(consent_data)s::jsonb, %(version)s, %(timestamp)s, %(method)s)
    """, consent_record)

    return jsonify({'status': 'saved'})

Применение согласий к сторонним скриптам

function applyConsents(consents) {
  // Google Analytics
  if (consents.analytics) {
    window['ga-disable-G-XXXXXXXX'] = false
    gtag('consent', 'update', {
      analytics_storage: 'granted'
    })
  } else {
    window['ga-disable-G-XXXXXXXX'] = true
    gtag('consent', 'update', {
      analytics_storage: 'denied'
    })
  }

  // Facebook Pixel
  if (consents.marketing) {
    fbq('consent', 'grant')
  } else {
    fbq('consent', 'revoke')
  }
}

// Google Consent Mode v2 (обязательно для Google Ads с мая 2024)
gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  wait_for_update: 500
})

Срок выполнения

Реализация formы согласия по категориям с сохранением на сервере и интеграцией Google Consent Mode v2 — 2–3 рабочих дня.