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

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

Форма згоди за категоріями дозволяє користувачу дати або відозвати згоду окремо для кожної цілі обробки даних. GDPR вимагає цього: згода має бути конкретною, а не однією загальною "я згоджуюся на все".

Категорії згод

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

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="Налаштування cookies">
      <h3>Ми використовуємо cookies</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
})