Pull to refresh

Туториал: Frontity — настройка авторизации для приватных эндпоинтов WordPress

Reading time 2 min
Views 1.6K

Предисловие

Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress).

Основная цель

Собрать в одном месте всю необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню (wp-json/wp/v2/menus).

Шаг 1 - установка/настройка плагина

Добавить Wordpress плагин - JWT Authentication for WP-API.

Внести настройки плагина в файлы .htaccess и wp-config.php согласно инструкции на сайте плагина.

Шаг 2 - настройка переменных окружения

Создать .env фал и наполнить его (например):

USERNAME='SOME USERNAME'
PASSWORD='SOME PASSWORD'

Добавить в package.json скрипт:

"dev": "env-cmd -f .env frontity dev"

Шаг 3 - получение токена

Добавить action получения токена в actions.theme.beforeSSR:

const beforeSSR = async ({ state }) => {
  const res = await fetch(
    `${state.source.api}jwt-auth/v1/token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: process.env.USERNAME,
        password: process.env.PASSWORD,
      }),
      redirect: 'follow',
    },
  );

  const body = await res.json();

  // сохраняем в любое удобное место (я записал по этому пути)
  state.theme.token = body.token;
};

Шаг 4 - получение данных

Создаем handler получения списка созданных меню:

export const menusHandler = {
  name: 'menus',
  priority: 10,
  pattern: 'menus',
  // Эта функция сработает, когда вы используете:
  // actions.source.fetch("menus");
  func: async ({ state, libraries }) => {
    const response = await fetch(`${state.source.api}wp/v2/menus`, {
      method: 'GET',
      headers: {
        // добавляем токен, полученный в предыдущем шаге, в заголовок авторизации
        Authorization: `Bearer ${state.theme.token}`,
      },
    });

    // Извлекаем данные из объекта ответа
    const data = await response.json();

    state.source.data.menu = {};

    // Это данные, возвращаемые при использовании:
    // state.source.get("menu");
    Object.assign(state.source.data.menu, {
      data,
      isMenu: true,
    });
  },
};

Добавляем handler по следующему пути libraries.source.handlers.

Заключение

В результате проделанной работы вы настроете механизм авторизации для приватных эндпоинтов WordPress.

Исходный код

Можно найти здесь

Only registered users can participate in poll. Log in, please.
Стоит ли публиковать подобные посты?
50% да 5
30% нет 3
20% хочу посмотреть результаты 2
10 users voted. 2 users abstained.
Tags:
Hubs:
0
Comments 7
Comments Comments 7

Articles