Autenticação de Usuário

Com certeza, a gestão de usuários é uma das partes mais complexas e trabalhosas de uma aplicação. Afinal, são dados pessoais, interação direta do usuário e a passagem de confiança de que o processo é seguro.

O Django já está nos fornecendo a infraestrutura de back-end para essa árdua tarefa, então vamos em frente. Vamos aproveitar a autenticação nativa do Django, e nosso modelo User, que herda de AbstractUser, já oferece toda a estrutura necessária para isso.

Vamos usar o modal do Bootstrap. Assim, o usuário consegue entrar sem sair da página em que está.

Template Base

• Atualize blog/templates/_base.html para:

No <nav>, adicionamos as opções de login (não logado) e perfil (logado) usando {% if request.user.is_authenticated %}.

Observe que estamos utilizando os campos do nosso modelo personalizado:

• request.user.name: nome do usuário.

• request.user.image: imagem de perfil.

• request.user.is_authenticated: verifica se está autenticado.

Como o campo image é opcional, verificamos sua existência antes de acessar. Se não existe, usamos o "anonimous".

O modal com o formulário de login está logo antes de fechar </body>. Você pode personalizá-lo depois, se quiser.

Temos ainda, dentro de <main> a inclusão do sistema de mensagens, usando messages do Django e div.alert do Bootstrap. O div.alert pode ser fechado pelo usuário, clicando no X, mas também temos um JavaScript que fecha ele em 10 segundos (ajustáveis).

•  Adicione a classe .login-out em blog/static/css/style.css:

...

.login-out { border-top: 1px dotted grey; border-bottom: 1px dotted grey; }

.login-out img { width: 2rem; height: 2rem; }

.login-out a { color: rgb(177, 177, 177); }

.login-out a:hover { color: var(--bs-white); }

@media screen and (min-width: 768px) {

    ...

    .login-out { border: none; }

}

•  Crie blog/static/js/script.js com o seguinte conteúdo:

// Fecha os alerts após 10 segundos

document.querySelectorAll('.alert').forEach(alert => {

    setTimeout(() => { bootstrap.Alert.getOrCreateInstance(alert).close(); }, 10000);

});

view e rota de Login

Neste passo, vamos criar uma view que recebe as credenciais, verifica se estão corretas e autentica o usuário. O Django já oferece duas funções para isso:

• authenticate(): verifica usuário e senha.

• login(): registra o usuário na sessão atual.

Crie blog/views/login.py com o seguinte conteúdo:

# blog/views/login.py

from django.contrib.auth import authenticate, login as auth_login

from django.contrib import messages

from django.shortcuts import redirect

from django.urls import reverse

from django.utils.http import url_has_allowed_host_and_scheme

def login_view(request):

    if request.method != 'POST':

        return redirect('home')

    username = request.POST.get('username')

    password = request.POST.get('password')

    user = authenticate(

        request,

        username=username,

        password=password

    )

    next_url = request.POST.get('next') or reverse('home')

    if not url_has_allowed_host_and_scheme(

        next_url,

        allowed_hosts={request.get_host()},

        require_https=request.is_secure()

    ):

        next_url = reverse('home')

    if user is not None:

        auth_login(request, user)

        messages.success(

            request,

            'Login realizado com sucesso!'

        )

    else:

        messages.error(

            request,

            'Usuário ou senha inválidos!'

        )

    return redirect(next_url)

Entendendo o código:

1. Verificamos se o formulário foi enviado através de POST.

2. Recuperamos o usuário e a senha.

3. authenticate() verifica as credenciais no banco de dados.

4. Se estiverem corretas, login() autentica o usuário.

5. Direcionamos o usuário para a página inicial com a mensagem de sucesso.

6. Se estiverem incorretas, apresentamos uma mensagem de erro.

Uma observação importante: como nosso User herda de AbstractUser, o campo de autenticação continua sendo "username", a menos que tenhamos alterado explicitamente USERNAME_FIELD no core/settings.py.

•  No final de blog/views/__init__.py, importe a view:

from .login import login_view

•  Adicione a rota com linha abaixo no final de blog/urls.py:

path('login/', views.login_view, name='login'),    # Login do usuário

Teste! Teste muito!

Reinicie o servidor do aplicativo e faça login algumas vezes para testar.