Подключение авторизации через TG и VK или почувствуйте боль локальной разработки

Привет! Последние несколько дней я пытался подключить к своему небольшому учебному проекту авторизацию через Телеграм и ВКонтакте. Локально, не имея собственного выделенного домена, столкнувшись с кучей проблем по пути. В этой статье постараюсь описать шаги при поочередном подключении авторизации, появляющиеся проблемы и как их решить.

Содержание

1. Авторизация через Телеграм

   1. Настройка Телеграм Бота

   2. Установка домена и первая проблема

   3. Настройка Telegram Login Widget и авторизация

2. Авторизация через ВКонтакте

   1. Создание приложения

   2. Настройка элемента интеграции

   3. Очередная проблема

3. Что же делать?

4. Решение проблемы

   1. Дополнение файла hosts

   2. Установка утилиты mkcert

   3. Регистрация домена

   4. Изменение конфигурации nginx

   5. Обновление домена в TG и VK

   6. Радость и облегчение

5. Заключение

---

Авторизация через Телеграм

Суть авторизации через Телеграм предельно проста. Создаете бота, настраиваете Telegram Login Widget по ссылке в официальной документации, и казалось бы все. В этой статье я не буду вдаваться в подробности обработки получаемых от TG данных пользователя, лишь базовая настройка авторизации.

Настройка Телеграм бота

Для подключения авторизации с помощью бота нам понадобится сам бот, которого можно создать в@BotFather от Телеграм, сделаем это через встроенное приложение.

Здесь все по классике, придумываем ему супер оригинальное имя и надеемся чтобы оно было принято.

Установка домена и первая проблема

После создания бота открываем его в этом же приложении и листаем вниз, нам нужна вкладка Bot Settings, переходим в нее и листаем до поля ввода Web Login. Сюда нужно ввести наш домен, но как быть если домена нет, а попробовать авторизацию через TG локально хочется? Попробуем почитать документацию по ссылке https://core.telegram.org/bots/features#web-login

Telegram offers a flexible, lightweight and free framework to authenticate users on any website and app. This can be used to bridge your platform with Telegram, providing a smooth experience to your users. You can also freely rely on this framework to implement a fast and signup-free login on your site, regardless of its connection to Telegram.

Widgets

The Telegram login widget is a simple and secure way to authorize users on your website.

1. Choose a bot – ideally its name and profile pic should match the website title and logo.

2. Use the /setdomain command in @BotFather to pair the bot with your website domain.

3. Configure your widget using our dedicated tool and embed it on your website.

Полезной информации маловато, на наш вопрос о локальном тестировании вообще нет ответа. Но домен нам нужно указать. При размышлении о проблеме взгляд может упасть на сервисы по типу ngrok, xtunnel, localtunnel и прочие сервисы предоставляющие временные доменные имена. В 2025 году этот способ прекрасно работал, например, через ngrok - запускаете свой сервер, например, на 8000 порту, и с помощью ngrok открываете его командой:

ngrok http 8000

Сервис выдает вам защищенный публичный URL адрес, который переадресует трафик на ваш локальный сервер. Ngrok выдает url следующего вида:

• https://abc123xyz.ngrok-free.dev

Раньше подобный домен Телеграм спокойно обрабатывал и позволял устанавливать как redirect url в боте, но в 2025 году что-то изменилось и теперь он отторгает их, равно как и домены XTunnel и localtunnel.

Но выход есть, для локальной разработки можно указать всего лишь 127.0.0.1, Телеграм его спокойно примет.

Настройка Telegram Login Widget и авторизация

После этого настроим Telegram Login Widget. Все что требуется на данном этапе - ввести username нашего бота, после чего будет сгенерирован встраиваемый код (embed code), который необходимо вставить на наш сайт. Также снизу отображается как будет выглядеть кнопка для пользователей.

Вставим этот скрипт в пустой html документ и откроем его, например, через расширение live server для Visual Studio Code. Откроем страницу и увидим на ней одну кнопку, после нажатия на которую нам будет предложено пройти авторизацию по номеру телефона.

После чего в Телеграм придет сообщение, необходимо принять запрос на авторизацию.

Разрешаем или запрещаем боту писать нам в Телеграм, это не столь важно сейчас, после чего в Телеграм вновь приходит уведомление об успешной авторизации на сайте, сайту будут известны ваше имя, публичная ссылка и фотография

Сейчас наши данные не идут ни на какой наш личный сервер, нужно изменить виджет выбрав тип авторизации Redirect to url, а не Callback. Адрес для обработки может выглядеть примерно вот так http://127.0.0.1/api/v1/auth/tg

Скрытый текст

Конечно, указывать маршруты начинающиеся с api/ не стоит, так как по ним не должен переходить пользователь, лучше указать http://127.0.0.1/auth для фронта приложения, с которого будет отправляться запрос уже на бэкенд приложения, который пользователь уже не увидит. Но для показательного примера этим можно пренебречь.

