Module: 4. Development

Lesson 11. Working with the API VKontakte in the client side of the application

The main thing in the lesson

• •

  The VKontakte API supports GET and POST requests. The request URL is as follows:

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

  • •

    {адрес-сервера} — api.vk.ru . This address can be obtained dynamically by triggering an event VKWebAppGetConfig .

  • •

    {имя-метода} The name of the API request for a call, for example friends.get . The names can be found in the section API Portal for developers.

  • •

    {параметры} URL parameters. Two parameters are required:

    • •
      v Specifies the API version, for example v=5.131 .
  • •

    Pass the access key for the API call in the HTTP header:

    • •
      Authorization: Bearer <КЛЮЧ_ДОСТУПА>
• •

  To get the access key, call the event VKWebAppGetAuthToken The VK Bridge Library. In the call, specify the access rights that the key will receive.

  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('Ошибка получения ключа доступа:', error); } };
• •

  To send an API request, you can call an event VKWebAppCallAPIMethod The VK Bridge Library.

  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.131", access_token: accessToken ?? "", ...params, }, }); } catch (e) { return Promise.reject(e); } };

Useful links

• •
  Client part (source code) ,
  Look at the code fragments by #M4L11>
• •
• •
  Server part (source code)
• •
  Мини-приложение« Блюдо дня»
• •
  API VKontakte documentation
• •
  Query Format
• •
  API calls in mini applications
• •
  VKWebAppGetAuthToken Event
• •
  The VKWebAppCallAPIMethod Event

:::