Модуль: 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. В вызове укажите права доступа, которые получит ключ.TypeScriptexport 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.TypeScriptexport 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); } };
Полезные ссылки
- •Клиентская часть (исходный код),
cмотрите фрагменты кода по #M4L11. - •
- •
- •
- •
- •
- •
- •