Аутентификация с использованием API-ключей при доступе к API через fetch

Разработка
1

Привет!

Я создаю headless-сайт на WordPress для журнала, у которого есть сообщество на Discourse, и комментарии должны быть интегрированы на страницы статей. Я нашел документацию по API и был очень рад, так как встраивание через iframe не совсем подходило — на сайте будет темный и светлый режим, поэтому мне нужно, чтобы шаблон комментариев наследовал CSS-переменные от корневого элемента.

Однако при попытке обратиться к API напрямую (используя fetch по адресу https://discourseurl.com/t/{id}.json) я постоянно упираюсь в лимит запросов. Поэтому решил попробовать добавить API-ключ и аутентифицироваться с его помощью.

Я использую этот код:

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{user api key from Discourse admin}',
        },
      })

Но получаю эту ошибку, независимо от того, какой ключ я использую (даже пробуя с ключом администратора):

error_type: "invalid_access"
errors: Array [ "Du har inte behörighet att visa den efterfrågade resursen." ]

Примерный перевод: «У вас нет доступа к запрошенному ресурсу».

Не упускаю ли я что-то в том, как работают API-ключи? Какой подход рекомендуется для обращения к этим конечным точкам API без превышения лимита запросов?

2

Посмотрите раздел «Аутентификация», который находится в верхней части страницы https://docs.discourse.org/. Там приведён пример настройки учётных данных API в заголовке запроса. Вам необходимо использовать Api-Key и Api-Username в заголовке.

3

Спасибо! Не могу представить, как я упустил часть с авторизацией, перечитывал документацию снова и снова :joy:

В любом случае, вроде делаю какой-то прогресс, но теперь в консоли браузера возникает такая ошибка:
(Reason: missing token ‘api-key’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Не уверен, что может быть причиной, в форуме тоже ничего не нашёл. Не упустил ли я что-то? Странно, что в коде я указываю заголовок как ‘Api-Key’. Есть какие-то идеи? :slight_smile:

4

Похоже, вы создаёте JavaScript-приложение и выполняете запросы к API прямо из браузера?

Рекомендуемый подход — выполнять вызовы API к Discourse на стороне сервера, а ваше JavaScript-приложение должно общаться с вашим сервером так же, как оно общается с WordPress. Таким образом вы избежите любых проблем с CORS.

5

Ах, отлично! Это заставило меня изучить код WP Discourse и понять, что мне осталось всего один шаг до того, чтобы WP предоставил нужный мне API-эндпоинт (вывод комментариев Discourse через API). Мне нужно будет лишь немного его доработать. Это замечательно, большое спасибо :slight_smile:

Просто из любопытства, почему не рекомендуется работать напрямую с API Discourse на стороне клиента? У меня есть идеи по расширению проекта в будущем, если появится бюджет (например, с функционалом входа), и я хотел бы, чтобы он взаимодействовал с API Discourse. Мне придется маршрутизировать всё через WordPress? :slight_smile: