Всем привет! Мы с вами поговорим о важном аспекте безопасности — подтверждении почты пользователей. Мы расскажем, как сделать это с использованием Spring Boot и Angular, двух мощных инструментов для создания современных веб-приложений.
Шаг за шагом разберемся, как настроить подтверждение почты и обеспечить безопасное взаимодействие между клиентской и серверной частями нашего проекта. Тогда начнем!
Архитектура веб-приложения
User service управляет данными пользователей, включая операции с базой данных. Он обрабатывает запросы на регистрацию и ее подтверждение. В данной архитектуре, Apache Kafka используется для отправки сообщений в Mail Service. Mail service создает и отправляет электронные сообщения подтверждения с помощью "SMTP". Клиент подтверждает электронную почту и завершается сам процесс регистрации.
Подготовка к разработке
Сперва, надо запустить брокер сообщений Apache Kafka. Ниже файл Docker Compose описывает конфигурацию для запуска и настройки среды Kafka и Zookeeper в контейнерах Docker. В результате, Zookeeper и Kafka будут доступны через порт 9092.
version: '3'
services:
zookeeper:
image: confluentinc/cp-zookeeper:7.0.1
networks:
- broker-kafka
environment:
ZOOKEEPER_CLIENT_PORT: 2181
ZOOKEEPER_TICK_TIME: 2000
kafka:
image: confluentinc/cp-kafka:7.0.1
networks:
- broker-kafka
depends_on:
- zookeeper
ports:
- "9092:9092"
environment:
KAFKA_BROKER_ID: 1
KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:29092,PLAINTEXT_HOST://localhost:9092
KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
networks:
broker-kafka:
driver: bridgeUser service
application.yml
server:
servlet:
context-path: /api/v1/user/
port: 3000
spring:
datasource:
url: jdbc:postgresql://localhost:5432/habr
username: postgres
password: postgres
driver-class-name: org.postgresql.Driver
jpa:
hibernate:
ddl-auto: update
jackson:
default-property-inclusion: non_default
kafka:
producer:
key-serializer: org.apache.kafka.common.serialization.StringSerializer
value-serializer: org.springframework.kafka.support.serializer.JsonSerializer
bootstrap-servers: localhost:9092
properties:
spring:
json:
add:
type:
headers: falseUserDTO,java
@Data
@NoArgsConstructor
public class UserDTO {
private String name;
private String surname;
private String email;
private LocalDateTime time = LocalDateTime.now();
public UserDTO(String name, String surname, String email) {
this.name = name;
this.surname = surname;
this.email = email;
}
}Base64Service
Представленный код представляет интерфейс Base64Service и его имплементацию, который используется для работы с кодированием и декодированием данных.
public interface Base64Service {
<T> T decode(String data, Class<T> to);
<T> String encode(T t);
}@Service
public class Base64ServiceImpl implements Base64Service {
private final ObjectMapper objectMapper;
public Base64ServiceImpl(
@Qualifier("customObjectMapper") ObjectMapper objectMapper
) {
this.objectMapper = objectMapper;
}
@Override
public <T> T decode(String data, Class<T> to) {
try {
byte[] decodedBytes = Base64.getDecoder().decode(data);
String jsonData = new String(decodedBytes);
return objectMapper.readValue(jsonData,to);
} catch (Exception e) {
throw new Base64OperationException("Failed to decode or convert the data", e);
}
}
@Override
public <T> String encode(T t) {
String jsonData = null;
try {
jsonData = objectMapper.writeValueAsString(t);
} catch (JsonProcessingException e) {
throw new Base64OperationException(e.getMessage());
}
return Base64.getEncoder().encodeToString(jsonData.getBytes());
}
}KafkaProducer
Kafka Producerопределяет метод для отправки сообщений с использованием KafkaTemplate.
public interface KafkaProducer {
<T> void produce(String topic, T t);
}@Component
@Slf4j
@RequiredArgsConstructor
public class DefaultKafkaProducer implements KafkaProducer {
private final KafkaTemplate<String, Object> kafkaTemplate;
@Override
public <T> void produce(String topic, T t) {
kafkaTemplate.send(
topic, t
).whenComplete((res, th) -> {
log.info("produced message: " + res.getProducerRecord() + " topic: " + res.getProducerRecord().topic());
});
}
}UserContoller
@RequiredArgsConstructor
@RestController
@CrossOrigin(origins = "*")
public class UserController {
private final UserService userService;
@PostMapping("register")
ResponseEntity<?> requestToRegistration(
@RequestBody UserDTO userDTO
) {
return ResponseEntity
.ok(userService.requestToRegistration(userDTO));
}
@PostMapping("confirm-registration")
ResponseEntity<?> confirm(
@RequestParam String data
) {
return ResponseEntity
.status(201)
.body(userService.confirmRegistration(data));
}
}UserService
public interface UserService {
StatusResponse requestToRegistration(UserDTO userDTO);
User confirmRegistration(String hash);
}@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {
private final UserRepository userRepository;
private final Base64Service base64;
private final KafkaProducer kafkaProducer;
public static final String EMAIL_TOPIC = "email_message";
@Override
public StatusResponse requestToRegistration(UserDTO userDTO) {
try {
var optionalUser = this.userRepository.findByEmail(userDTO.getEmail());
if (optionalUser.isPresent()) {
throw new EmailRegisteredException("email: %s registered yet".formatted(userDTO.getEmail()));
}
var dataToSend = base64.encode(userDTO);
kafkaProducer.produce(EMAIL_TOPIC, new KafkaEmailMessageDTO(userDTO.getEmail(), dataToSend));
return new StatusResponse(
true, null
);
} catch (Exception e) {
return new StatusResponse(
false,
e.getMessage()
);
}
}
@Override
public User confirmRegistration(String hash) {
var userDTO = base64.decode(hash, UserDTO.class);
if (userDTO.getTime().isBefore(LocalDateTime.now().minusDays(1))) {
throw new LinkExpiredException();
}
var user = new User(
userDTO.getName(),
userDTO.getSurname(),
userDTO.getEmail()
);
return this.userRepository.save(user);
}
}Если попытаться перейти по данной ссылке через 24 часа после её отправки, она не будет валидной.
Mail Service
Перед реализацией этого сервиса нужно будет получить credentials. Полный гайд.
application.yml
spring:
mail:
host: smtp.gmail.com
port: 587
username: ${SMTP_USERNAME}
password: ${SMTP_PASSWORD}
properties:
mail:
smtp:
auth: true
smtp.starttls.enable: true
kafka:
consumer:
bootstrap-servers: localhost:9092
key-deserializer: org.apache.kafka.common.serialization.StringDeserializer
value-deserializer: org.apache.kafka.common.serialization.ByteArrayDeserializer
properties:
spring:
json:
add:
type:
headers: false
server:
frontend-url: http://localhost:4200MailListener
@Component
@Slf4j
@RequiredArgsConstructor
public class MailListener {
private final MailService mailService;
@KafkaListener(
topics = "email_message", groupId = "some"
)
void listen(
KafkaMailMessage kafkaMailMessage
) {
log.info("email message: {} ", kafkaMailMessage);
mailService.send(kafkaMailMessage, MessageMode.EMAIL_VERIFICATION);
}
}MailService
public interface MailService {
void send(KafkaMailMessage kafkaMailMessage, MessageMode mode);
}@Component
@RequiredArgsConstructor
@Slf4j
public class MailServiceImpl implements MailService {
private final JavaMailSender mailSender;
@Value("${server.frontend-url}")
private String frontEndURL;
@Override
public void send(KafkaMailMessage kafkaMailMessage, MessageMode mode) {
var msg = new SimpleMailMessage();
if (mode == MessageMode.EMAIL_VERIFICATION) {
msg.setText(frontEndURL + "/verification?data=" + kafkaMailMessage.message());
} else {
msg.setText(kafkaMailMessage.message());
}
msg.setTo(kafkaMailMessage.email());
msg.setFrom("habrexample@gmail.com");
try {
mailSender.send(msg);
log.info("email send, msg: {}, mode: {}", kafkaMailMessage, mode);
} catch (Exception e) {
log.error("send mail error : {}", e.getMessage());
}
}
}Angular Client
Registration Component
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
registrationForm: FormGroup;
constructor(
private userService: UserService,
private formBuilder: FormBuilder
) {
this.registrationForm = this.formBuilder.group({
name: ['', Validators.required],
surname: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
register() {
let name = this.findInRegistrationForm('name')
let surname = this.findInRegistrationForm('surname')
let email = this.findInRegistrationForm('email')
let userDTO = {name, surname, email}
this.userService.requestToRegistration(userDTO)
.subscribe((res: StatusResponse) => {
alert(JSON.stringify(res))
}
)
}
private findInRegistrationForm(
controlName: string
) {
return this.registrationForm.get(controlName)?.value as string
}
}Если вы заметили, мы отправляем ссылку в таком шаблоне: http://localhost:4200/verification?data={dataFromKafkaMailMessage}
Verification Component
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {User} from "../../model/User";
import {UserService} from "../../service/user.service";
@Component({
selector: 'app-verification',
templateUrl: './verification.component.html',
styleUrls: ['./verification.component.css']
})
export class VerificationComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private userService: UserService
) {
}
user: User
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
let data = params['data'] || null;
if (data) {
this.userService.confirmRegistration(data)
.subscribe(res => {
this.user = res
console.log(res)
}, err => {
if (err) {
alert('invalid confirmation link');
}
})
} else {
alert('missing data')
}
})
}
}
Success означает успешное отправление сообщения в mail.
Выше скриншот, того как это выглядит в gmail. По клику мы автоматически переходим в verification component, после компонент извлекает данные с URL и отправляет через user service в бэкенд.
UserService
@Injectable({
providedIn: 'root'
})
export class UserService {
private http = inject(HttpClient)
private BASE_URL = 'http://localhost:3000/api/v1/user';
requestToRegistration(
userDTO: UserDTO
): Observable<any> {
return this.http
.post(`${this.BASE_URL}/register`, userDTO);
}
confirmRegistration(
data: string
): Observable<any> {
return this.http
.post(`${this.BASE_URL}/confirm-registration?data=` + data, {});
}
}Результат:
Заключение
Мы рассмотрели важный аспект безопасности - подтверждение почты пользователей в веб-приложениях. Таким образом, мы готовы обеспечить надежность и защиту данных пользователей.
Ссылка на Github.
