Интеграция с Canvas

1. Настройка сервера

Интеграция системы прокторинга ProctorEdu с Canvas LMS осуществляется по стандарту IMS LTI.

1.1 SSL-сертификат

На веб-сервере должен быть установлен валидный SSL-сертификат, чтобы страницы Canvas LMS открывались по протоколу HTTPS. Проверить валидность сертификата на сервере можно с помощью сервиса SSLChecker.com. Это требование политики безопасности браузера, которая не позволяет получить доступ к камере и микрофону по незащищенному протоколу HTTP. Можно выпустить бесплатный SSL-сертификат Let’s Encrypt.

1.2 Параметры веб-сервера

Предложенные изменения имеет смысл вносить только если по какой-то причине не удается разместить JavaScript сценарий на страницах Canvas LMS (раздел 2.4) и при наличии доступа к веб-серверу Canvas LMS.

Начиная с версии Chrome 80 (касается всех браузеров на движке Chromium) ужесточается политика безопасности браузера SameSite и по умолчанию при открытии страницы в IFRAME файлы cookies не передаются.

На данный момент Canvas LMS при установке куков не добавляет необходимые флаги, из-за чего работа с куками в IFRAME блокируется, если домены прокторинга и Canvas различаются.

Обойти это ограничение можно с помощью настройки веб-сервера Apache, который присутствует на сервере Canvas. Для этого нужно в блок настроек виртуального хоста () Canvas LMS добавить блок настроек, меняющих заголовки ответа веб-сервера через модуль mod_headers для Apache:
<!--httpd.conf--> 

<IfModule headers_module>
    Header edit Set-Cookie (.*) "$1; Secure; SameSite=none"
</IfModule>
Модуль "headers" должен быть включен в Apache, для этого можно использовать команду "a2enmod headers".

2. Подключение прокторинга

2.1 Добавление приложения

Для начала нужно в настройках курса добавить новое приложение. Для этого нужно перейти в "Настройки" → "Приложения" →"Добавить приложение" и в открывшимся окне заполнить поля по следующему образцу:

➔Тип конфигурации: Ручной ввод
➔Имя: Прокторинг
➔ Пользовательский ключ: demo
этот ключ для вашего сервере прокторинга выдается менеджером
➔ Общий секретный ключ: secret
этот ключ для вашего сервере прокторинга выдается менеджером
➔ URL-адрес запуска: https://demo.proctoring.online/api/auth/lti?redirect=
сервер demo.proctoring.online используется только в качестве примера, вместо него укажите адрес вашего сервера прокторинга
➔ Домен: demo.proctoring.online
сервер demo.proctoring.online используется только в качестве примера, вместо него укажите адрес вашего сервера прокторинга
➔Конфиденциальность: Общедоступно
➔ Пользовательские поля:
url=https:///#code
template=default

Поля, помеченные цветом, нужно заменить на свои. В пользовательских полях указываются дополнительные параметры в формате КЛЮЧ=ЗНАЧЕНИЕ. Это те параметры, которые будут переданы в систему прокторинга при запуске студентом данного приложения. В параметре "url" нужно указать ссылку на элемент Canvas LMS, который необходимо открыть сразу после успешного запуска сеанса прокторинга.

2.2 Добавление внешнего инструмента

Теперь нужно добавить новый элемент курса в конкретный модуль. Для этого нужно перейти в "Модули" → "[+] Добавить элемент". И в открывшимся окне нужно выбрать "Внешний инструмент" и выделить приложение, которое было добавлено на предыдущем шаге. Поля "URL-адрес" и "Название страницы" заполняются автоматически, а флажок "Загрузить в новой вкладке" нужно поставить вручную.

2.3 Ограничение доступа к элементу теста

Можно настроить ограничение доступа так, чтобы тест был недоступен, пока студент не зайдет в элемент прокторинга. Для этого нужно создать два модуля, в первый модуль поместить элемент прокторинга, а во второй — элемент теста. В первом модуле нужно добавить требование просмотра элемента прокторинга, а во втором модуле выбрать предварительное условие — первый модуль.
Помимо этого можно добавить ограничение доступа к элементу теста по коду. Для этого нужно включить опцию "Требуется код доступа" в настройках элемента теста.
Указанный код нужно подставить в конце URL ссылки на тест (которая указывается в пользовательском поле "url"), чтобы получилось так: https:///#12345

При запуске теста под прокторингом, который ограничен кодом доступа, код автоматически подставится в поле ввода и участник сможет приступить к тестированию.

2.4 Подключение JavaScript кода

Для работы прокторинга нужно разместить код SDK на страницах Canvas LMS. Как подключить свой код в Canvas LMS описано в данном руководстве. Для этого выполните следующие шаги:

1) Создайте на компьютере текстовый файл proctoring.js в кодировке Unicode (UTF-8) и вставьте туда следующий код:
<!--JavaScript--> 

(function(window) {
  if (window.self === window.parent) {
    var script = document.createElement('script');
    script.src = '//demo.proctoring.online/sdk/supervisor.js';
    script.dataset.supervisor = 'auto';
    script.onload = function() {
      supervisor.on('load', function(iframe) {
        var input = iframe.contentDocument.querySelector('input[name="access_code"]');
        var url = new URL(iframe.src);
        if (input && url) {
          input.value = url.hash.slice(1);
        }
      });
    };
    document.head.appendChild(script);
  } else {
    $(document).on('submit', function(e) {
      var form = e.target;
      if (/\/courses\/\d+\/quizzes\/\d+/.test(form.action) && /post/i.test(form.method)) {
        var action = form.action;
        var url = new URL(action);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', action);
        xhr.addEventListener('load', function(e) {
          window.location.href = url.searchParams.get('next_question_path') || url.href;
        });
        xhr.send(new FormData(form));
        e.preventDefault();
      }
    });
  }
})(window);
* demo.proctoring.online — домен вашего сервера прокторинга.

Также нужно изменить настройку внешнего инструмента, добавив параметр "redirect" в базовый URL-адрес, чтобы получилось следующее:
https://demo.proctoring.online/api/auth/lti?redirect=https://your-canvas-domain/profile
где demo.proctoring.online — домен вашего сервера прокторинга, "your-canvas-domain" — домен вашего сервера Canvas.

2) Включите возможность загрузить пользовательский JavaScript в меню "Админ" → "Настройки" → "Функциональные возможности" → "Пользовательские CSS/JavaScript".
3) Откройте текущую тему в редакторе тем "Админ" → "Темы" → "Открыть в Редакторе тем" и загрузите файл proctoring.js разделе редактора "Отправить" → "Файл JavaScript".
4) Сохраните изменения, нажав кнопки "Сохранить тему" и "Применить тему".

Теперь тест должен корректно запускаться в IFRAME, при этом другие элементы навигации в Canvas LMS работать не будут.

3. Настройка интеграции в системе прокторинга

Чтобы подключить интеграцию с Canvas в системе прокторинга необходимо импортировать следующую конфигурацию хоста по аккаунтом менеджера:
<!--JSON--> 

{
  "id": "<Host_ID>",
  "key": "<License_Key>",
  "params": {
    "webhooks": {
      "canvas": {
        "authorizer": "lti",
        "integrator": "lti",
        "consumerKey": "demo",
        "consumerSecret": "secret",
        "callbackURL": "query.redirect",
        "profile": {
          "username": "payload.user_id",
          "role": "payload.roles.find(v=>/Instructor/.test(v))?'proctor':'student'",
          "nickname": "payload.lis_person_name_full",
          "lang": "(payload.launch_presentation_locale||'').slice(0,2)",
          "group": "['G',payload.context_id,payload.resource_link_id].join('-')",
          "referrer": "payload.launch_presentation_return_url",
          "labels": "payload.lis_person_contact_email_primary"
        },
        "register": {
  "identifier": "[payload.user_id,payload.context_id,payload.resource_link_id].join('-').replace(/[^A-Za-z0-9_-]+/g,'_')",
          "template": "payload.custom_template||'default'",
          "subject": "payload.resource_link_title",
          "members": "payload.custom_members==='@'?user.group:payload.custom_members",
          "url": "payload.custom_url||payload.launch_presentation_return_url",
          "tags": "payload.lis_person_contact_email_primary"
        },
        "start": true,
        "stop": true,
        "pause": true,
        "submit": true
      }
    },
    "sdk": {
      "iframe": {
        "sandbox": "allow-scripts allow-forms allow-modals allow-same-origin allow-popups allow-downloads"
      }
    }
  }
}
где поля "consumerKey" и "consumerSecret" нужно заменить на случайно сгенерированную последовательность символов (латинские буквы разного регистра и цифры, рекомендуемая длина 24 символа); "id" — идентификатор хоста (если его не указывать, создастся новый хост); "key" — лицензионный ключ данного хоста.