Проект на Vue - Bitrix24 JS SDK

Эта страница ещё обновляется. Некоторые данные могут отсутствовать — мы их вскоре дополним.

Установка в проект Vue

Установка пакета Bitrix24 JS SDK

pnpm add @bitrix24/b24jssdk

yarn add @bitrix24/b24jssdk

npm install @bitrix24/b24jssdk

bun add @bitrix24/b24jssdk

Импорт

Импортируйте библиотеку в проект:

import { LoggerFactory } from '@bitrix24/b24jssdk'

Инициализация

Для работы с Bitrix24 из приложения, встроенного в интерфейс Bitrix24, используйте объект B24Frame.

Он инициализируется на стороне клиента через initializeB24Frame().

SomePage.vue

<script setup lang="ts">
import type { LoggerFactory, B24Frame } from '@bitrix24/b24jssdk'
import { onMounted, onUnmounted } from 'vue'

const $logger = LoggerFactory.createForBrowser('B24/jsSdk::vue', true)
let $b24: undefined | B24Frame

async function someFunction(): Promise<void> {
  if (!$b24) {
    return
  }
  // ...
}

onMounted(async () => {
  try {
    $b24 = await initializeB24Frame()
  } catch (error) {
    $logger.error('Some problems', { error })
  }
})

onUnmounted(() => {
  $b24?.destroy()
})
</script>

Объект B24Hook предназначен исключительно для использования на сервере.

Вебхук содержит секретный ключ доступа, который НЕЛЬЗЯ использовать в клиентском коде (браузер, мобильное приложение).
Для клиентской стороны используйте B24Frame

Для работы с Bitrix24 из автономного серверного приложения используйте объект B24Hook.

import { B24Hook } from '@bitrix24/b24jssdk'

// 1. Получите URL вебхука в Bitrix24:
//    - Перейдите в Bitrix24
//    - Настройки → Разработчикам → Вебхуки
//    - Создайте новый вебхук с необходимыми правами
//    - Скопируйте URL в формате: https://your-domain.bitrix24.com/rest/1/your-token/

// 2. Инициализируйте B24Hook
const $b24 = B24Hook.fromWebhookUrl('https://your-domain.bitrix24.com/rest/1/your-token/')

// 3. Используйте методы API

Объект B24OAuth предназначен исключительно для использования на сервере.

B24OAuth содержит секретный ключ доступа, который НЕЛЬЗЯ использовать в клиентском коде (браузер, мобильное приложение).
Для клиентской стороны используйте B24Frame

Для работы с Bitrix24 из автономного серверного приложения используйте объект B24OAuth.

import { B24OAuth } from '@bitrix24/b24jssdk'

// 1. Зарегистрируйте приложение в Bitrix24:
//    - Перейдите в Bitrix24
//    - Настройки → Разработчикам → Приложения
//    - Создайте новое приложение
//    - Получите Client ID и Client Secret

// 2. Инициализируйте B24OAuth — передайте данные токена и OAuth-учётные данные отдельно.
//    Полную форму B24OAuthParams см. на /docs/working-with-the-rest-api/oauth/.
import { EnumAppStatus } from '@bitrix24/b24jssdk'

const $b24 = new B24OAuth(
  {
    applicationToken: 'current_application_token',
    userId: 1,
    memberId: 'portal_member_id',
    accessToken: 'current_access_token',
    refreshToken: 'refresh_token',
    expires: 1745997853, // unix timestamp, секунды
    expiresIn: 3600,
    scope: 'crm,user_brief',
    domain: 'your-domain.bitrix24.com',
    clientEndpoint: 'https://your-domain.bitrix24.com/rest/',
    serverEndpoint: 'https://oauth.bitrix.info/rest/',
    status: EnumAppStatus.Free
  },
  {
    clientId: 'your_client_id',
    clientSecret: 'your_client_secret'
  }
)

// 3. Используйте методы API

// B24OAuth автоматически обновляет токены при их истечении

Начало работы

Краткое руководство по работе с SDK для REST API Bitrix24

Nuxt

Руководство по установке Bitrix24 JS SDK в приложениях Nuxt.