projects/org/ideal-shop/docs/SOCIAL.md

SOCIAL — Социальные сети и OAuth

Версия: 2.1.0
Дата: 2026-03-24

Обзор

Интеграция с социальными сетями решает три задачи:

  1. OAuth вход — быстрая авторизация без пароля
  2. Социальные ссылки — присутствие бренда в соцсетях
  3. Шеринг товаров — распространение контента пользователями

1. OAuth авторизация

1.1 Приоритет провайдеров (RU)

# Провайдер Аудитория Данные Drupal модуль
1 Telegram 85M+ Телефон, имя, фото social_auth_telegram
2 VK ID 100M+ Телефон, имя, email, фото social_auth_vk
3 Яндекс ID 80M+ Телефон, имя, email social_auth_yandex
4 Mail.ru 50M+ Через VK ID (через VK)

1.2 Модули Drupal

Базовый стек

# composer.json
require:
  drupal/social_auth: ^4.0
  drupal/social_auth_telegram: ^3.0
  drupal/social_auth_vk: ^3.0
  # Яндекс — кастомный или через generic OAuth

Social Auth (основной)

Модуль Описание Версия
social_auth Базовый модуль OAuth 4.x
social_auth_telegram Telegram Login Widget 3.x
social_auth_vk VK ID 3.x
social_auth_google Google (опционально) 4.x

Настройка Telegram

  1. Создать бота через @BotFather
  2. Получить Bot Token
  3. Настроить домен: /setdomain → ваш сайт
  4. Включить Login Widget в настройках бота
// settings.php (пример)
$config['social_auth_telegram.settings']['bot_token'] = 'YOUR_BOT_TOKEN';
$config['social_auth_telegram.settings']['bot_name'] = 'YourBotName';

Настройка VK ID

  1. Создать приложение: vk.com/apps
  2. Тип: Сайт
  3. Получить App ID и Secure Key
  4. Настроить Redirect URI: https://site.ru/user/login/vk/callback
$config['social_auth_vk.settings']['app_id'] = 'YOUR_APP_ID';
$config['social_auth_vk.settings']['app_secret'] = 'YOUR_SECRET_KEY';

Настройка Яндекс ID

  1. Создать приложение: oauth.yandex.ru
  2. Тип: Веб-сервисы
  3. Права: login:info, login:email
  4. Callback URL: https://site.ru/user/login/yandex/callback
// Через Generic OAuth или кастомный модуль
$config['social_auth_yandex.settings']['client_id'] = 'YOUR_CLIENT_ID';
$config['social_auth_yandex.settings']['client_secret'] = 'YOUR_SECRET';

1.3 UX вход

Форма входа

┌─────────────────────────────────────┐
│         Вход в личный кабинет       │
├─────────────────────────────────────┤
│                                     │
│  [📱 Войти через Telegram]          │  ← Основной
│  [🔵 Войти через VK]                │
│  [🔴 Войти через Яндекс]            │
│                                     │
│  ─────────── или ───────────        │
│                                     │
│  Телефон: [+7 ___-___-__-__]        │
│  [Получить SMS-код]                 │
│                                     │
└─────────────────────────────────────┘

При checkout (гостевой)

┌─────────────────────────────────────┐
│  Быстрое оформление                 │
├─────────────────────────────────────┤
│                                     │
│  Войдите для скидки −10%:           │
│                                     │
│  [📱 Telegram] [VK] [Яндекс]        │
│                                     │
│  или введите телефон:               │
│  [+7 ___-___-__-__]                 │
│                                     │
└─────────────────────────────────────┘

1.4 Привязка к телефону

Телефон = главный идентификатор клиента

После OAuth входа:
1. Если телефон получен от провайдера → используем
2. Если нет → запрашиваем телефон (VK не всегда даёт)
3. Проверяем телефон на дубликаты
4. Объединяем аккаунты при совпадении

2. Социальные ссылки

2.1 Где размещаем

Место Соцсети Приоритет
Footer Все Must
Страница контактов Все + мессенджеры Must
Header (мобильный) Telegram, WhatsApp Nice
Карточка товара Шеринг Nice

