Создание веб-продукта - это уже не просто навык; это необходимость для всего, что требует общественного внимания.
Спустя десятилетие цифровой революции мы, наконец, наблюдаем тектонический сдвиг в поведении пользователей по отношению к потребительским товарам, большинство из которых являются либо веб-приложениями, либо мобильными приложениями.
Веб / мобильное приложение обычно является кульминацией совместной работы множества компонентов. Одна из самых упускаемых из виду, но важная часть - это аутентификация пользователя. Поверьте, когда я это говорю, 70% пользователей покидают платформу, если их не устраивает процесс подключения.
Это ДОЛЖНО быть гладким и простым.
Существует бесчисленное множество руководств, демонстрирующих код того, как работает аутентификация в angular, некоторые даже делают все возможное, чтобы объяснить, как работает код, но единственная проблема с такими кодами (для новичков) - это цветочные слова и жаргон, которые они используют, которые могут быть довольно проблематичным для тех, кто только начинает работать в домене.
Ниже приводится подробное, но простое руководство по работе аутентификации в angular. Его код можно найти здесь. Следующий код хорошо прокомментирован, чтобы вы понимали, что на самом деле происходит!
Это руководство не является пошаговым руководством по аутентификации с помощью angular. Интернет уже кишит их тысячами, но чего не хватает, так это подробного объяснения работы этих шагов.
Рекомендуется клонировать проект здесь и пройти через это руководство, ссылаясь на код. Это даст вам ясность, к которой вы так стремитесь ...
Прежде чем мы начнем с раздела «кодирование», нам необходимо понять базовую концепцию аутентификации и веб-токенов JSON (или JWT, как это называют миллениалы).
Аутентификация - это средство проверки личности пользователя, что означает, разрешен ли пользователю доступ к приложению или нет. Два наиболее распространенных способа аутентификации пользователя - это либо вход в социальную сеть (вход в Google + / Facebook), либо зарегистрированное имя пользователя (может быть адрес электронной почты) и пароль. Мы будем использовать последний, чтобы понять внутреннюю работу аутентификации в angular.
Рекомендуется прочитать: Подробное руководство по CSS-анимации и переходам
Кодовая база этого учебника работает со следующими компонентами:
- Веб-токен JSON
- Клиент + localStorage
- Серверная часть + защищенные конечные точки API + БД
- Служба аутентификации
- Служба пользователя
- JWT-перехватчик
- Auth Guard
- Перехватчик ошибок
Поняв 8 элементов, упомянутых выше, вы не только узнаете о работе JWT и аутентификации, но также сможете оценить процесс, лежащий в основе этого.
- Веб-токены JSON (JWT)
Веб-токены JSON, если они определены абстрактно, представляют собой объект JSON, который помогает в безопасном обмене информацией между двумя или более сторонами. С точки зрения непрофессионала, это тип токена проверки от сервера аутентификации, который указывает, что имя пользователя и пароль, предоставленные пользователем во время входа в систему, являются ли они правильными или нет, и, таким образом, пользователь «аутентифицирован ».
Подробнее о JWT и его тонкостях здесь
2. Клиент + localStorage
Здесь клиент - это пользователь, работающий в браузере (Google Chrome / Firefox / Opera / Safari). Для каждого зарегистрированного пользователя существует набор имени пользователя и пароля, который хранится в базе данных на сервере.
Двумя наиболее важными типами свойств хранения любого браузера являются localStorage и sessionStorage; они позволяют хранить пары ключ-значение в браузере.
- localStorage
Это вариант постоянного хранилища, когда вы не хотите, чтобы пользователь выходил из системы при обновлении или закрытии вкладки браузера. localStorage по умолчанию хранит данные без даты истечения срока действия. Это свойство только для чтения. - sessionStorage
Как видно из названия, он хранит данные только для определенного сеанса. Он менее постоянен, и пользовательские данные теряются при закрытии вкладки браузера или обновлении.
В нашем случае мы будем использовать localStorage.
ПРИМЕЧАНИЕ. LocalStorage можно найти в консоли разработчика (F12 в Chrome) на вкладке «Приложение».
3. Бэкэнд + защищенные конечные точки API + БД
Бэкэнд для этого урока - это поддельный бэкэнд, так как мы просто хотим понять, как все работает в интерфейсной части. Но этот бэкэнд работает как любой реальный бэкэнд, в котором есть API, которые предоставляют нам тело ответа и статус ответа. fake-backend.ts также содержит тестовые данные (БД) для тестового пользователя. Введенные пользователем учетные данные будут проверены на соответствие этим тестовым данным.
Тестовые данные:
Поддельный бэкэнд будет служить автономным сервером с отложенным ответом, чтобы он мог имитировать настоящий бэкэнд. Он будет выполнять две основные задачи:
- Он проверит учетные данные пользователя, поступающие из «Службы аутентификации» во время входа в систему.
- Он также будет работать как поддельная база данных, сохраняющая данные пользователя (попадание в безопасную конечную точку API). Пользователь может запросить сведения о пользователе только в том случае, если запросы содержат действительный токен JWT в заголовке авторизации запроса.
В нашем текущем сервере есть два API:
- Чтобы проверить учетные данные - / users / authenticate. Если учетные данные пользователя совпадают с сохраненными данными тестового пользователя, серверная часть отправляет тело ответа с токеном JWT.
fake-backend.ts
- Чтобы вернуть сведения о пользователе - / users
. Это конечная точка БЕЗОПАСНОГО API. Под безопасностью это означает, что для доступа к этой конечной точке API в запросе должен быть действующий токен JWT. Этот токен находится в заголовке запроса со свойством «Authorization: Bearer JWT-TOKEN». Сначала он проверяет действительный токен JWT, а затем отвечает соответствующим образом.
fake-backend.ts
4. Служба аутентификации
Служба аутентификации используется для ВХОДА и ВЫХОДА из приложения. Он обладает учетными данными (имя пользователя и пароль) от клиента (пользователя / браузера) до серверной части и проверяет ответ, если у него есть токен JWT.
Если в ответе серверной части есть токен JWT, значит, аутентификация прошла успешно. При успешной аутентификации данные пользователя сохраняются в локальном хранилище вместе с токеном JWT.
5. Служба пользователя
Пользовательская служба - это служба, предназначенная для обращения ко 2-му API (конечная точка защищенного API) для получения данных для всех пользователей, присутствующих в базе данных. В настоящее время присутствует только один пользователь - тестовый пользователь. Доступ к этой пользовательской службе осуществляется через домашний компонент, как только пользователь входит в систему и инициализируется домашний компонент.
- home.component.ts
Служба получит ответ от бэкэнда, только если бэкэнд получит запрос вместе с действительным токеном JWT.
- user.service.ts
Токен не отправляется при запросе клиента. Вот когда на помощь приходит JWT Interceptor!
6. JWT Interceptor
Перехватчик JWT перехватывает входящие запросы от приложения / пользователя и добавляет токен JWT в заголовок авторизации запроса, только если пользователь вошел в систему (потому что тогда токен JWT будет присутствовать в localStorage у клиента конец).
Перехватчик JWT работает очень умно, не изменяя исходный запрос, сделанный пользовательской службой, а клонируя запрос и добавляя токен JWT в заголовок запроса, а затем перенаправляя клонированный запрос на бэкэнд. Значение токена извлекается из клиентского localStorage. Если пользователь вышел из системы, в localStorage не будет токена JWT, и, таким образом, пользователь не сможет получить доступ к защищенной конечной точке API.
jwt.interceptor.ts
7. Auth Guard
Auth Guard работает как umm - a Guard!
Защита аутентификации гарантирует, что только аутентифицированные пользователи получают доступ к определенным маршрутам в приложении. Защита аутентификации реализует интерфейс под названием CanActivate, с помощью которого он возвращает либо true, либо false.
Верно, если пользователь вошел в систему, т. е. localStorage содержит данные о текущих пользователях вместе с действительным токеном JWT.
False Если пользователь вышел из системы, то есть в localStorage отсутствуют данные текущего пользователя вместе с действительным токеном JWT, и, в свою очередь, он перенаправит пользователя на страницу входа. .
auth.guard.ts
В этом конкретном примере мы используем наличие сведений о текущем пользователе как способ предоставить права на доступ к одному конкретному маршруту, то есть «/» (корень) или HomeComponent. Могут быть и другие условия, например аутентификация на основе ролей. Затем права доступа к конкретным маршрутам будут распределяться в зависимости от роли конкретного пользователя. Пользователь сможет получить доступ к маршруту администратора (скажем), только если он является администратором.
Хотя он разработан в отдельном файле auth.guard.ts, но реализован в маршрутизации приложения с помощью параметра canActivate.
app.routing.ts
8. Перехватчик ошибок
Перехватчик ошибок HTTP работает с вызывающей службой и API
Он перехватывает ответы от API и проверяет коды состояния (если были ошибки).
Ошибка Статус
- 200: Успешно
- 401: Несанкционированный ответ - пользователь автоматически выйдет из системы.
Все другие ошибки являются ПОВТОРНЫМИ, чтобы их перехватила вызывающая служба, чтобы пользовательская служба / компонент на стороне клиента мог отобразить предупреждение.
error.interceptor.ts
Заключение
Особенность angular (или любого другого фреймворка) в том, что чем больше вы работаете с ним, тем больше вы откроете для себя то, чего не знали. Отсутствие знаний об основах окажется помехой и, в свою очередь, замедлит процесс разработки. Я стараюсь сделать один из компонентов процесса разработки веб-приложения, то есть аутентификацию - ЛЕГКО!
Первоначально опубликовано в Блоге EngineerBabu Адитьей Тяги.
