Модуль: 4. Разработка

Урок 11. Работа с API ВКонтакте в клиентской части приложения

Главное в уроке

  • API ВКонтакте поддерживает GET- и POST-запросы. URL запросов имеет следующий вид:

    https://{адрес-сервера}/method.{имя-метода}?{параметры}

    • {адрес-сервера}api.vk.ru. Этот адрес можно получить динамически, вызвав событие VKWebAppGetConfig.

    • {имя-метода} — название API-запроса для вызова, например friends.get. Названия можно найти в разделе API портала для разработчиков.

    • {параметры} — URL-параметры. Обязательными являются два параметра:

      • v — указывает версию API, например v=5.199.

      • access_token — ключ доступа для вызова API-запроса.

  • Чтобы получить ключ доступа, вызовите событие VKWebAppGetAuthToken библиотеки VK Bridge. В вызове укажите права доступа, которые получит ключ.

    TypeScript
    export const getAccessToken = async () => { try { const data = await bridge.send('VKWebAppGetAuthToken', { app_id: Number(import.meta.env.VITE_APP_ID), scope: 'friends', }); return data.access_token; } catch (error) { console.log('Ошибка получения access_token:', error); } };
  • Чтобы отправить API-запрос, вы можете вызвать событие VKWebAppCallAPIMethod библиотеки VK Bridge.

    TypeScript
    export const vkApiFetch = async (method: string,params?: { [key: string]: unknown }) => { const accessToken = await getAccessToken(); try { return await bridge.send("VKWebAppCallAPIMethod", { method: method, params: { v: "5.199", access_token: accessToken ?? "", ...params, }, }); } catch (e) { return Promise.reject(e); } };

Полезные ссылки