2.2 Список соцсетей

Соцсеть Тип URL формат Иконка
Telegram Мессенджер t.me/username telegram
VK Соцсеть vk.com/group vk (кастом)
WhatsApp Мессенджер wa.me/79991234567 whatsapp (кастом)
YouTube Видео youtube.com/@channel youtube
Дзен Блог dzen.ru/id/xxx dzen (кастом)
Одноклассники Соцсеть ok.ru/group ok (кастом)

2.3 Drupal модули для ссылок

# Простое решение — кастомный блок
# Продвинутое — модули:

drupal/social_media_links: ^7.0   # Виджет соцсетей
drupal/social_icons: ^2.0         # Иконки соцсетей

// Конфигурация блока
$config['social_media_links.settings'] = [
  'platforms' => [
    'telegram' => ['url' => 'https://t.me/yourshop'],
    'vk' => ['url' => 'https://vk.com/yourshop'],
    'whatsapp' => ['url' => 'https://wa.me/79991234567'],
    'youtube' => ['url' => 'https://youtube.com/@yourshop'],
  ],
  'icon_style' => 'square-color',
  'link_attributes' => [
    'target' => '_blank',
    'rel' => 'noopener',
  ],
];

2.4 Кастомные иконки (SVG)

Lucide Icons не имеет VK, WhatsApp, Дзен. Добавляем кастомные:

<!-- VK -->
<symbol id="vk" viewBox="0 0 24 24">
  <path d="M21.547 7H16.86c-.1 0-.2.1-.2.2 0 0 0 4.1 4.7 4.1h.2c.1 0 .2.1.2.2 0 3.4-4.3 5.5-8.2 5.5s-8.2-2.1-8.2-5.5c0-.1.1-.2.2-.2h.2c4.7 0 4.7-4.1 4.7-4.1 0-.1-.1-.2-.2-.2H5.453C2.847 7 1 9.847 1 13c0 5.523 4.477 10 10 10s10-4.477 10-10c0-3.153-1.847-6-4.453-6z"/>
</symbol>

<!-- WhatsApp -->
<symbol id="whatsapp" viewBox="0 0 24 24">
  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
</symbol>

<!-- Telegram (в Lucide есть send, но не официальный) -->
<symbol id="telegram" viewBox="0 0 24 24">
  <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
</symbol>

