Проект на Nuxt
Руководство по установке Bitrix24 JS SDK в приложениях Nuxt.
Эта страница ещё обновляется. Некоторые данные могут отсутствовать — мы их вскоре дополним.
Установка в проект Nuxt
Для доступа к Bitrix24 JS SDK в проекте Nuxt используйте модуль @bitrix24/b24jssdk-nuxt.
Требуется Nuxt 4. Перед началом убедитесь, что обновились до Nuxt 4.
Установка пакета Bitrix24 JS SDK
pnpm add @bitrix24/b24jssdk-nuxt
yarn add @bitrix24/b24jssdk-nuxt
npm install @bitrix24/b24jssdk-nuxt
bun add @bitrix24/b24jssdk-nuxt
Добавьте модуль Bitrix24 JS SDK в ваш nuxt.config.ts
// @check-ignore: defineNuxtConfig is a Nuxt auto-import, not available in SDK typecheck context
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24jssdk-nuxt']
})
Импорт
Импортируйте библиотеку в проект:
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 автоматически обновляет токены при их истечении