Publicado em 11 de Setembro de 2020 às 02:00

Última atualização em 2 de Novembro de 2020 às 00:41

Tutorial Django - Cadastro e login de usu√°rios apenas com e-mail e senha

python, django
Acompanhe esse conte√ļdo pelo YouTube

E aí, beleza?

Hoje você vai aprender a fazer o cadastro e login de usuários no seu projeto Django apenas com e-mail e senha. Para isso, vamos utilizar o pacote django-allauth.

Se quiser ir direto para o código no GitHub, clique aqui.

Setup inicial

Ao iniciar um projeto é sempre uma boa ideia criar um ambiente virtual. No Windows eu inicio meus projetos dessa forma:

# Cria um ambiente virtual
python -m venv venv
# Ativa o ambiente virtual
.\venv\Scripts\activate
# Instala o Django no ambiente virtual
pip install django
# Inicia o projeto (repare o ponto no fim do comando)
django-admin startproject tutorialcadastro .
# Esse ponto é usado para criar o projeto na pasta atual

Recomendo também já iniciar um repositório Git e criar o arquivo .gitignore.

Para garantir que est√° tudo funcionando como esperado, execute esse comando para iniciar o servidor de desenvolvimento local:

python manage.py runserver

E acesse o endereço http://127.0.0.1:8000/. Você deverá ver uma tela indicando que a instalação foi um sucesso.

N√£o vamos rodar o comando migrate agora.

django-allauth

O django-allauth é um pacote com vários apps responsáveis por tarefas como registro e autenticação de usuários.

Usar o django-allauth √© muito f√°cil. Basta seguir essas instru√ß√Ķes. Vou resumi-las aqui:

Instalação:

pip install django-allauth

No settings.py:

TEMPLATES = [
    {
        # ...
        'OPTIONS': {
            'context_processors': [
                # Sem isso o allauth n√£o funciona!
                'django.template.context_processors.request',
            ],
        },
    },
]

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

INSTALLED_APPS = [
    # outros apps
    # ...
    # apps obrigatórios
    'django.contrib.auth',
    'django.contrib.messages',
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
]

SITE_ID = 1

E no arquivo urls.py do projeto:

urlpatterns = [
    path('accounts/', include('allauth.urls')),
]

E no terminal:

python manage.py migrate

Pronto. Agora você pode acessar alguns links para ver que está funcionando:

http://127.0.0.1:8000/accounts/signup/

http://127.0.0.1:8000/accounts/login/

http://127.0.0.1:8000/accounts/logout/

Perceba que depois de realizar um login ou um cadastro, você é redirecionado para a página http://127.0.0.1:8000/accounts/profile/, que não existe. Arrumar isso é tranquilo: no arquivo settings.py adicione essa linha:

LOGIN_REDIRECT_URL = "/"

Pronto, agora você será redirecionado para a página inicial em vez da /accounts/profile/.

Aproveite e adicione mais uma linha no settings.py:

EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"

Quando um usuário se cadastrar ele deverá receber um e-mail de confirmação. Com o código acima, o e-mail será exibido no terminal. Para desenvolvimento local isso é ótimo, em produção é necessário fazer a configuração de envio de e-mail.

Farei um tutorial sobre isso também.

Templates

Agora que temos o cadastro, o login e o logout funcionando, vamos cuidar do visual do nosso site.

No terminal, vamos criar um novo app chamado pages:

python manage.py startapp pages

E no settings.py, adicione o app na lista de apps instalados:

INSTALLED_APPS = [
    # outros apps
    # ...
    "pages.apps.PagesConfig",
]

E ainda no settings.py, modifique a vari√°vel TEMPLATES:

TEMPLATES = [
    {
        # ... outras configura√ß√Ķes
        "DIRS": [BASE_DIR / "templates"],
        # ... outras configura√ß√Ķes
    },
]

Agora, na raiz do projeto, crie uma pasta chamada templates.

Dentro dessa pasta, crie o arquivo base.html e copie esse código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand navbar-dark bg-dark mb-3">
            <div class="container">
                <a class="navbar-brand" href="{% url 'pages:home' %}">Loja Python</a>
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_logout' %}">Sair</a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_login' %}">Entrar</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_signup' %}">Cadastro</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>
    </header>

    <main class="container">
        {% block content %}
        {% endblock %}
    </main>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Dentro da pasta templates crie também o arquivo home.html:

{% extends 'base.html' %}

{% block title %}Loja Python{% endblock %}

{% block content %}
    Ol√°!
{% endblock %}

Agora, no arquivo urls.py do projeto, adicione mais um item a urlpatterns:

urlpatterns = [
    # ...
    path("", include("pages.urls", namespace="pages")),
]

