Как подключить Azure Httptrigger к веб-сайту?

Question

У меня ограниченный опыт создания веб-сайтов / front-end - только HTML / CSS - и я работаю в основном с бэкэндом - Node.js в функциях Azure.

Я создал функцию Azure (httptrigger), для которой нужно нажать кнопку на моем веб-сайте.

Например, например, как панель поиска, я хочу, чтобы пользователь что-то набрал и щелкнул поиск. После того, как они нажали кнопку поиска, я хочу нажать на http-триггер с содержимым поиска в строке запроса.

После нажатия на мой триггер я бы хотел, чтобы он возвращал некоторые данные для отображения на веб-странице.

Я пытаюсь добавить поисковый контент в строку запроса (и, возможно, надежно скрыть конечную точку httptrigger?) И как я могу отправить данные обратно на веб-сайт html.

На данный момент я создал httptrigger для работы и возврата html-данных через context.res= {body: html}, который прекрасно работает, когда я публикую URL-адрес httptrigger в моем браузере, но, конечно, я хочу, чтобы он отправлял данные обратно и влиял на текущую веб-страницу. с панелью поиска, добавив результаты под ней.

Буду очень признателен за любые указатели или подсказки, так как я не слишком опытен в шитье передней части вместе с этим.

Спасибо!

Answer 1

Так что я предлагаю немного разбить это и, возможно, создать несколько новых, более конкретных вопросов, основанных на этом разборе. Как это это довольно широко.

Поймите, что с точки зрения вашего (веб-интерфейса) веб-сайта ничто не отличается от нажатия и триггера Http функции Azure по сравнению с любой другой конечной точкой REST, и ответ на то, как подключить ее к внешнему интерфейсу, будет сильно различаться на основе любых фреймворков, которые вы можете использовать (иногда эти фреймворки также хотят, чтобы данные возвращались определенным образом).

Имея это в виду, я бы в первую очередь сосредоточился на том, чтобы убедиться, что ваша функция Azure правильно настроена, и получить ожидаемый результат JSON, прежде чем пытаться работать с пользовательским интерфейсом. Я могу дать вам несколько советов на этот счет:

• Вы упомянули "скрытие" вашей конечной точки. Сначала нужно определить, как вы хотите обезопасить его, поскольку вы не сможете его «спрятать», пока он находится в Интернете. Если это анонимный сайт, у вас будут ограниченные возможности. Если вы находитесь за входом в систему, у вас есть гораздо больше вариантов, но в большинстве лучших практик используется какой-то подход на основе токенов (Oauth, Custom и т. Д.). В функциях Azure действительно есть концепция функциональных клавиш, которые вы можете передавать, но на самом деле это относится только к неиспользуемым браузером API, где они могут храниться в секрете. Любой ключ, который вы добавляете в свой интерфейс, будет виден всем и, по сути, бесполезен (если только вы не хотите блокировать людей, случайно поражающих ваши конечные точки).
• Обновите параметры CORS в функциях Azure, чтобы убедиться, что домены, использующие ваш API, настроены, иначе вы будете заблокированы междоменными ограничениями в браузерах. Больше можно найти на https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors
• Создайте функцию с некоторыми фиктивными данными в нужном вам формате (вы можете вернуться назад и извлечь его из реального источника данных, как только он заработает). Пример фрагмента ниже с использованием пары жестко закодированных состояний.

module.exports = function(context, req) {
  if (req.query.filter) {
    // Do something with the filter parameter when loading results
    context.res = {
      body: '[{"name": "New York","abbreviation": "NY"},{"name": "Ohio","abbreviation": "OH"}]',
      headers: {
        'Content-Type': 'application/json'
      }
    };
  } else {
    context.res = {
      status: 400,
      body: "Please pass a filter on the query string"
    };
  }
  context.done();
};

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