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

В этом посте я хочу показать вам, ребята, как я копирую токен, созданный с помощью Spring Boot, прямо в буфер обмена.

Я понимаю, что, возможно, это не самый эффективный способ сделать это, но я нахожусь в процессе обучения, и это было немного сложно. Итак, я решил сделать этот пост, чтобы поделиться знаниями и немного больше изучить, потому что писать о том, что мы изучаем, также требует изучения.

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

В моем классе LoginController, который представляет собой @RestController с @RequestMapping(value=”/login”), я создал @ PostMapping, который получает @RequestBody с моей сущностью User.

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

Это выглядит так:

@PostMapping("/token")
public ResponseEntity<String> getToken(@RequestBody User authRequest) throws Exception {
    String username = authRequest.getUsername();
    String password = authRequest.getPassword();

    boolean credentialsValid = verifyCredentials(username, password);

    if (credentialsValid) {
        String token = jwtTokenUtil.generateToken(username);
        return ResponseEntity.ok(token);
    } else {
        throw new Exception("Invalid username or password");
    }
}

После этого функция выборки в JavaScript выполняет остальную часть работы. Я определяю имя пользователя и пароль в моем script.js и создаю функцию copyToken, используя navigator.clipboard, чтобы помочь мне.

Это выглядит так:

function copyToken() {
fetch('http://localhost:8080/login/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: iUsername.value,
        password: iPassword.value
    })
})
.then((res) => {
    if (res.ok) {
        return res.text(); // Alterado para res.text() para obter o token como texto
    } else {
        throw new Error('Erro na requisição');
    }
})
.then((token) => {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(token)
        .then(function() {
            alert("Token copiado para área de transferência.");
        })
        .catch(function(error) {
            console.error("Erro ao copiar o token: ", error);
        });
    } else {
        console.error('Problema na API clipboard.');
    }
})
.catch((error) => {
    console.log('Error: ' + error);
});
};

И это был окончательный результат:

Надеюсь, этот пост будет кому-то полезен, и надеюсь, вам понравилось!

Это все на сегодня. Пока-пока!