Angular 13 Login and Registration example with JWT and Web Api – BezKoder

Бэкенд на основе токенов-аутентификации

В базовом проекте есть три основных файла:

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

{
    "name": "angular-restful-auth",
  "version": "0.0.1",
	"dependencies": {
		"express": "4.x",
		"body-parser": "~1.0.0",
		"morgan": "latest",
		"mongoose": "3.8.8",
		"jsonwebtoken": "0.4.0"
	},
	"engines": {
		"node": ">=0.10.0"
	}
}

package.json содержит зависимости для проекта: express для MVC, body-parser для парсинга параметров форм  в NodeJS, morgan для ведения логирования запросов, mongoose для нашей платформы ORM для подключения к MongoDB и jsonwebtoken для создания токенов JWT с использованием нашей модели пользователя.

Существует также атрибут, называемый engines, который сообщает, что этот проект выполняется с использованием версии NodeJS> = 0.10.0. Это полезно для Это полезно для Это полезно для PaaS-сервисов, таких как Heroku. Мы также рассмотрим эту тему в другом разделе.

Фтонтенд на основе токенов-аутентификации

Во фронтенд проекте вы увидите проект AngularJS. Здесь я остановлюсь только на основных разделах в проекте, потому что AngularJS не является чем-то, что можно охватить в рамках одного урока.

Вы можете клонировать проект из этого репозитория на GitHub. В этом проекте вы увидите следующую структуру папок:

ngStorage.js – это библиотека для AngularJS для управления локальными операциями хранения. Кроме того, есть основной лэйаут index.html и партиалы, которые расширяют основной макет в папке partials. controllers.js предназначен для определения действий нашего контроллера в интерфейсе. services.js предназначен для выполнения запросов на наши сервисы, о которых я упомянул в предыдущем проекте.

У нас есть файл инициализации приложения, называемый app.js, и в этом файле применяются конфигурации и импорт модулей. Наконец, client.js предназначен для обслуживания статических HTML-файлов (или просто index.html, в данном случае);

Аутентификация на основе токена

В аутентификации на основе токена, файлы cookie и сессии не будут использоваться. Токен будет использоваться для аутентификации пользователя при каждом запросе на сервер. Давайте перепроектируем первый сценарий с аутентификацией на основе токенов.

Он будет использовать следующий поток управления:

  1. Пользователь вводит имя пользователя и пароль в форме входа в систему и нажимает кнопку «Вход».
  2. После того, как запрос отправлен, происходит проверка пользователя на сервере, выполнив запрос к базе данных. Если запрос валидный, создается токен, используя информацию пользователя, полученную из базы данных, и затем возвращается эта информация в заголовок ответа, чтобы мы могли хранить браузере токен в локальном хранилище.
  3. Предоставляется токен с информацией в каждом заголовке запроса для доступа к ограниченным точкам входа в приложение.
  4. Если токен полученный из заголовка запроса, является допустимым, предоставляется доступ пользователю к указанной точке входа и ответ в JSON или XML.

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

Итак, что это за JWT?

Add bootstrap to angular project

Open index.html and import Bootstrap inside <head /> tag.

Angularjs app.js

Back to top

Angularjs authentication service

Back to top

Angularjs login controller

Back to top

Angularjs login view

Back to top

Angularjs project structure

I’ve based a lot of the project and code structure on recommendations from John Papa’s style guide with my own tweaks here and there, for example I’ve placed application config and routes within the app.js file rather than separate files because there isn’t much code in either section, these could be split out later if the sections grow.

I’m also trying out placing application services and content in folders prefixed with ‘app-‘ to prevent having a name clash if I need to add a section to my app called ‘services’ or ‘content’, it also has the added benefit of grouping all the ‘non-gui’ code together at the top of the folders.

Here’s what the project structure looks like:

Angularjs register controller

Back to top

Angularjs register view

Back to top

App module

Path: /src/app/app.module.ts

The app module defines the root module of the application along with metadata about the module. For more info about angular 9 modules check out this page on the official docs site.

This is where the fake backend provider is added to the application, to switch to a real backend simply remove the providers located below the comment // provider used to create fake backend.

App routing module

Path: /src/app/app-routing.module.ts

Routing for the Angular app is configured as an array of Routes, each component is mapped to a path so the Angular Router knows which component to display based on the URL in the browser address bar. The home route is secured by passing the AuthGuard to the canActivate property of the route.

Auth guard

Path: /src/app/_helpers/auth.guard.ts

Authentication service

Path: /src/app/_services/authentication.service.ts

Basic authentication interceptor

Path: /src/app/_helpers/basic-auth.interceptor.ts

Data service

This service provides methods to access public and protected resources.

Development environment config

Path: /src/environments/environment.ts

The development environment config contains variables required to run the application in development.

Further reading

Fullstack:– Angular Spring Boot: JWT Authentication & Authorization example– Angular Node.js Express: JWT Authentication & Authorization example

Global less/css styles

Path: /src/styles.less

The global styles file contains LESS/CSS styles that are applied globally throughout the application.

/* You can add global styles to this file, and also import other style files */
a { cursor: pointer }

Main (bootstrap) file

Path: /src/main.ts

The main file is the entry point used by angular to launch and bootstrap the application. 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

Npm package.json

Path: /package.json

Overview of angular 13 jwt authentication example

We will build an Angular 13 JWT Authentication & Authorization application with Web Api in that:

Here are the screenshots of our app:

– Signup/Registration Page:

– Form Validation:

If you want to know more details about Form Validation, please visit:Angular Form Validation example (Reactive Forms)

– Login Page:

– Profile Page:

Polyfills

Path: /src/polyfills.ts

Some features used by Angular 9 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 9 application works across all major browsers.

This file is generated by the Angular CLI when creating a new project with the ng new command, I’ve excluded the comments in the file for brevity.

import 'zone.js/dist/zone';

Production environment config

Path: /src/environments/environment.prod.ts

The production environment config contains variables required to run the application in production. This enables you to build the application with a different configuration for each different environment (e.g. production & development) without updating the app code.

When you build the application for production with the command ng build –prod, the output environment.ts is replaced with environment.prod.ts.

Project structure

With the explanation in Component Diagram above, you can easily understand this project structure.

Run the angular 13 jwt authentication project

You can run this App with command: ng serve.

Source code

You can find the complete source code for this tutorial on Github.

Technology

– Angular 13– RxJS 7– Angular CLI 13

Typescript tsconfig.json

Path: /tsconfig.json

Контроллер авторизации клиента (authcontroller)

Для формирования ответа клиенту я использовал способ описанный раннее в этой статье

В этом примере я сделал некоторые упрощения. Но, здесь, все так же используется функциональные интерфейсы из Java SE 8:

Приведу пример того, как я отвечаю на запрос клиента после его авторизации на сайте:

Контроллер обработки запросов клиента (protectedpingpongcontroller)

Рассмотри обработчик пользовательских запросов. Назовем его PingPongService. По условию, этот контроллер не должен быть доступен для не авторизованных клиентов.

Приведу пример создания ответа на запрос ping:

Не обошлось без spring security

Нужно отметить, что всё же пришлось подключить Spring Security для работы с CORS.

Для добавления необходимых заголовков был использован и немного переработан код с StackOverflow. Он находится в классах CorsFilterAdapter и SecurityConfig.

О чем эта статья

В этой статье, я расскажу как написать простую аутентификацию без помощи готовых решений для данной задачи. Она может быть полезна для новичков, которые хотят написать своё AAA (Authentication, Authorization, and Accounting). Репозиторий клиента на Angular и Репозиторий сервера на Spring.

В данной статье я сделаю выдержки кода серверной части на Spring.

Практический пример

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

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

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

Пример приложения

Вы увидите два приложения для демонстрации аутентификации на токенах:

  1. бэкенд на основе токенов-аутентификации
  2. фронтенд на основе токенов-аутентификации

В бекенд проекте будут реализованы сервисы, а результаты будут в формате JSON. В службы не возвращают представления. В фронтенд проекте будет проект AngularJS для интерфейса, а затем в фронтенд приложение будут добавленны службы AngularJS для выполнения запросов к бекенд службам.

Развертывание на heroku

Вы можете клонировать бекенд проект из этого репозитория на GitHub.

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

git remote add heroku <your_heroku_git_url>

Традиционные системы аутентификации

Прежде чем приступить к аутентификации на основе токенов, давайте сначала рассмотрим традиционную систему аутентификации.

  1. Пользователь вводит имя пользователя и пароль в форме входа в систему и нажимает кнопку «Вход».
  2. После того, как запрос отправлен, проверяется пользователь на бэкэнде, путем запроса в базу данных. Если запрос действителен, создается сессия, используя информацию пользователя, полученную из базы данных, а затем возвращается информация о сессии в заголовок ответа, чтобы сохранить идентификатор сессии в браузере.
  3. Необходимо предоставить информацию о сессии для доступа к ограниченным точкам входа в приложение.
  4. Если информация сессии валидна, предоставим пользователю доступ к указанным точкам входа и отдадим HTML-контент.

Все хорошо до этого момента. Веб-приложение работает хорошо, и оно может аутентифицировать пользователей, чтобы они могли получить доступ к ограниченным точкам входа; Однако, что происходит, если вы хотите разработать другой клиент, скажем для Android, для вашего приложения?

  1. Сессии и файлы cookie не имеют смысла для мобильных приложений. Вы не можете обмениваться сессиями или файлами cookie, созданными на стороне сервера, с мобильными клиентами.
  2. В текущем приложении, возвращается отрендеренный HTML. В мобильном клиенте вам нужно что-то вроде JSON или XML в качестве ответа.

В этом случае вам необходимо клиентское приложение.

Running the example with a real backend api

The Angular 9 basic authentication example app uses a fake backend by default so it can run in the browser without a real api, to switch to a real backend api you just have to remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file.

You can build your own backend api or start with one of the below options:

Fake backend provider

Path: /src/app/_helpers/fake-backend.ts

Заключение

Вы можете видеть, как все, что мы обсуждали в этом уроке, работает на практике, попробовав это демо.

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

Часть аутентификации/авторизации будет обрабатываться системой аутентификации на основе токенов в качестве дополнительного уровня перед вашими сервисами. Вы можете получать и использовать сервисы в любом клиенте, например, веб-браузеры, Android, iOS или в десктопных клиентах.

Похожее:  Тестируемый компонент Авторизация на е

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

➤