Дописываю API

Потратив 2 ночи (и немного терпения), я наконец завершил реализацию всех эндпоинтов! В какой-то момент это очень наскучило, но я все равно продолжал писать их.

Как выглядят эндпоинты в этой статье - Создаю онлайн-сервис для чтения книг. День 4. Обработка первого запроса.

Архитектура папок теперь выглядит вот так:

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

Разработка дизайна 🎨

Но как делать веб без дизайна? Верно, никак! 🤔
Зайдя в Figma и подсмотрев интерфейс GitHub'а , я накидал ориентировочный дизайн страниц регистрации и входа.

Верстка 🖥️

Верстка — это немного рутинное занятие, но результат того стоит!
Могу сказать, что получилось почти идентично дизайну.

Frontend с Vue.js

Почему Vue.js ? Просто такие условия 🙃. Если бы выбор был за мной, я бы взял React .

Добавлю в решение новый проект Веб-приложение ASP.NET Core (MVC) . Стандартный шаблон создаст такие папки:

• wwwroot
  Это корневая папка для статических файлов, которые будут доступны напрямую через браузер.

• Controllers
  Папка содержит классы контроллеров, которые управляют маршрутизацией.

• Models
  Папка содержит модели данных, которые представляют сущности приложения.

• Views
  Папка содержит представления — файлы, которые отвечают за отображение HTML-страниц пользователю.

В папку wwwroot/lib добавлю клиентскую библиотеку Vue.js .

Создам новый контроллер для страниц аутентификации.

В папке Views есть еще 2 папки:

• Home

• Shared

В папку Shared добавлю новый шаблон страницы Razor с названием _LoginLayout для страниц аутентификации.

Создам папку Auth, добавив туда пустую страницу Razor с названием _ViewStart. Этот файл указывает какой шаблон будут использовать страницы.

@{

Layout = "_LoginLayout";

}

Теперь закину в wwwroot/css свой файл со стилем, который наверстал.

Логика фронтенда 🧠

Начну со страницы входа, добавив HTML-разметку, которую наверстал.

Снизу файла напишу блок скриптов:

@Section scripts {

<script src="~/lib/vue/vue.global.js"></script>

<script>

...тут будут все скрипты...

</script>

}

Пример запроса на бэкенд:

На скрине показан метод ассинхронный метод login(), в нем реализована отправка запроса на эндпоинт /auth/login, если запрос проходит успешно, я записываю Access-токен в локальное хранилище и перенаправляю пользователя на страницу по адресу /home. В противном случае я показываю ошибку пользователю.

В ответе сервера я получаю Access и Refresh токены.

• Access-токен записываю в локальное хранилище.

• Refresh-токен храню в Http-only куках для большей безопасности 🛡️.

Пример записи куки на сервере:

Здесь я записал новую куку с под названием refreshToken, и значением, равным Refresh-токену.

Вообще для чего мне Refresh-токен, если есть Access? Все очень просто, у Access-токена срок жизни 15 минут, поэтому через 15 минут его необходимо будет сгенерировать заново. Для этого как раз и понадобится Refresh-токен.

По истечению Access-токена я буду посылать на сервер запрос со своими куками. Сервер прочитает Refresh-токен из них и, если он валидный, вернет новый Access-токен.

Как это реализовано со стороны сервера:

Со стороны клиента:

При загрузке страницы сразу же срабатывает метод checkRefreshToken, далее отправляется запрос на /auth/refresh. Если сервер возвращает положительный ответ, записываю новый Access в локальное хранилище и продолжаю пользоваться сервисом.

Тестирование 🧪

Запущу бэкенд и фронтенд.

После запуска я сразу попадаю на страницу входа.

Войду в аккаунт, который я создвал еще на начальных этапах.

Если сейчас обратиться по адресу /home, меня перекинет назад на страницу авторизации.

Попробую сначала ввести неправильный пароль.

Теперь введу правильный пароль. Все сработало! Я попал на домашнюю страницу.

Зайдя в консоль разработчика, можно посмотреть локальное хранилище и найти там Access-токен.

Теперь я могу пользоваться сервисом, отправляя запросы на эндпоинты, передавая данный токен в заголовке.

• id: уникальный идентификатор

• code: сгенерированный код

• email: почта, на которую пришел код

• expires_in: дата и время истечения кода

🖥️ Создам интерфейс и реализую его

Опишу методы работы с этой базой данных через интерфейс.

🔐 Интерфейс сервиса аутентификации

В интерфейс добавлю логику для отправки кода на почту.

Отправляться будет шестизначный код. Генерация кода выглядит так:

📧 Настройка почты

Теперь зайду в mail.ru и создам новую почту. Перейду в настройки безопасности и выберу пункт "Пароли для внешних приложений" . Создам новое внешнее приложение и получу для него пароль. Запишу его себе куда-нибудь.

📦 Подключаю библиотеку System.Net.Mail

Для отправки сообщений необходимо подключить библиотеку System.Net.Mail. Она поможет настроить SMTP-клиент и отправить письмо.

🎯 Генерация кода и запись в БД

1. Параметры SMTP-сервера

Эти переменные необходимы для настройки подключения к SMTP-серверу, который будет отправлять письмо.

smtpServer

• Описание : Адрес SMTP-сервера, который используется для отправки писем.

• Пример :

  • Для Gmail: smtp.gmail.com

  • Для Mail.ru: smtp.mail.ru

  • Для Yandex: smtp.yandex.ru

smtpPort

• Описание : Порт, используемый для подключения к SMTP-серверу. Обычно это:

  • 587 (для TLS/STARTTLS)

  • 465 (для SSL)

• Пример : 587 для Gmail или Mail.ru.

smtpUsername

• Описание : Логин (обычно email), который используется для аутентификации на SMTP-сервере.

smtpPassword

• Описание : Пароль для аутентификации на SMTP-сервере. В моем случае я вписал пароль, который недавно получил от mail.ru.

2. Параметры объекта MailMessage

Класс MailMessage используется для создания самого письма. Вот его основные параметры:

IsBodyHtml = true

• Описание : Этот флаг указывает, что тело письма содержит HTML-разметку. Если установлено значение false, то тело письма будет обрабатываться как простой текст.

From

• Описание : Указывает адрес отправителя. Это поле должно быть заполнено объектом типа MailAddress.

To

• Описание : Указывает адрес получателя. Можно добавить несколько адресов с помощью метода message.To.Add().

Subject

• Описание : Тема письма, которая отображается в заголовке сообщения.

Body

• Описание : Тело письма. Если IsBodyHtml = true, то здесь можно использовать HTML-разметку. В противном случае это будет простой текст. В моем случае я сверстал небольшую форму, записал её в отдельную переменную класса Constaints.

🌐 Добавляю эндпоинт

Создам эндпоинт, который будет отвечать за отправку сообщения. Например:

🧪 Тестирую!

Запускаю сервер и тестирую функционал:

• Ввожу адрес электронной почты, на который хочу отправить сообщение. 📝

• Нажимаю "Выполнить". ✅

И... Письмо пришло! 🎉

🗄️ Проверяю БД

Убеждаюсь, что запись добавлена в базу данных. Все отлично работает! ✅

🎉 Итог

Теперь пользователи могут подтвердить свою почту с помощью шестизначного кода.