Como Autenticar Aplicativos Django usando django-allauth

Tutoriais
Django

O autor selecionou o Fundo Livre e de Código Aberto para receber uma doação como parte do programa Escreva para Doações.

Introdução

A autenticação é o processo de verificar usuários autênticos ou registrados no sistema, o que ajuda a proteger suas aplicações de software contra acessos não autorizados. Existem várias técnicas usadas para autenticar usuários, como verificação de nome de usuário/senha, biometria humana ou senhas de imagem. No framework web Django, o tratamento de autenticação pode ser codificado diretamente ou você pode usar módulos prontos como django-allauth, django-rest-social-auth, django-registration e outros.

django-allauth é um conjunto integrado de aplicações Django que lidam com autenticação de contas, registro, gerenciamento e autenticação de contas de terceiros (sociais). É um dos módulos de autenticação mais populares devido à sua capacidade de lidar tanto com logins locais quanto sociais. Você pode adicionar suporte para provedores adicionais de OAuth/OAuth2 com a base de código comum do aplicativo. Não apenas ele lida com a lógica de autenticação, mas também é personalizável para atender às suas necessidades de design.

Neste tutorial, você irá construir uma aplicação Django que utiliza o django-allauth para autenticar usando uma conta DigitalOcean.

Pré-requisitos

Para este tutorial, você vai precisar de:

Passo 1 — Configurando o Ambiente de Desenvolvimento

Neste passo, você irá configurar o ambiente de desenvolvimento para sua aplicação Django. Você irá ativar um ambiente virtual e instalar as dependências do projeto.

Primeiro, crie um novo diretório e acesse-o. Este tutorial utiliza o Django-Allauth:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

Assegure-se de utilizar esta pasta para o restante deste tutorial.

Em seguida, crie um ambiente virtual usando o Pipenv, uma ferramenta de empacotamento para Python. Primeiro, instale o pipenv: 

  1. pip3 install pipenv

Em seguida, ative o ambiente virtual: 

pipenv shell

Em seguida, instale as dependências que você usará para o desenvolvimento (django e django-allauth) usando o pipenv: 

  1. pipenv install django

  2. pipenv install django-allauth

Você agora terminou de configurar seu ambiente de desenvolvimento. Em seguida, você começará a desenvolver sua aplicação Django.

Passo 2 — Criando sua Aplicação Django

Neste passo, você criará uma aplicação Django de uma única página simples para usar com a autenticação django-allauth.

O primeiro passo para criar sua aplicação é criar o aplicativo do projeto, chamado Autenticação neste tutorial: 

  1. django-admin startproject Authentication

Em seguida, acesse o caminho do diretório do projeto e crie um aplicativo para sua aplicação; este tutorial usa principal: 

  1. cd Authentication

  2. python manage.py startapp main

No diretório do projeto, use o nano ou seu editor de texto favorito para abrir o settings.py para edição: 

  1. nano Authentication/settings.py

Para a lista de aplicativos instalados, adicione o aplicativo principal conforme mostrado:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main',  # novo aplicativo 
]

Como estamos renderizando uma única página para o site, não é necessário fazer alterações no arquivo models.py.

Em seguida, abra o arquivo urls.py do projeto para edição e faça as seguintes alterações:

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

O arquivo urls.py é usado para o roteamento de aplicativos Django.

Em seguida, no aplicativo main, crie outro arquivo urls.py e adicione as seguintes linhas:

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

Este novo arquivo urls.py é usado para rotear os arquivos do aplicativo main.

Em seguida, abra o arquivo views.py e adicione as seguintes linhas:

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

O arquivo views.py é usado para renderizar a página home.html no diretório de modelos.

Em seguida, na pasta raiz do projeto (Authentication), crie um novo diretório chamado templates. No diretório templates, crie uma página HTML chamada home.html e adicione as seguintes linhas:

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- CSS compilado e minificado -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- JavaScript compilado e minificado -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

Esta página de demonstração inclui texto de exemplo renderizado em cartões e uma área de login para usar com autenticação em um passo posterior.

A página da web é estilizada usando o Materialize CDN, um framework de front-end de entrega de conteúdo gratuito e de código aberto baseado no Material Design. Ele ajuda a carregar bibliotecas de estilos Materialize CSS, JavaScript e jQuery para criar projetos bonitos e responsivos. Certifique-se de ter uma conexão com a internet para que o CDN carregue os arquivos de estilos.

A partir do caminho do diretório, Django-Allauth/Authentication, inicie o aplicativo da web usando o seguinte comando:

  1. python manage.py runserver