По этому адресу обязательно должен быть эндпоинт обрабатывающий запросы, но это отдельная тема.

---

Авторизация через ВКонтакте

Предположим что вы настроили обработку пользовательских данных от Телеграм, регистрируете их в системе, выдаете необходимые права доступа. Далее встает вопрос настройки авторизации через ВКонтакте, для этого нам необходимо приложение ВК. С 2026 года обычное создание приложений ВК недоступно, сначала необходимо подтвердить свой профиль "бизнеса", к счастью, вам не нужно иметь бизнес официально, не обязательно даже являться ИП или самозанятым, в официальном FaQ говорится:

Я могу использовать VK ID как физическое лицо?
Да, конечно. Вы можете зарегистрироваться как физическое лицо в личном кабинете и подключить авторизацию VK ID к своему приложению. Как это сделать, читайте в документации

Так что спокойно регистрируемся как физическое лицо через госуслуги, и можно создавать приложение.

Создание приложения

Вводим название (какое понравится) и выбираем платформу Web для разработки

На следующем этапе нас просят ввести базовый домен и доверенный redirect url. Обратимся к документации и в конце 6 пункта сможем прочесть следующее:

Чтобы в процессе интеграции VK ID локально проверить, работает ли авторизация, разверните свой проект на http://localhost:80. Обязательно добавьте localhost в список базовых доменов. В этом случае поле Базовый домен заполнится таким образом: localhost (порт указывать не нужно). Доверенный redirect URL пропишите с http и без порта — http://localhost

Уже лучше, чем в Телеграм, сразу видна возможность локальной разработки! Смело прописываем настройки приложения.

Создаем приложение и подтверждаем действие в ВК, например, кодом из СМС. В качестве способов быстрого входа для примера оставим только кнопку OneTap

Настройка элемента интеграции

После настройки способов входа появится окно настройки элементов для интеграции, по умолчанию выбран low-code способ, похожий по настройке на Telegram Login Widget, можем настроить стили кнопки и получить код для вставки на сайт.

<div>
  <script nonce="csp_nonce" src="https://unpkg.com/@vkid/sdk@<3.0.0/dist-sdk/umd/index.js"></script>
  <script nonce="csp_nonce" type="text/javascript">
    if ('VKIDSDK' in window) {
      const VKID = window.VKIDSDK;

      VKID.Config.init({
        app: 1234567890, // замените на свое значение
        redirectUrl: 'http://localhost/api/v1/auth/vk/',
        responseMode: VKID.ConfigResponseMode.Callback,
        source: VKID.ConfigSource.LOWCODE,
        scope: '', // Заполните нужными доступами по необходимости
      });

      const oneTap = new VKID.OneTap();

      oneTap.render({
        container: document.currentScript.parentElement,
        showAlternativeLogin: true
      })
      .on(VKID.WidgetEvents.ERROR, vkidOnError)
      .on(VKID.OneTapInternalEvents.LOGIN_SUCCESS, function (payload) {
        const code = payload.code;
        const deviceId = payload.device_id;

        VKID.Auth.exchangeCode(code, deviceId)
          .then(vkidOnSuccess)
          .catch(vkidOnError);
      });
    
      function vkidOnSuccess(data) {
        // Обработка полученного результата
      }
    
      function vkidOnError(error) {
        // Обработка ошибки
      }
    }
  </script>
</div>

Этот код создает на нашем сайте аккуратную кнопку входа через ВК,

Также, что вполне очевидно должен быть настроен эндпоинт для обработки данных по адресу http://localhost/api/v1/auth/vk/

Очередная проблема

И здесь появляется еще одна проблема. Сейчас сайт с возможностью авторизации через TG и ВК запущен на 127.0.0.1:5000 через live server. При попытке авторизоваться через ВК мы увидим следующую ошибку.

Это происходит потому что мы указали в настройках приложения базовый домен localhost, а страницу открываем по адресу 127.0.0.1, и по началу ошибка не очевидна, ведь все привыкли что 127.0.0.1 и localhost это в подавляющем большинстве случаев одно и то же, но не для ВК.

Что же делать?

Не имея должных знаний в этой области процесс решения проблемы был сложным и тяжелым, сначала я пытался настроить проксирование запросов с помощью настроек сервера nginx, используя следующую минимальную конфигурацию.

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name 127.0.0.1 localhost; 


        location / {
            proxy_pass http://127.0.0.1:5500;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location ~ ^/(api|admin)/ {
            proxy_pass http://127.0.0.1:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

Изначально эти настройки применялись для корректной работы авторизации через Телеграм, ведь мое приложение локально разделено на фронтэнд (по адресу 127.0.0.1:5500) и бэкенд (по адресу 127.0.0.1:8000), из-за чего запросы на бэкенд шли некорректно. Эта настройка и правда помогла при тестировании авторизации через Телеграм, но сайт необходимо было открывать строго на 127.0.0.1 без явного указания порта (по умолчанию 80), запросы проксировались правильно, авторизация работала, все успешно.

При попытках настройки авторизации ВКонтакте все пошло прахом. При открытии сайта на 127.0.0.1 - авторизация через Телеграм работает, через ВКонтакте не работает, при открытии на localhost - авторизация Телеграм тут же ломается из-за неверного домена бота.

---

Решение проблемы

У проблемы несколько решений.
Первое самое очевидное - раскошелиться на реальный домен (тем более что регистрация доменов стоит от 129 рублей в год!).
Второй способ может показаться менее очевидным. Необходимо зарегистрировать домен у себя локально. На эту идею я наткнулся читая следующую статью (см. пункт "Авторизация через Telegram").

Регистрация локального домена и последующее решение проблемы проходит в несколько этапов

1. Дополнение файла hosts

2. Установка утилиты mkcert

3. Регистрация домена

4. Обновление конфигурации nginx

5. Обновление домена в TG и VK

6. Радость и облегчение

Дополнение файла hosts

Придумаем себе красивый домен, например mybest.site.com
Корневой домен обязательно должен быть из официально существующих и распространенных, например .com .ru .net и так далее, Телеграм блокирует установку доменов из зон типа .local .dev и пр.

В Windows этот файл находится по пути C:/Windows/System32/drivers/etc/hosts (etc/hosts для Linux), откроем его с помощью Notepad++.

Добавим в него следующее соотношение и сохраним от имени администратора.

127.0.0.1 mybest.site.com

Установка утилиты mkcert

Для установки утилиты воспользуемся командами с официальной страницы GitHub.

Установка будет производиться через менеджер пакетов Chocolatey для Windows

choco install mkcert

После установки утилиты необходимо обновить переменную окружения PATH и добавить в нее путь к исполняемому файлу утилиты. Далее запускаем ее следующей командой:

mkcert -install

Данная команда создаст на вашем ПК локальный сервер сертификации.

Регистрация домена

После создания центра сертификации следует зарегистрировать наш домен следующей командой:

mkcert mybest.site.com

В директории где была выполнена команда будут созданы два файла - mybest.site.com.pem и mybest.cite.com-key.pem
Это и есть наш сертификат и его ключ. Для удобства переместим их в папку certs поближе к серверу nginx. Например, nginx развернут по пути C:/nginx/, то сертификаты следует поместить по пути C:/nginx/certs/
Разумеется, вы можете поместить эти сертификаты в любую папку, главное потом верно указать к ним путь в конфигурации nginx.

Изменение конфигурации nginx

Минимальная конфигурация nginx должна выглядеть следующим образом

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 443 ssl;
        server_name mybest.site.com;

        ssl_certificate     C:/nginx/certs/mybest.site.com.pem;
        ssl_certificate_key C:/nginx/certs/mybest.site.com-key.pem;

        location / {
            proxy_pass http://127.0.0.1:5500;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto https;
        }

        location ~ ^/(api|admin)/ {
            proxy_pass http://127.0.0.1:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto https;
        }
    }
}

Проверим конфигурацию командой

nginx -t

И при успешной проверке перезагрузим командой

nginx -s reload

Теперь nginx готов корректно обрабатывать наши запросы поступающие с https://mybest.site.com

Обновление домена в TG и VK

Укажем для Телеграм бота новый домен и применим изменения убедившись что нет ошибок

Аналогичным образом поступим с приложением ВКонтакте, сменив базовый домен и redirect url.

Также следует поменять redirect url в коде кнопки авторизации через Телеграм заменив базовый домен 127.0.0.1 на mybest.site.com. Аналогично и для кнопки ВКонтакте. На сайт следует заходить по следующему url: https://mybest.site.com/

Благодаря настройкам в nginx этот url будет обрабатываться фронтом приложения.

Радость и облегчение

При правильном выполнении всех действий вы заметите, что авторизация через Телеграм не отваливается с ошибкой bot domain invalid, а авторизация через ВКонтакте не выкидывает ошибок при прохождении авторизации.

---

Заключение

Подключение локальной авторизации через социальные сети в текущих реалиях может доставить некоторое количество проблем, особенно начинающим разработчикам, которые могут захотеть объединить несколько сервисов авторизации в одном приложении.

Эта статья была написана по личному опыту локального подключения авторизации и тех проблем с которыми пришлось столкнуться в процессе.

Надеюсь моя статья была вам полезна и помогла без сильной боли и большого количества проклятий настроить локальную авторизацию через несколько социальных сетей.

Конструктивная критика к качеству подачи материала приветствуется!