Как выполнить инициализацию и авторизацию в клиенте#

Бета-версия

Функциональность находится в режиме бета-версии. Функции могут быть изменены, а также могут работать нестабильно. В будущем за функционал может взиматься дополнительная плата.
Подключение к функционалу можно запросить через техподдержку GREEN-API

Добавим точку входа для нашей интеграции в JavaScript файл main.js (или main.ts -- если вы используете TypeScript).

Так же создадим обработчик событий для авторизации в системе.

// Инициализация объекта VoipClient
const greenApiClient = new GreenApiVoipClient();  

// Создание переменных
const connectButton = document.getElementById('connectButton');
const disconnectButton = document.getElementById('disconnectButton');
const startCallButton = document.getElementById('startCallButton');
const endCallButton = document.getElementById('endCallButton');
const phoneNumberInput = document.getElementById('phoneNumber');

let isInitialized = false;

// Запуск обработчика событий
connectButton.addEventListener('click', async () => {
  const idInstance = document.getElementById('idInstance').value;
  const apiTokenInstance = document.getElementById('apiTokenInstance').value;
  const apiUrl = document.getElementById('apiUrl').value;

  await greenApiClient.init({
    idInstance: idInstance,
    apiTokenInstance: apiTokenInstance,
    apiUrl: apiUrl
  });

  isInitialized = true;
  phoneNumberInput.disabled = false;
  startCallButton.disabled = false;
  disconnectButton.disabled = false;
  connectButton.disabled = true;
  endCallButton.disabled = false;
});

Так же необходимо добавить соответствующие элементы в HTML разметке.

    <section>
      <p>Initialization</p>
      <input id="apiUrl" placeholder="apiUrl">
      <input id="idInstance" placeholder="instance id">
      <input id="apiTokenInstance" placeholder="instance api token">
      <button id="connectButton">connect</button>
      <button id="disconnectButton" disabled>disconnect</button>
    </section>

    <section style="margin-top: 16px;">
      <p>Outgoing call</p>
      <input id="phoneNumber" placeholder="phone number" disabled>
      <button id="startCallButton" disabled>start call</button>
    </section>

    <section>
      <p>Current call</p>
      <button id="endCallButton" disabled>end call</button>
    </section>

Для того чтобы программа начала работать нужно передать необходимые параметры: - idInstance
- apiTokenInstance
- Добавить apiUrl

Возьмите эти значения из вашего личного кабинета GREEN-API. Выберите необходимый авторизированный инстанс.

В качестве apiUrl используейте строку https://pool.voip.green-api.com, где pool представляет собой первые 4 символа искомого idInstance.

После того как нажмете кнопку connectButton произойдет передача параметров в объект greenApiClient, также переменная isInitialized примет значение true.

В таком состоянии наш клиент готов совершать и принимать звонки.

Для того, чтобы разлогиниться от текущего инстанса необходимо добавить следующий код в ваш main.js файл

disconnectButton.addEventListener('click', async () => {
  greenApiClient.destroy();
  isInitialized = false;
  phoneNumberInput.disabled = true;
  startCallButton.disabled = true;
  disconnectButton.disabled = true;
  connectButton.disabled = false;
  endCallButton.disabled = true;
});

Теперь при нажатии на кнопку disconnectButton -- все объекты и переменные перейдут в изначальное состояние, а клиент потеряет доступ к инстансу.