Você verá uma saída semelhante à seguinte:

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Navegue até o URL http://127.0.0.1:8000/. Você deverá ver um site que se parece com este:

O site de exemplo exibe texto fictício e inclui uma área de login na parte inferior. Depois de configurar a autenticação, você usará o link Login na página da web em um passo posterior.

Neste passo, você construiu um aplicativo de uma página. Em seguida, você irá lidar com a autenticação usando django-allauth.

Passo 3 — Configurando django-allauth

Para autenticar usando django-allauth, você primeiro precisa configurá-lo. Isso é feito fazendo algumas alterações nos arquivos do projeto.

Abra Authentication/settings.py para edição. Sob INSTALLED_APPS, adicione as linhas destacadas para registrar os aplicativos django-allauth e a DigitalOcean como o provedor de login social:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # Certifique-se de adicionar esses aplicativos necessários
    'django.contrib.sites',
	  # Aplicativos Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Provedor de login social/terceiros para a Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Em seguida, atualize a seção TEMPLATES como mostrado:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# Especificações dos processadores de contexto:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

A nova linha trata dos pedidos HTTP do Django-Allauth.

Em seguida, crie uma seção para AUTHENTICATION_BACKENDS e adicione as seguintes linhas:

Django-Allauth/Authentication/Authentication/settings.py

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

A primeira linha é usada para fazer login de um usuário por nome de usuário através do painel de administração do Django, o que você fará em um próximo passo. A segunda linha é usada para métodos de autenticação específicos do django-allauth, como o login por um provedor OAuth.

Em seguida, adicione dois redirecionamentos de autenticação conforme mostrado:

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Essas linhas redirecionam o usuário para a página inicial após a autenticação e após o logout do site.

A última edição no arquivo settings.py é definir o ID da URL do seu site. No final do seu arquivo, adicione a seguinte linha:

Django-Allauth/Authentication/Authentication/settings.py
# Define o ID da URL do seu site. 
SITE_ID =1

Essa linha especifica o ID do banco de dados do objeto Site associado ao arquivo settings.py.

Salve e feche seu arquivo.

Em seguida, abra o arquivo urls.py raiz para edição. Adicione o caminho para os aplicativos Allauth da seguinte forma:

Django-Allauth/Authentication/Authentication/urls.py

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

Esta nova linha é usada para rotear o arquivo de URL do aplicativo allauth. O aplicativo django-allauth vem com um conjunto de URLs para suas páginas HTML. Algumas URLs fornecidas pelo allauth incluem: account_login, account_logout, account_set_password, entre outros. Confira a documentação do produto django-allauth para mais informações.

Salve e feche seu arquivo.

Neste passo, você configura o django-allauth em sua aplicação e está pronto para usá-lo para autenticação.

Passo 4 — Adicionando um Provedor de Autenticação de Terceiros

Neste passo, você adicionará autenticação de terceiros para seu aplicativo Django usando o django-allauth. Existem muitos provedores de autenticação de terceiros que você pode usar com o django-allauth, incluindo login social do Google, Facebook, Twitter e outros listados na lista de provedores do django-allauth.

Para este tutorial, você usará a DigitalOcean como seu login social. Para adicionar um provedor de autenticação como a DigitalOcean, primeiro você precisa registrá-los.

Faça login em sua conta DigitalOcean e vá para a plataforma de nuvem da DigitalOcean, onde você acessará um painel que se parece com este:

Clique no botão API no lado esquerdo do painel para criar sua Aplicação OAuth. No painel Aplicativos & API, clique no botão Aplicação OAuth para acessar o registro OAuth para seu site. Você verá um painel que se parece com este:

Em seguida, clique no botão Registrar Aplicativo OAuth para iniciar o registro de aplicativo OAuth do seu aplicativo. Um formulário pop-up aparecerá:

Insira o nome do projeto (Django-Allauth) e qualquer descrição que desejar. Na seção Insira o URL da Página Inicial, insira um dos seguintes URLs:

  • http://127.0.0.1:8000
  • http://localhost:8000

Na seção Insira o URL de Retorno, insira um dos seguintes URLs de redirecionamento:

  • http://127.0.0.1:8000/accounts/digitalocean/login/callback/
  • http://localhost:8000/accounts/digitalocean/login/callback/

Nota: Para fins de demonstração, este tutorial usa localhost:8000 ou 127.0.0.1:8000. Ao implantar um aplicativo em produção, os URLs devem ser alterados para incluir o nome do domínio.

