Интеграция VK ID в свой сервис: Пошаговая инструкция
В нашем случает в Autopilot AI Wiz: наш опыт.
Если вы занимаетесь разработкой, наверняка сталкивались с мемами о документациях к API и сервисам. Действительно, это смешно — сами разработчики шутят об этом и сами же их пишут. Совпадение? Не думаю.
Времена меняются, и с повсеместным использованием нейросетей интеграция сторонних API стала проще. Теперь достаточно написать в чат что-то вроде «Эй, друг, как мне запостить сообщение в Facebook через API на TypeScript?» и вуа-ля! Почти готовый ответ у вас на руках. Однако, что делать, если API постоянно обновляются? Или, что еще сложнее, если речь идет о русском сервисе? Здесь на помощь приходят форумы и соцсети, где люди делятся опытом и спасают других от подобных трудностей. Эта статья написана с той же целью.
Сегодня я расскажу, как мы в AiWiz интегрировали через наш сервис Autopilot авторизацию с помощью VK ID.
Нам это необходимо, потому что наш сервис позволяет автоматически постить сообщения в группы VK, и для этого нужно залогиниться в VK через наш сервис. Документация к этому делу, конечно, есть, но это отличный пример для мемов.
Как устроена аутентификация в различных сервисах для использования их API от лица пользователя?
Сначала наш сервис отправляет запрос на определенный URL, указывая аутентификационные данные и так называемый redirect_uri — адрес, на который вас перенаправят после успешной аутентификации, добавив временный токен/специальный код. Затем отправляем еще один запрос, передавая полученный код, чтобы получить access token, который нужно сохранять и использовать при каждом API запросе. Это общая схема, а конкретная реализация остается за разработчиками.
Шаги, которые мы прошли:
1. Создали приложение в VK.
— Здесь нет смысла вдаваться в подробности, так как этот пункт хорошо и понятно описан на [официальном сайте](https://id.vk.com/about/business).
2. Запросили все необходимые разрешения.
— Пришлось указать много персональных данных. Если вам нужно только получать данные от VK, можно их не указывать.
3. Настроили приложение:
— Назвали наше приложение, добавили картиночку, чтобы было красиво.
— Добавили базовый домен (ы) (обязательно укажите localhost для локального тестирования).
— Добавили все необходимые redirect_uri для каждого домена. Обязательно укажите «http://localhost/вашредирект» и/или «https://localhost/вашредирект» для локальных тестов.
— Важно! При локальном тестировании сервис должен слушать либо на 80, либо на 443 портах. Учтите это при настройке.
Что мы сделали со стороны нашего сервиса:
1. Добавили в переменные окружения (.env) Autopilot ID приложения и сервисный ключ.
2. Создали необходимый URL для отправки кредсов.
3. Реализовали окно авторизации (Это я оставлю на вашу совесть).
— По данному URL нужно перейти. Например, window.location.assign(url). Сервер проверит кредсы и перейдет на указанный redirect_uri, передав временный токен.
4. Сохраненили временный код/токен и отправили его вместе с сервисным ключом на указанный URL.
5. Сохранили полученный токен.
— Токен сохраняем там, где его легко получить для отправки API запросов. У нас это глобальная переменная — $. Его мы отправляем с каждым запросом к api в заголовках.
На что стоит обратить внимание:
— На ваш redirect_uri придет объект payload — это не объект, а строчка, поэтому ее нужно распарсить.
— Если вы разработчик, работающий на Ubuntu, вы можете столкнуться с проблемами при назначении портов 80 и 443. В Visual Code попытка присвоить вашему приложению эти порты вызывает ошибку, указывающую на невозможность выполнения операции. Возможно, вам повезет больше в решении этой проблемы, но лично у меня не получилось. Однако, на Mac такой проблемы не возникало.
Вот и все. Вроде бы не очень сложно? Желаю удачи в реализации авторизации в VK!
Автор Тимофей, разработчик AI Wiz
