Рубрики
Без рубрики

Показать внешние аватары пользователей, используя пользовательские маршруты Strapi в качестве прокси

При использовании STRAPI вы можете запустить по сценарию, где вам нужно вернуть данные, не сохраненные в Shrapi … Теги от STRAPI, JavaScript, Node, WebDev.

При использовании STRAPI вы можете работать по сценарию, где вам нужно вернуть данные, не сохраненные в базе данных Strapi. Предположим, вам нужно получить аватар пользователя в социальных сетях, акционеров или другие данные, доступные из третьей стороны API. Мы будем использовать STRAPI в качестве прокси, чтобы запросить данные и вернуть информацию в клиентское приложение, избегая любых потенциальных проблем CORS.

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

Когда регистрация Пользователь на другом одном из моих сайтов, Picke.rs, я хотел дать пользователю возможность использовать аватар, который они зарегистрировали с другой службой в качестве их аватара Picke.rs, не требуя пользователя найти и загружать изображение с их устройства Отказ Мы можем использовать свой адрес электронной почты и Unavatar Служба, чтобы попытаться найти социальное изображение для пользователя.

Почему обычай?

Возможно, вы заметили руководство по страпам о Получение внешних данных . Если ваши данные не должны быть в режиме реального времени или сохранены в базе данных Strapi, это будет лучший маршрут для следующего.

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

Создание маршрута

Создайте файл API/Avatar/Config/marross.json В вашем проекте Strapi. Вам нужно будет создать Аватар и config папки внутри API папка.

{
    "routes": [
      {
        "method": "GET",
        "path": "/avatars/:id",
        "handler": "avatar.find",
        "config": {
          "policies": []
        }
      }
    ]
}

Этот маршрут определяет метод HTTP, путь, и какой метод будет обработать запрос.

Путь имеет динамический ID определено, которое будет передано в метод обработки через CTX Отказ Мы будем использовать ID Установите через URL, отправленный пользователем, чтобы запросить API.

Обрабатывать запрос

Создайте файл API/аватар/контроллеры/Avatar.js В вашем проекте Strapi. Это где мы создадим Найти метод.

const axios = require("axios");

module.exports = {
  /**
   * Retrieve a user avatar.
   *
   * @return {String}
   */

  async find(ctx) {
    if (ctx.params.id.length < 4 || !ctx.params.id.includes("@") || !ctx.params.id.includes(".")) {
      return ctx.badRequest("Invalid email address");
    }

    const { data } = await axios.get(`https://unavatar.now.sh/${ctx.params.id}?json`);
    if (data.url.includes("fallback")) {
      return ctx.send({ url: null });
    }

    return ctx.send(data);
  },
};

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

Затем мы используем Axios (вы можете использовать любой метод или библиотеку по вашему выбору, чтобы сделать запрос API), чтобы сделать запрос на Unavatar Это удобное маленькое обслуживание, чтобы запросить аватары по нескольким социальным медиатациям.

Для этого случая, если Unavatar не сможет найти аватар социальных медиа для прилагаемого адреса электронной почты, мы возвращаем NULL вместо Foodback Image. Если вы предпочитаете использовать Unavatar Perfect Fanceback, то верните возвращенные данные без проверки последующей связи.

CTX Параметр вводится STRAPI, и именно то, что содержит информацию о запросе, таком как идентификатор маршрута, который мы определены в Маршруты.json файл

Обновление ролей и разрешений

Когда маршрут и метод были созданы, а сервер Strapi перезапускается Strapi, добавит новый Найти Метод имеющихся разрешений в разделе ролей и разрешений администратора. Мы захочем включить это для всех необходимых доступных ролей. Если бы только не существенные пользователи позвоните этому методу, а затем только включить его для публичный Если другие роли будут вызывать этот метод, то включите его для этих ролей.

Вызов от клиента

Теперь на нашем клиенте мы можем позвонить по маршруту /avatars/me@example.com В приложении VUE метод будет выглядеть нечто похожее на следующее.

methods: {    
    async downloadAvatar () {
      if (this.login.length < 4) {
        this.avatarLink = null
        this.useAvatar = false
        return
      }
      const { data } = await this.$axios.get(`/avatars/${this.login}`)
      this.avatarLink = data.url
      if (data.url !== null) {
        this.useAvatar = true
      }
    }
}

Оригинал: “https://dev.to/drewtownchi/display-external-user-avatars-using-strapi-s-custom-routes-as-a-proxy-2m58”