Autenticação e Autorização com JWT em React e ASP.NET Core Web API

Olá! Você já ouviu falar em JWT? É uma forma moderna de autorizar o acesso de usuários a recursos protegidos. O servidor gera um token especial após autenticar o usuário. O aplicativo React envia as credenciais de login, como nome de usuário e senha, que são verificadas pelo servidor. Se estiverem corretas, o usuário recebe um ‘bilhete VIP’ que pode ser usado em todo o aplicativo.

Neste exemplo, o servidor é a Web API e o cliente é o aplicativo React. Para configurar o JWT, precisamos registrar a configuração no arquivo Program.cs, como mostrado abaixo:

Usamos a biblioteca Microsoft.AspNetCore.Authentication.JwtBearer para adicionar a autenticação JWT. Também configuramos a política de CORS para permitir que o aplicativo React acesse a API.

Além disso, criamos uma função para gerar o token JWT, que é chamada quando o usuário efetua login com sucesso. Essa função gera um token com as credenciais do usuário e o envia de volta para o aplicativo React.

O aplicativo React pode armazenar o token em diferentes lugares, como no localStorage ou como um cookie. No entanto, é importante notar que o localStorage é vulnerável a ataques de XSS, por isso não é recomendado.

Quando o token é armazenado como um cookie, o aplicativo React não precisa enviar o token em cada solicitação. Já quando o token é armazenado no localStorage, o aplicativo React precisa enviar o token em cada solicitação, usando o cabeçalho Authorization.

Aqui está um exemplo de como o aplicativo React pode enviar o token em cada solicitação:

const res = await axios.get(‘https://localhost:7171/authentication/ControllerName/anotherapireq’, {
headers: {
Authorization: `Bearer ${tokenSifra}`
}
});

Já quando o token é armazenado como um cookie, o aplicativo React pode simplesmente configurar a opção withCredentials como true:

axios.defaults.withCredentials = true;

Isso permite que o aplicativo React acesse a API sem precisar enviar o token em cada solicitação.

Em resumo, o JWT é uma forma segura e eficiente de autorizar o acesso de usuários a recursos protegidos. Com a configuração certa, o aplicativo React pode acessar a API sem precisar se preocupar com a segurança.