Что такое поток аутентификации?

Поток аутентификации — это процесс подтверждения личности пользователя и управления его доступом к определенным частям приложения. Когда вы работаете с веб-приложением (например, с сайтом социальной сети), это включает в себя проверку того, является ли пользователь тем, кем он себя называет (вход в систему), а затем предоставление ему доступа к определенным функциям.

Как это работает в React?

В React, когда вы хотите выполнить аутентификацию пользователей, вы обычно взаимодействуете с внутренним сервером, который выполняет тяжелую работу. Вот как это обычно работает:

1. Конечные точки регистрации и входа

• Конечная точка регистрации: Когда новый пользователь регистрируется, он отправляет свои данные (например, имя пользователя, адрес электронной почты, пароль) на сервер. Затем сервер создает для них учетную запись.
• Конечная точка входа: Когда существующий пользователь входит в систему, он отправляет свое имя пользователя и пароль на сервер. Сервер проверяет правильность этих данных.

2. Токены: токен доступа и токен обновления

После успешного входа в систему сервер отправляет обратно два важных токена:

• Токен доступа:

  • Это своего рода краткосрочный пропуск, который позволяет пользователю получить доступ к определенным функциям приложения. Обычно он имеет короткий срок действия (в данном случае 5 минут).
  • Каждый раз, когда пользователь делает запрос (например, просматривает свой профиль или публикует что-либо), этот токен отправляется на сервер, чтобы подтвердить, что он вошел в систему.

• Обновить токен:

  • Это похоже на резервный проход, который используется после истечения срока действия токена доступа. Это более долговечно.
  • После истечения срока действия токена доступа (через 5 минут) вместо повторного входа пользователя в систему приложение может использовать токен обновления для получения нового токена доступа.

3. Хранение токенов в браузере

После того как пользователь войдет в систему и получит эти токены, приложению необходимо сохранить их где-нибудь на устройстве пользователя. Здесь на помощь приходит localStorage:

• localStorage: Это функция веб-браузеров, которая позволяет хранить данные (например, токены) в браузере пользователя.
  • Метод setItem(): Используется для хранения данных. Например, вы сохраняете токен доступа и токен обновления с помощью чего-то вроде localStorage.setItem('accessToken', tokenValue).
  • Метод getItem(): Используется для получения сохраненных данных. Например, вы получаете сохраненный токен доступа с помощью чего-то вроде localStorage.getItem('accessToken').

4. Выполнение запросов с использованием токена доступа

Каждый раз, когда пользователь делает что-то, требующее взаимодействия с сервером (например, публикует статус или просматривает свои сообщения), приложение отправляет запрос на сервер с токеном доступа, прикрепленным в заголовке авторизации. Это сообщает серверу, что пользователь вошел в систему и ему разрешено выполнять действие.

5. Обработка токенов с истекшим сроком действия

• Срок действия токена доступа: Если сервер отвечает ошибкой 401, это означает, что срок действия токена доступа истек. Затем приложение будет использовать токен обновления для запроса нового токена доступа.

• Срок действия токена обновления: Если срок действия токена обновления также истек (что может произойти через долгое время), сервер снова ответит ошибкой 401. На этом этапе приложение перенаправит пользователя на страницу входа, попросив его снова войти в систему, чтобы получить новые токены.

6. Повторная отправка неудачного запроса

Как только приложение получит новый токен доступа с помощью токена обновления, оно повторно отправит исходный запрос, который не был выполнен из-за истекшего срока действия токена. Таким образом, пользователь не будет отвлекаться.

Краткое содержание

• Процесс аутентификации: Так приложение подтверждает, кто вы, и предоставляет вам доступ к функциям.
• Токен доступа: Кратковременный ключ для доступа к ресурсам в приложении. Срок действия истекает быстро.
• Обновить токен: Долгосрочный резервный ключ для получения нового токена доступа по истечении срока действия старого.
• localStorage: Способ хранения этих токенов браузером на устройстве пользователя.
• Заголовок авторизации: Здесь токен доступа включается в запросы к серверу.
• Ошибка 401: Сигнал о том, что срок действия токена истек и что приложению необходимо выполнить действие (либо обновить токен, либо попросить пользователя снова войти в систему).

Этот процесс гарантирует, что пользователь сможет оставаться в системе и безопасно использовать приложение без необходимости постоянно повторно вводить свои учетные данные.