Após inserir as informações do projeto, clique em Registrar Aplicativo OAuth para salvar as alterações. Você será redirecionado de volta para o painel do aplicativo com seu aplicativo criado, conforme mostrado abaixo:

Clique no nome do aplicativo para acessar o ID do Cliente e Segredo do Cliente:

Copie e salve esses detalhes para uso posterior.

Após configurar a API na DigitalOcean, agora você pode adicioná-la ao painel administrativo do seu aplicativo Django. Para acessar o painel administrativo do Django, você primeiro precisa ter um superusuário, que pode ser criado usando o seguinte comando:

  1. python manage.py createsuperuser

Digite os detalhes solicitados e execute o servidor mais uma vez.

Acesse o painel de administração usando o URL, http://127.0.0.1:8000/admin/. Faça login com seus detalhes de superusuário e você terá acesso ao painel de administração que se parece com o seguinte:

No painel esquerdo, clique em Sites, e então Adicionar Site + para editar um site existente (example.com) ou adicionar um novo usando http://127.0.0.1:8000 como mostrado abaixo:

Esta configuração define o URL do servidor do seu site onde a autenticação da DigitalOcean será implementada. Neste caso, é http://127.0.0.1:8000.

Clique em Salvar.

Em seguida, volte para o painel principal clicando em Início. Na seção Contas Sociais, clique em Aplicações Sociais, e então clique em Adicionar Aplicações Sociais +. Usando os detalhes que você copiou do Console da DigitalOcean, insira os detalhes necessários para o provedor de serviço, nome do aplicativo, ID do cliente e chave secreta do cliente. Em Sites, selecione o site que você acabou de criar em Sites disponíveis e clique na seta (—>) para movê-lo para o painel Sites escolhidos. Clique no botão Salvar para salvar os detalhes.

Esta configuração é usada para conectar o provedor de login social usando o ID do Cliente e a Chave Secreta, que são usados como identificador público de sua aplicação e como identificador confidencial, respectivamente. Eles são usados para autenticar sua aplicação e fazer solicitações para as APIs da DigitalOcean.

Neste passo, você configurou a DigitalOcean como o provedor de autenticação de terceiros para o seu aplicativo Django. No último passo, você fará login no seu site usando sua conta DigitalOcean.

Passo 5 — Testando a Autenticação

Neste passo, você fará login no seu site Django usando sua conta DigitalOcean. Primeiro, faça logout como administrador e navegue até a página de login (http://127.0.0.1:8000/accounts/login/):

Clique no link DigitalOcean para fazer login usando a DigitalOcean. (Como mostrado na captura de tela, outra maneira de autenticar é se inscrever usando um nome de usuário e uma senha.)

Na próxima tela, clique em Continuar. Uma nova página será exibida onde você precisará selecionar sua conta de equipe DigitalOcean e clicar no botão Autorizar aplicativo.

A autorização é o processo de conceder a uma pessoa a capacidade de acessar um recurso. Neste caso, você está concedendo ao seu site acesso às suas credenciais de login da DigitalOcean para autenticá-lo.

Após fazer login, você deverá ver sua página inicial como mostrado abaixo:

Após um login bem-sucedido, seu nome de usuário e o link Sair serão exibidos no site.

OBSERVAÇÃO: Durante este processo, você pode receber a mensagem de erro, Consulta de correspondência do SocialApp não existe:

Este problema normalmente ocorre quando você referencia incorretamente o número de identificação do seu site, como se você tivesse example.com como o primeiro site em seu site. Para resolvê-lo, encontre SITE_ID em settings.py e aumente seu valor em 1 até que o erro desapareça.

Neste passo, você testou sua configuração de autenticação fazendo login em seu site usando as informações de login da DigitalOcean.

Conclusão

Neste tutorial, você construiu um aplicativo Django que lida com autenticação social usando django-allauth. Você incorporou um login social da DigitalOcean e testou fazendo login em seu site. Você pode acessar o código do projeto no GitHub.

Como próximo passo, você pode usar django-allauth para autenticar qualquer um de seus outros projetos de aplicativos Django com qualquer um dos provedores django-allauth. Para mais informações sobre autenticação Django com django-allauth, confira a documentação oficial do Django-Allauth e a documentação oficial do Django sobre autenticação.

Você também pode adicionar estilo às páginas allauth, que possuem uma estilização básica padrão. Para adicionar estilo às páginas allauth, você pode clonar o projeto django-allauth do GitHub e usar o diretório django-allauth/allauth/templates do repositório clonado para estilizar suas páginas.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth