В нашем случает в 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