На примере мы продемонстрируем, как использовать Auth0 для защиты API Node.js (Express), к которому обращается одностраничное приложение.
Раньше я использовал Passport для защиты своих API Node.js; не так много кода, но было немного сложно правильно настроить в первый раз. Этот подход также значительно усложняется, поскольку мы добавляем дополнительные требования к аутентификации, например, социальную интеграцию и т. Д.
Я также использовал Firebase для создания защищенных API; Хотя это очень просто, Firebase не подходит для многих проектов (недостаточно гибко)
Оказывается, Auth0 сочетает в себе гибкость API-интерфейсов Node.js с простотой его защиты.
Эта серия статей полностью соответствует документации Auth0 по Сценариям архитектуры› SPA + API ; просто на более простом и понятном примере.
Окончательное решение этой серии доступно для скачивания.
Предварительные требования
Чтобы продолжить эту серию, необходимо:
- Аккаунт Auth0 (бесплатно)
- Node.js; использовалась последняя версия LTS (8.12.0)
- Современный браузер; использовал Chrome
- Почтальон
Небезопасный API
Давайте начнем с создания нашего небезопасного (без аутентификации) API; начиная с Express пример Hello World.
В новой папке введите (и примите все значения по умолчанию):
npm init
Затем мы устанавливаем Express:
npm install express
Затем мы создаем небезопасный API.
index.js
Наблюдение:
- Я не могу жить без точки с запятой; поэтому я добавил их обратно (улыбается)
- Порт изменен с 3000 на 8080, поскольку мы будем использовать 3000 позже.
Запуск нашего API и тестирование с помощью Postman:
node index.js
Небезопасное приложение
Теперь, когда у нас есть API (предположим, что он все еще работает), давайте создадим приложение (одностраничное приложение), которое его использует. В другой папке создаем:
index.html
Наблюдения:
- Прошло какое-то время, но это старая школа ES5
- Поскольку мы все еще хотим поддерживать IE11, мы используем полифиллы ES6 (Babel polyfill) и fetch (whatwg-fetch).
Теперь мы можем запустить наше приложение, введя и открыв браузер по адресу http: // localhost: 3000
npx http-server -p 3000 -c-1
Наблюдения:
- Пакет Node.js, http-server, представляет собой простой статический веб-сервер; обслуживание нашего файла index.html
- Параметр -c гарантирует, что приложение никогда не кэшируется; полезно во время разработки
- Нажатие кнопки Получить приведет к возникновению ошибок JavaScript; виден в консоли
- Первая ошибка заключается в том, что API и приложение работают на разных портах (т.е. на разных портах); мы получаем ошибку совместное использование ресурсов между источниками (CORS)
- Вторая ошибка (замаскированная первой) заключается в том, что ответ, строка hello world, недействителен JSON.
Фиксированный небезопасный API
Сначала мы устраняем ошибку CORS. Из папки API вводим:
npm install cors
и обновить:
index.js
и чтобы исправить ответ, мы также обновляем:
index.js
С этими изменениями и перезапуском API мы видим, что нажатие кнопки Get выводит ожидаемый ответ на консоль.
Дальнейшие действия
Настроив небезопасный API и приложение, теперь мы можем перейти к их защите в Упрощенная аутентификация с Auth0: Часть 2.
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
