Таким образом, это может быть немного длинный ответ - но вы опубликовали довольно интересный и важный вопрос.
Как кто-то, кто проводит большую часть моего времени, записывая библиотеки безопасности в Node и Python, чтобы справиться с этой конкретной задачей, я подумал, что я бы прыгнул сюда.
Протокол, который вы хотите использовать для защиты вашего приложения React и API бэкэнд, является потоком предоставления пароля OAuth2. То, как это работает в теории, довольно просто.
В вашем приложении React вы собираете имя пользователя/пароль пользователя (это также может быть адрес электронной почты/пароль, если вы структурировали свое приложение).
Вы затем отправить запрос POST к вашему бэкэнду API, который выглядит примерно так:
POST api.myapp.com/oauth/token
grant_type=password&username=USERNAME&password=PASSWORD
Убедитесь, что вы используете тип application/x-www-form-urlencoded
содержимого при отправке сообщений на сервер.
После этого сервер выполнит этот запрос, запустит его через библиотеку OAuth2 и сгенерирует токен 2 и токена и обновления.
После того, как вы получили маркеры, сгенерированные на вашем API-интерфейсе на стороне сервера, вы затем сохраните эти токены в cookie, которые затем будут храниться в браузере пользователя.
С этого момента все должно быть автоматическим. Когда ваш сервер React делает запросы API на ваш сервер, браузер автоматически идентифицирует пользователя через этот файл cookie, содержащий эти два токена.
Вы должны будете использовать библиотеку OAuth2 для серверной стороны, так как это будет обрабатывать такие вещи, как:
- порождающих лексемы.
- Обмен токен обновления для нового токена доступа, когда он истекает.
- Идентификация пользователя на основе токенов.
- отменив лексемы, если они скомпрометированы, и т.д.
Там довольно много более к нему, но это основное, высокий уровень идея.
Как вы заметили: здесь не задействованы ключи API. Когда вы работаете с ненадежными средами (например, мобильными приложениями или клиентскими приложениями javascript), полностью небезопасен для хранения постоянных маркеров API - причина в том, что их можно легко извлечь из исходного кода или javascript.
Использование потока, упомянутого выше, вместо гораздо безопаснее, так как вы получаете много защиты:
- Нет постоянных учетных данных, хранящихся в небезопасном месте.
- В качестве идентификаторов используются недолговечные токены. Они вращаются со временем.
- Токены хранятся в файлах cookie, которые НЕ доступны для Javascript. Это означает меньший риск воздействия на сеть.
- Пароль только раз обменять на время сеанса - это означает, что менее чувствительная информация собирается через провод реже =)
В любом случае: надеюсь, что это помогает!
И, если вы ищете некоторые инструменты, любая библиотека oauth (серверная сторона) должна помочь вам в этом. Если вы ищете услугу, которая может это сделать для вас, вы можете проверить продукт, над которым я работаю (Stormpath). Это платная услуга, но для вас большая часть этой сложности.
есть вы раньше не использовали экспресс? вы можете связать несколько обработчиков так: 'app.get ('some/route/here', authHandlerHere, requestHandlerHere);' ваш обработчик auth может делать что-то вроде 'req.isAuthenticated()? next(): res.sendStatus (401); ' –
Это, по крайней мере, два вопроса и слишком широкий в любом случае. Прочитайте документы в Express, PassportJS для понимания маршрутизации и аутентификации, а также проверьте защиту подделок на основе межсайтового запроса. Тогда почтовый код здесь он не работает. – Paul