{# components/social-links/social-links.twig #}
<div class="social-links">
  {% for link in links %}
    <a href="{{ link.url }}"
       class="social-links__item"
       target="_blank"
       rel="noopener"
       aria-label="{{ link.name }}">
      {% include 'ideal_shop:icon' with {name: link.icon} %}
    </a>
  {% endfor %}
</div>

3. Шеринг товаров

3.1 Кнопки шеринга

Платформа URL шеринга Параметры
VK vk.com/share.php url, title, image
Telegram t.me/share/url url, text
WhatsApp wa.me/?text= text (URL encoded)
OK connect.ok.ru/offer url, title, imageUrl

3.2 Drupal модули

drupal/social_share: ^2.0     # Кнопки шеринга
drupal/sharethis: ^3.0        # Альтернатива

3.3 Без модуля (кастом)

{# templates/commerce/share-buttons.html.twig #}
{% set share_url = url('<current>')|url_encode %}
{% set share_title = product.title.value|url_encode %}
{% set share_image = file_url(product.field_images.0.entity.uri.value)|url_encode %}

<div class="share-buttons">
  <span class="share-buttons__label">{{ 'Поделиться:'|t }}</span>

  {# VK #}
  <a href="https://vk.com/share.php?url={{ share_url }}&title={{ share_title }}&image={{ share_image }}"
     target="_blank" rel="noopener" class="share-buttons__btn share-buttons__btn--vk">
    {% include 'ideal_shop:icon' with {name: 'vk'} %}
  </a>

  {# Telegram #}
  <a href="https://t.me/share/url?url={{ share_url }}&text={{ share_title }}"
     target="_blank" rel="noopener" class="share-buttons__btn share-buttons__btn--telegram">
    {% include 'ideal_shop:icon' with {name: 'telegram'} %}
  </a>

  {# WhatsApp #}
  <a href="https://wa.me/?text={{ share_title }}%20{{ share_url }}"
     target="_blank" rel="noopener" class="share-buttons__btn share-buttons__btn--whatsapp">
    {% include 'ideal_shop:icon' with {name: 'whatsapp'} %}
  </a>

  {# Копировать ссылку #}
  <button type="button" class="share-buttons__btn share-buttons__btn--copy" data-copy-url>
    {% include 'ideal_shop:icon' with {name: 'link'} %}
  </button>
</div>

3.4 Open Graph мета-теги

Для корректного отображения при шеринге:

<meta property="og:title" content="Название товара">
<meta property="og:description" content="Описание товара">
<meta property="og:image" content="https://site.ru/image.jpg">
<meta property="og:url" content="https://site.ru/product/123">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Название магазина">

<!-- VK специфичные -->
<meta property="vk:image" content="https://site.ru/image.jpg">

<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">

Модуль: drupal/metatag + drupal/metatag_open_graph

4. Мессенджеры для поддержки

4.1 Виджеты чата

Сервис Модуль/Виджет Стоимость
Telegram Кастомная ссылка Бесплатно
WhatsApp WhatsApp Business Widget Бесплатно
JivoSite jivosite.ru От 0₽
Carrot quest carrotquest.io От 990₽/мес
Chatra chatra.io От 0₽

4.2 Простой виджет

<!-- Плавающая кнопка мессенджеров -->
<div class="messenger-widget">
  <button class="messenger-widget__toggle" aria-label="Написать нам">
    <svg><!-- chat icon --></svg>
  </button>

  <div class="messenger-widget__menu">
    <a href="https://t.me/yourshop_bot" class="messenger-widget__item">
      <svg><!-- telegram --></svg>
      Telegram
    </a>
    <a href="https://wa.me/79991234567" class="messenger-widget__item">
      <svg><!-- whatsapp --></svg>
      WhatsApp
    </a>
  </div>
</div>

5. Чеклист интеграции

Must (MVP)

Should (v1.1)

Nice to Have

6. Конфигурация

6.1 Drupal Recipe

# recipes/social/recipe.yml
name: Social Integration
description: OAuth login and social links
type: Site

install:
  - social_auth
  - social_auth_telegram
  - social_auth_vk
  - metatag
  - metatag_open_graph

config:
  import:
    social_auth: '*'

  actions:
    block.block.social_links_footer:
      createIfNotExists:
        plugin: social_media_links_block
        region: footer_bottom
        settings:
          platforms:
            telegram:
              url: 'https://t.me/yourshop'
            vk:
              url: 'https://vk.com/yourshop'
            whatsapp:
              url: 'https://wa.me/79991234567'

6.2 Переменные окружения

# .env
TELEGRAM_BOT_TOKEN=123456:ABC-DEF...
TELEGRAM_BOT_NAME=YourShopBot

VK_APP_ID=12345678
VK_APP_SECRET=xxx

YANDEX_CLIENT_ID=xxx
YANDEX_CLIENT_SECRET=xxx

# Ссылки на соцсети
SOCIAL_TELEGRAM=https://t.me/yourshop
SOCIAL_VK=https://vk.com/yourshop
SOCIAL_WHATSAPP=+79991234567
SOCIAL_YOUTUBE=https://youtube.com/@yourshop

7. Безопасность

OAuth

Риск Защита
Подделка callback Проверка state параметра
Перехват токена Только HTTPS
Множественные аккаунты Привязка к телефону
Спам-регистрации Rate limiting + капча

Ссылки

Риск Защита
XSS в share URL Экранирование url_encode
Открытый редирект Whitelist доменов
Трекинг rel="noopener"

Связанные документы

Документ Описание
CUSTOMERS.md Работа с клиентами, вход
NOTIFICATIONS.md Уведомления в мессенджерах
SEO.md Open Graph, мета-теги
SECURITY.md Безопасность OAuth

Версия: 2.1.0