E dentro da pasta pages, crie um arquivo urls.py e copie esse código:

from django.urls import path

from . import views


app_name = "pages"

urlpatterns = [
    path("", views.HomePageView.as_view(), name="home"),
]

E dentro do arquivo views.py:

from django.views.generic import TemplateView


class HomePageView(TemplateView):
    template_name = "home.html"

Pronto! Agora temos um site!

Mas d√° pra melhorar:

Vamos instalar o app django-crispy-forms:

pip install django-crispy-forms

Adicionar à lista de apps instalados (no settings.py):

INSTALLED_APPS = [
    # ...
    "crispy_forms",
]

E adicionar essa linha também no settings.py:

CRISPY_TEMPLATE_PACK = "bootstrap4"

Agora, dentro da pasta templates, crie a pasta account (no singular!) e dentro dessa pasta crie o arquivo login.html e copie esse código:

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block title %}Entrar{% endblock %}

{% block content %}
    <h2>Entrar</h2>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button class="btn btn-success" type="submit">Entrar</button>
    </form>
{% endblock %}

Verifique o formul√°rio de login e veja que agora ele est√° muito mais bonito.

Outra coisa que você pode fazer é alterar a variável LANGUAGE_CODE no arquivo settings.py:

LANGUAGE_CODE = "pt-br"

Com isso o formulário é traduzido para o português.

Outra configuração interessante de ser feita no settings.py:

ACCOUNT_SESSION_REMEMBER = True

Isso remove a op√ß√£o “Lembrar-me” do login.

Agora vamos criar o arquivo logout.html dentro da pasta account:

{% extends 'base.html' %}

{% block title %}Sair{% endblock %}

{% block content %}
    <h2>Sair</h2>
    <p>Você tem certeza que deseja sair?</p>
    <form method="post" action="{% url 'account_logout' %}">
        {% csrf_token %}
        <button class="btn btn-danger" type="submit">Sair</button>
    </form>
{% endblock %}

E por √ļltimo, o arquivo signup.html (tamb√©m dentro de templates/account):

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block title %}Cadastro{% endblock %}

{% block content %}
    <h2>Cadastro</h2>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button class="btn btn-success" type="submit">Cadastrar</button>
    </form>
{% endblock %}

Agora vamos colocar mais cinco linhas no arquivo settings.py:

# Só precisa digitar a senha uma vez
ACCOUNT_SIGNUP_PASSWORD_ENTER_TWICE = False
# N√£o precisa de username
ACCOUNT_USERNAME_REQUIRED = False
# Método de autenticação: email
ACCOUNT_AUTHENTICATION_METHOD = "email"
# Email obrigatório
ACCOUNT_EMAIL_REQUIRED = True
# Email √ļnico
ACCOUNT_UNIQUE_EMAIL = True

Pronto!

Agora temos nosso cadastro e login de usu√°rios apenas com e-mail e senha.

Crie um usuário através do formulário de signup e perceba que:

  1. Você recebe o e-mail de confirmação no terminal;

  2. O campo username é populado automaticamente pelo django-allauth. Mesmo não sendo usado, esse campo é preenchido.

√Č isso.

Qualquer d√ļvida, sugest√£o ou corre√ß√£o √© s√≥ deixar um coment√°rio.

Em breve postarei um artigo ensinando a fazer login com redes sociais.

E também postarei um artigo ensinando a fazer cadastro de diferentes perfis de usuário. Por exemplo, em um site de vagas de emprego, o usuário pode se cadastrar como empregador ou como candidato.

Um abraço, falou!


Compartilhe

Gostou deste artigo? Compartilhe para esse conte√ļdo chegar a mais pessoas!

N√£o perca nenhum conte√ļdo!

Se você quiser receber um e-mail sempre que eu postar um artigo novo, basta se inscrever aqui:


Artigos que podem ser do seu interesse

11 de Setembro de 2020

Tutorial Django - Criando um modelo de usu√°rio personalizado (Custom User Model)

Aprenda a criar um modelo de usu√°rio personalizado nos seus projetos Django.

python, django

15 de Novembro de 2020

Python + VS Code + Black: Como formatar o seu código Python no VS Code automaticamente usando Black

Um passo a passo ensinando a configurar o VS Code para formatar código Python automaticamente.

python

20 de Maio de 2020

Fun√ß√Ķes com valores padr√£o mut√°veis: Qual √© o problema?

Atrav√©s de um exemplo simples entendemos por que n√£o devemos definir fun√ß√Ķes com valores padr√£o mut√°veis.

python

20 de Abril de 2020

Resenha - Think Python (Pense em Python)

Meus coment√°rios sobre esse livro.

python, resenhas