Аутентификация Angular с JWT

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

Полный код можно найти в нашем репозитории GitHub. Приложение, которое мы будем создавать, будет выглядеть так:

Концепция веб-токенов JSON

JSON Web Token (JWT) - это в основном объект, представленный тремя строками, которые используются для передачи пользовательской информации. Три строки, разделенные точками:

заголовок
полезная нагрузка
подпись

Когда пользователь входит на любую веб-страницу со своим именем пользователя и паролем, сервер аутентификации обычно создает и отправляет обратно JWT. Затем этот JWT передается вместе с последующими вызовами API на сервер. JWT остается в силе, пока не истечет срок его действия или пользователь не выйдет из приложения.

Этот процесс может быть проиллюстрирован на диаграмме ниже.

Файлы cookie и локальное хранилище

Мы будем использовать локальное хранилище для хранения токенов. Локальное хранилище - это средство, с помощью которого данные хранятся локально и могут быть удалены только через JavaScript или путем очистки кэша в браузере. Данные, хранящиеся в локальном хранилище, могут сохраняться очень долго. С другой стороны, файлы cookie - это сообщения, которые отправляются с сервера в браузер и имеют ограниченное хранилище.

Создание Express сервера

Мы начнем с создания внутреннего сервера, который будет иметь следующие конечные точки:

POST <webservice>/login
POST <webservice>/profile

Давайте начнем с создания каталога для приложения Express, а затем запустим команду npm init, чтобы установить необходимые файлы для проекта.

mkdir server
cd server
npm init

Затем создайте файл server.js и установите модули: express, jsonwebtoken, cors и bodyParser.

touch server.js
npm install express jsonwebtoken cors bodyParser –save

Теперь откройте server.js и начните с импорта модулей.

// server.js
const cors = require('cors');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const express = require('express');

Затем создайте приложение Express и определите секретный ключ, который будет использоваться для кодирования и декодирования данных пользователя.

//CREATE EXPRESS APP
const app = express();
app.use(cors());
app.use(bodyParser.json());

// DECLARE JWT-secret
const JWT_Secret = 'your_secret_key';

Мы не будем использовать базу данных для этого примера. Тем не менее, концепции были бы похожи, если бы вы писали правильный сервер с поддержкой базы данных.

В нашем примере мы просто будем использовать переменную для определения тестового пользователя, как показано ниже.

var testUser = { email: 'kelvin@gmai.com', password: '1234'};

Последний шаг - создание маршрутов для аутентификации пользователя.

app.post('/api/authenticate', (req, res) => {

  if (req.body) {
    var user = req.body;
    console.log(user)

    if (testUser.email===req.body.email && testUser.password === req.body.password) {
      var token = jwt.sign(user, JWT_Secret);
      res.status(200).send({
        signed_user: user,
        token: token
      });
    } else {
      res.status(403).send({
        errorMessage: 'Authorisation required!'
      });
    }
  } else {
    res.status(403).send({
      errorMessage: 'Please provide email and password'
    });
  }

});

Давайте разберем код для маршрута выше.

Сначала мы проверяем, есть ли какие-либо данные в теле запроса. Если данные не найдены, мы предлагаем пользователю ввести некоторые данные. В случае, когда пользователь предоставил правильные данные, мы сравниваем их с данными из testUser и, если они совпадают, мы используем идентификатор пользователя, чтобы сгенерировать уникальный токен и отправить ответ пользователю.

Наконец, мы создаем конечную точку для запуска приложения.

app.listen(5000, () => console.log('Server started on port 5000'));

Наш бэкэнд теперь готов, и вы можете протестировать его с помощью Postman или CURL и посмотреть, какие данные будут возвращены пользователю.

Создайте приложение Angular

Наше приложение Angular будет содержать следующие страницы:

Главная страница - эта страница будет содержать ссылки на страницы входа и профиля.
Логин - на этой странице пользователь введет свой адрес электронной почты и пароль, которые будут отправлены на сервер для аутентификации. Если учетные данные верны, то будет возвращен токен JWT, и пользователь будет перенаправлен на страницу профиля.
Профиль - это защищенная страница, доступ к которой может получить только пользователь с действительным токеном.

Создайте приложение Angular и создайте компоненты Login и Profile, как показано ниже:

ng new angular6jwt
cd angular6jwt
ng g component Login
ng g component Profile

Затем добавьте код для домашней страницы в app.component.html.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<ul>
  <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>  </li>
  <li><a class="nav-link" routerLink="profile" routerLinkActive="active">Profile</a>  </li>
  <li style="float:right" > <a class="nav-link"  style="float:right" routerLink="login" routerLinkActive="active">Login</a> </li>
  <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#">Logout</a></li>
</ul>
<div class="text-center">
  <p>
    Angular 6 Authentication with JWT Tutorial
  </p>
</div>
<router-outlet></router-outlet>

Затем импортируйте RouterModule и определите маршруты в app.module.ts.

import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'profile', component: ProfileComponent }
      
    
]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Создаем страницу входа

Страница входа будет содержать два поля ввода для адреса электронной почты и пароля, а также кнопку отправки, как показано ниже:

<h3>Login</h3>
<div>
  <div class="spacer">
    <label for="Email">Email</label>
    <input type="text" placeholder="Email" [(ngModel)]="email">
  </div>
  <div class="spacer">
    <label for="password">Password</label>
    <input type="password" placeholder="password" [(ngModel)]="password" class="form-control"/>
  </div>
  <div class="spacer">
    <button  type="submit" (click)="Login()">Login</button>
  </div>
</div>

Создаем страницу профиля

Страница профиля будет просто сообщением, как показано ниже:

<p>
  If you can see this page, you are logged in!
</p>

Авторизация с JWT в Angular

Мы начнем с создания сервиса Auth, который облегчит проверку ввода пользователя и взаимодействия с сервером.

// Create authentication service named Auth
ng g service Auth

Это создает два файла, но в основном нас заинтересует файл auth.service.ts, в который мы напишем весь код, взаимодействующий с сервером. Мы начнем с определения REST API и токена, как показано ниже:

export class AuthService {

  api = 'https://localhost:3000/api';
  token;

}

Далее мы напишем код, который выполняет POST-запрос к серверу с учетными данными пользователя. Здесь мы делаем запрос к API - если он успешен, мы сохраняем токен в localStorage и перенаправляем пользователя на страницу профиля.

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  uri = 'http://localhost:5000/api';
  token;

  constructor(private http: HttpClient,private router: Router) { }
  login(email: string, password: string) {
    this.http.post(this.uri + '/authenticate', {email: email,password: password})
    .subscribe((resp: any) => {
    
      this.router.navigate(['profile']);
      localStorage.setItem('auth_token', resp.token);
     
      })
      );
      
    }

}

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

logout() {
    localStorage.removeItem('token');
  }

  public get logIn(): boolean {
    return (localStorage.getItem('token') !== null);
  }

logout - очищает токен от локального хранилища
logIn - возвращает логическое свойство, которое определяет, аутентифицирован ли пользователь

Затем мы обновляем свойство logIn на домашней странице, как показано.

<ul>
  <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>  </li>
  <li><a class="nav-link" routerLink="profile" routerLinkActive="active" *ngIf="authService.logIn">Profile</a>  </li>
  <li style="float:right" > <a class="nav-link"  style="float:right" routerLink="login" routerLinkActive="active" *ngIf="!authService.logIn">Login</a> </li>
  <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#" *ngIf="authService.logIn">Logout</a>  </li>
</ul>

Ответ на пользовательские события

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

Мы напишем функцию, которая будет прослушивать события щелчка со страницы входа в систему, а затем передавать значения в AuthService для аутентификации пользователя. Обновите файл login.component.ts, чтобы он выглядел следующим образом:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  email = '';
  password = '';
  
  constructor(private authService: AuthService) {
    
  }
  Login() {
  console.log("you are logging in")
  this.authService.login(this.email, this.password)
  
  }

  ngOnInit() { }
}

Теперь, если вы запустите ng serve и перейдете по адресу http://localhost:4200, вы можете протестировать свое приложение.

ng serve

Нажмите на ссылку для входа и введите учетные данные пользователя. Помните, действительные учетные данные определены в приложении Express. Теперь, когда вы нажмете кнопку входа в систему, вы будете перенаправлены на страницу профиля.

Заключение

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

Обратите внимание, что это руководство было написано для Angular 6, но те же концепции должны работать с Angular 2 или Angular 4.