Лучший шаблон для вызова API AWS из Elm SPA?

Я разрабатываю приложение, очень внимательно следуя Пример Feldman Elm SPA с API, размещенным на AWS API Gateway. Моя проблема в следующем:

Мне нужно подписывать свои вызовы API с помощью Подпись API AWS версии 4. Это менее тривиальная задача, чем я изначально думал в Elm:

  • Не существует пакета подписи Elm AWS, поэтому я, естественно, посмотрел на библиотеки JS для использования через порты.
  • Вариант 1: Используйте AWS Amplify API, который выполняет всю работу => Но затем как обработать результат наиболее похожим на Вяза способом (в идеале с RemoteData).
  • Вариант 2: используйте стороннюю библиотеку JS, чтобы просто подписать запрос, созданный Elm Http.request, и отправить / обработать HTTP-запрос через Elm => Пока что я нашел только ошибочные реализации AWS Sigv4, я бы предпочел официальную реализацию в любом случае.
  • В двух случаях я застрял в общении с основным родителем / дочерней страницей: я могу отправить запрос 1) или 2) через порт от ребенка. Но как же тогда Ребенку получить ответ на свой запрос? Действительно, все ответы поступают в Elm через одну и ту же подписку на порт. Нужно ли помечать исходящие запросы, а затем отправлять ответ на основе этого тега? Но это будет выглядеть ужасно и плохо масштабироваться.

Обратите внимание, что это вопрос о шаблоне и архитектуре приложения. Это не основной вопрос о портах Elm (я уже успешно вызываю API из Elm).

Любые рекомендации или указатели приветствуются. Спасибо!

Дополнительная информация о моей настройке (после первого комментария)

Я слежу за Лучшие практики AWS (сценарий # 3 Доступ к ресурсам с помощью API Gateway и Lambda с пользовательским пулом)

  • Пользователями интерфейсного приложения управляют:
    • Пул пользователей Cognito (регистрация, вход и т. д.)
    • Cognito Identity Pool (сопоставление пользователей с ролью IAM для доступа к ресурсам AWS, включая API Gateway)
  • Бэкэнд бессерверный: API-шлюз + лямбда-функции
  • API-шлюз: интеграция с прокси-сервером Lambda + авторизация = IAM => для этого требуется подпись AWS
  • Я не использую ключи API, потому что:
    • Я не хочу предоставлять доступ к серверной части неаутентифицированным пользователям
    • Мне нужно идентифицировать пользователя по заголовкам запроса
    • Я не хочу полагаться на долгосрочные секреты для аутентификации на стороне клиента

У меня есть только опыт взаимодействия с API AWS через серверную службу для моего клиентского кода, что означает, что ключи AWS безопасны или серверная часть работает в среде, наследующей роли IAM и т. д. Не могли бы вы немного расширить свой вопрос, чтобы объяснить, как Найденные вами варианты JS безопасно взаимодействуют с AWS из кода, запущенного в браузере? Правильно ли я думаю, что служба API AWS Amplify, с которой вы связались, настраивает серверную службу от вашего имени для связи AWS?

ianmjones 16.10.2018 10:24

@ianmjones: Я добавил раздел Дополнительная информация о моей настройке

Mathieu François 16.10.2018 16:58

Я мало знаю о библиотеке AWS js, но ваша задача состоит в том, чтобы обернуть код порта тегами, чтобы получить опыт, аналогичный прямым HTTP-запросам. ~ Взгляните на github.com/simonh1000/elm-firebase-demo/blob/master/src/…, чтобы узнать, как я решил эту проблему

Simon H 16.10.2018 22:26

Thks @SimonH Я имел в виду нечто подобное («пометить» запросы, а затем отправить ответы на основе тега) ... Он выполняет свою работу, но я не нахожу его очень элегантным и масштабируемым: / Я думаю, что идеальный решение - в любом случае внедрить AWS Sig v4 в Elm ...

Mathieu François 17.10.2018 12:41
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
4
524
0

Другие вопросы по теме