Работа с аутентификацией и авторизацией в Angular

Аутентификация - процесс установления подлинности пользователя с помощью логина и пароля.

Авторизация - предоставление пользователю доступа к определенным функциям и данным приложения.

Эти механизмы критически важны для безопасности веб-приложений. Без них любой сможет получить доступ к конфиденциальным данным реальных пользователей.

Например, в интернет-банке аутентификация необходима, чтобы убедиться, что в систему входит именно владелец счета, а не злоумышленник. А авторизация нужна, чтобы разрешить доступ к определенным операциям в зависимости от роли пользователя.

Технологии для аутентификации и авторизации

JSON Web Token (JWT) - один из самых популярных способов аутентификации пользователей в веб-приложениях и мобильных приложениях.

JWT представляет собой зашифрованный токен, который генерируется на сервере при аутентификации пользователя. В JWT кодируются данные о пользователе и его правах доступа.

Преимущества JWT:

• Компактный размер, легко передается в HTTP-заголовках
• Содержит зашифрованную информацию о пользователе
• Может содержать данные о сроке действия и правах доступа
• Подписан цифровой подписью, что гарантирует целостность данных
• Проверка подлинности JWT выполняется быстро и просто на сервере

Другие распространенные технологии:

• OAuth 2.0 используется для аутентификации через сторонние сервисы
• OpenID Connect расширяет OAuth 2.0 для более безопасной аутентификации
• Сессии и куки могут использоваться для аутентификации на основе сессий
• Базовая HTTP-аутентификация передает логин и пароль в заголовке Authorization

Как настроить аутентификацию в Angular

Для аутентификации пользователя в Angular приложении нужно:

1. Создать форму с полями для ввода логина и пароля, например:

<form (ngSubmit)="submit()">
  <input type="text" name="username" [(ngModel)]="username">
  <input type="password" name="password" [(ngModel)]="password">

  <button type="submit">Войти</button>
</form>

1. Получить данные из формы в компоненте:

submit() {
  const credentials = {
    username: this.username, 
    password: this.password
  };
}

1. Отправить запрос на сервер для аутентификации:

this.authService.login(credentials).subscribe(
  response => {
    // успешная аутентификация
  },
  error => {
    // ошибка аутентификации
  }
);

1. Обработать ответ сервера:

• При успехе извлечь JWT токен из ответа
• При ошибке показать сообщение пользователю

Обработка ответа от сервера

При успешной аутентификации сервер вернет ответ с JWT токеном, например:

{
  token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ..."
}

В компоненте Angular нужно извлечь токен и сохранить его, например в localStorage:

// успешный ответ
response => {
  const token = response.token;

  localStorage.setItem('token', token);

  this.router.navigate(['/']);
}

При ошибочной аутентификации сервер вернет ответ с кодом 401 Unauthorized или 400 Bad Request.

В этом случае нужно показать пользователю сообщение об ошибке:

// ошибочный ответ 
error => {
  if(error.status == 401) {
    this.error = 'Неверный логин или пароль';
  } else {
    this.error = 'Ошибка аутентификации'; 
  }
}

Работа с JWT токенами

После успешной аутентификации JWT токен нужно отправлять в заголовке Authorization всех запросов на сервер:

Authorization: Bearer <token>

Это позволяет серверу авторизовать запрос и выполнить его от имени аутентифицированного пользователя.

JWT содержит зашифрованные данные о пользователе, сроке действия токена и правах доступа. Эти данные можно декодировать на сервере для авторизации.

На клиенте токен хранится в безопасном месте, например в localStorage. При выходе из приложения токен нужно удалять.

Защита маршрутов

Чтобы разрешить доступ к страницам только аутентифицированным пользователям, в Angular можно использовать guard.

Например, определим AuthGuard:

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {

    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }

    return true;
  }

}

И подключим его для защиты маршрутов в роутинге:

const routes: Routes = [
  {
    path: 'account',
    component: AccountComponent,
    canActivate: [AuthGuard]
  }
];

Теперь переход на маршрут /account будет возможен только для авторизованных пользователей.

Итог

Подводя итог, отмечу что аутентификация и авторизация - обязательные механизмы для безопасности веб-приложений. В Angular для этого часто применяют JWT токены. Пользователь вводит логин и пароль, сервер генерирует JWT токен, который хранится на клиенте. Токен отправляется с каждым запросом для авторизации. Также в Angular можно настраивать защиту маршрутов с помощью guard, чтобы ограничить доступ к страницам приложения.