DEV Community

Francisco Júnior
Francisco Júnior

Posted on • Edited on

5

Criação de Telas de Login em Django: Um Guia Completo

O desenvolvimento de uma tela de login é uma parte fundamental de muitos aplicativos da web, pois permite aos usuários autenticar-se com segurança e acessar recursos personalizados. Django, um popular framework Python para desenvolvimento web, oferece uma maneira robusta e flexível de criar telas de login de forma rápida e eficaz. Neste artigo, exploraremos o processo de criação de telas de login em Django, cobrindo desde a configuração inicial até a personalização avançada.

1. Preparação do Ambiente

Antes de começar a criar a tela de login em Django, é essencial configurar um ambiente de desenvolvimento apropriado. Certifique-se de que você tenha o Python e o Django instalados em seu sistema. Você pode verificar a versão do Django usando o seguinte comando:

django-admin --version
Enter fullscreen mode Exit fullscreen mode

Se o Django ainda não estiver instalado, você pode instalá-lo utilizando o pip:

pip install django
Enter fullscreen mode Exit fullscreen mode

Depois de instalar o Django, você pode criar um novo projeto ou usar um projeto existente. Se você está criando um novo projeto, execute o seguinte comando:

django-admin startproject myproject
Enter fullscreen mode Exit fullscreen mode

Substitua myproject pelo nome do seu projeto.

2. Configuração de Autenticação

O Django já fornece funcionalidades de autenticação prontas para uso. Você precisa garantir que o aplicativo de autenticação esteja configurado corretamente no seu projeto. Para fazer isso, siga estas etapas:

2.1. Adicione o aplicativo de autenticação ao INSTALLED_APPS

Edite o arquivo settings.py do seu projeto e verifique se o aplicativo django.contrib.auth está listado em INSTALLED_APPS. Deve ficar assim:

INSTALLED_APPS = [
    # ...
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # ...
]
Enter fullscreen mode Exit fullscreen mode

2.2. Configurar as configurações de autenticação

Ainda no arquivo settings.py, verifique e configure as configurações de autenticação para o seu aplicativo. Você pode definir as configurações de login URL e redirecionamento após o login. Aqui está um exemplo:

LOGIN_URL = 'login'  # Define a URL para a tela de login
LOGIN_REDIRECT_URL = 'home'  # Define a URL para redirecionar após o login bem-sucedido
Enter fullscreen mode Exit fullscreen mode

3. Criando a Tela de Login

Agora que você configurou o ambiente e as configurações de autenticação, é hora de criar a tela de login propriamente dita.

3.1. Crie um formulário de login

Você pode criar um formulário de login personalizado ou usar o formulário de autenticação padrão fornecido pelo Django. Se você optar por criar um formulário personalizado, crie um arquivo forms.py em seu aplicativo e defina um formulário de login. Por exemplo:

from django import forms
from django.contrib.auth.forms import AuthenticationForm

class CustomLoginForm(AuthenticationForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control'}))
Enter fullscreen mode Exit fullscreen mode

3.2. Crie a View de Login

Agora, é necessário criar uma view que renderize o formulário de login. No seu aplicativo, crie um arquivo views.py e defina uma view de login. Você pode usar a view genérica LoginView fornecida pelo Django:

from django.contrib.auth.views import LoginView

class CustomLoginView(LoginView):
    template_name = 'login.html'  # O nome do modelo que será usado para renderizar a tela de login
    authentication_form = CustomLoginForm  # Use o formulário personalizado
Enter fullscreen mode Exit fullscreen mode

3.3. Crie o Template HTML para a Tela de Login

Agora, crie o template HTML que renderizará a tela de login. Crie um arquivo login.html na pasta de templates do seu aplicativo e insira o seguinte código:

{% extends "base.html" %}

{% block content %}
  <h2>Login</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Login</button>
  </form>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

3.4. Configure URLs

Por fim, você precisa configurar as URLs para a tela de login. No arquivo urls.py do seu aplicativo, adicione as seguintes linhas:

from django.urls import path
from .views import CustomLoginView

urlpatterns = [
    # ...
    path('login/', CustomLoginView.as_view(), name='login'),
    # ...
]
Enter fullscreen mode Exit fullscreen mode

Agora, quando você acessar a URL /login, será direcionado para a tela de login personalizada que você criou.

4. Personalização Avançada

Além das etapas básicas descritas acima, você pode personalizar ainda mais a tela de login, adicionando recursos como autenticação social, recuperação de senha, entre outros. O Django oferece muitas opções para estender e personalizar o sistema de autenticação de acordo com as necessidades do seu projeto.

Conclusão

A criação de telas de login em Django é uma tarefa essencial para muitos aplicativos da web. Com as configurações e recursos fornecidos pelo Django, você pode criar telas de login de forma rápida e segura. Este guia abordou as etapas fundamentais, desde a configuração do ambiente até a personalização avançada. Com este conhecimento, você está pronto para criar telas de login eficazes em seus projetos Django.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay