Недавно я намеревался интегрировать Zoom в свое веб-приложение с помощью чистого / простого / ванильного JavasScript, но столкнулся с несколькими проблемами из-за документации и примеров кода:
- В предоставленном образце кода были проблемы с безопасностью
- Неполная документация для чистого JavaScript и PHP.
Я перечислю свои проблемы / решения, а затем предоставлю полнофункциональный пример JavaScript + PHP, который интегрирует Zoom в базовое веб-приложение.
Код в документации был для Angular; Мне нужен был простой JavaScript.
Проблема №1: Используйте правильные клавиши
Я просматривал документацию Zoom по теме «Создание приложения - SDK веб-клиента».
После того, как вы зарегистрируетесь в своей учетной записи Zoom Developer, первым делом необходимо выбрать тип приложения. Я выбрал «SDK», поскольку этот термин широко используется в руководстве. Я использовал свои значения ключа SDK / секрета SDK, но получал ошибки (в частности, «Тайм-аут присоединения к собранию»).
Оказывается, вместо этого мне нужны учетные данные для приложения JWT (JSON Web Token)!
Извлеченный урок
Если учетные данные SDK не работают, попробуйте JWT! Он называется «Ключ API / Секрет API», что соответствует тому, что он называется в примере кода.
Проблема № 2: Несогласованные переменные
Пример кода веб-клиента Zoom работает, но он использует функцию ZoomMtg. generateSignature (), которая требует от вас предоставления секрета API на стороне клиента, что представляет собой угрозу безопасности. Комментарии к коду и документация указывают на то, что вам следует вместо этого сгенерировать подпись, используя код на стороне сервера.
В качестве альтернативы вы можете следовать коду, приведенному в документации. Однако у меня были проблемы с тем, чтобы заставить его работать.
В обоих случаях предлагается передать объект. К сожалению, в документации был объект под названием meetConfig с такими элементами, как meetingNumber, тогда как в примере кода был meetingConfig с другими элементами, такими как mn для «номера встречи».
Я изо всех сил пытался объединить эти два образца кода (один работал, но был небезопасен, а другой не работал).
Проблема № 3: неполный пример PHP
Для создания подписи вам понадобится серверный код. Предоставленный PHP-код был большим подспорьем, но я хотел восполнить некоторые недостающие части для менее опытных.
Если вы следуете рекомендуемому подходу к передаче объекта (вместо отдельных значений), вам сначала нужно использовать функцию json_decode ().
Вот сокращенный фрагмент кода. полный код находится по ссылке в конце этого сообщения:
<?php
// fill in your API Secret (probably from the JWT, not the SDK!)
$apiSecret = '...';
// if you're passing in a JSON object, decode it first
$meetingData = json_decode(file_get_contents('php://input'), true);
// Make sure your variable names match!
$apiKey = $meetingData['meetingData']['apiKey'];
$meetingNumber = $meetingData['meetingData']['meetingNumber'];
$role = $meetingData['meetingData']['role'];
print generate_signature( $apiKey, $apiSecret, $meetingNumber, $role);
function generate_signature ( $apiKey, $apiSecret, $meetingNumber, $role) {
// use their code
}
?>
Проблема №4: Отсутствие чистого примера JavaScript
Примечание. В итоге я не использовал исправления кода в этой части, но хотел упомянуть об этом, если вам понадобится помощь в преобразовании кода из Angular.
В документации не было примера чистого JavaScript. Внесите следующие изменения в предоставленный код Angular:
- Удалите «импорт», если вы используете CDN.
- Добавьте ключевое слово «функция» перед getSignature ()
- Отрегулируйте размещение ошибки; скриншот ниже
У меня все еще появляется ошибка Zoom «Тайм-аут присоединения к собранию»!
На момент написания статьи я не выяснил причину, но обходной путь заключается в том, что хост должен сначала войти в систему. Возможно, это ограничение моей «бесплатной» учетной записи Zoom?
Также: в идентификаторе встречи, который предоставляет Zoom, есть пробелы (что упрощает чтение). Вам нужно удалить пробелы, чтобы он работал.
Окончательный код SDK JavaScript для масштабирования
Полный код можно найти на GitHub здесь:
