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 por 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 mais.

django-allauth é um conjunto integrado de aplicações Django que lidam com autenticação de conta, registro, gerenciamento e autenticação de conta 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 OAuth/OAuth2 adicionais 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 mude para ele. Este tutorial utiliza Django-Allauth:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

Assegure-se de usar esta pasta para o resto 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ê 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 simples de uma página para usar com 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 como 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 há necessidade de 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 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 templates.

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 minimizado -->

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

  12. 

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

  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 web de demonstração inclui texto de amostra renderizado em cards e uma área de login para usar com autenticação em um próximo passo.

A página da web é estilizada usando o Materialize CDN, um framework front-end gratuito e de código aberto para entrega de conteúdo baseado no Material Design. Ele ajuda a carregar as bibliotecas 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 estilo.

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 uma etapa posterior.

Nesta etapa, você construiu uma aplicação de uma página. Em seguida, você irá lidar com a autenticação usando django-allauth.

Etapa 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 o arquivo Authentication/settings.py para edição. Sob INSTALLED_APPS, adicione as linhas destacadas para registrar os aplicativos django-allauth e o DigitalOcean como provedor de login social:

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

Em seguida, atualize a seção TEMPLATES conforme 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 lida com solicitações 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 pelo 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 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 sair do site.

A última edição para o 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

Esta 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. Alguns URLs fornecidos pelo allauth incluem: account_login, account_logout, account_set_password, entre outros. Consulte a documentação do django-allauth para obter 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 sua aplicação Django usando django-allauth. Existem muitos provedores de autenticação de terceiros que você pode usar com django-allauth, incluindo logins sociais 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.

Acesse sua conta DigitalOcean e vá para a plataforma de nuvem DigitalOcean, onde você terá acesso a um painel que se parece com este:

Clique no botão API à esquerda do painel para criar sua Aplicação OAuth. No painel Aplicações e 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 do aplicativo OAuth da sua aplicação. Um formulário pop-up aparecerá:

Informe o nome do projeto (Django-Allauth) e qualquer descrição desejada. Para a seção Informe a URL da página inicial, insira uma das seguintes URLs:

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

Na seção Informe a URL de retorno, insira uma das 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 utiliza localhost:8000 ou 127.0.0.1:8000. Ao implantar um aplicativo em produção, as URLs devem ser alteradas para incluir o nome de 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 de controle do aplicativo com o seu aplicativo criado, como 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 no DigitalOcean, agora você pode adicioná-la ao painel administrativo do seu aplicativo Django. Para acessar o painel administrativo do Django, primeiro você precisa ter um superusuário, que você pode criar usando o seguinte comando:

  1. python manage.py createsuperuser

Digite os detalhes solicitados e execute o servidor novamente.

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ê acessará o painel de administração que se parece com o seguinte:

No painel esquerdo, clique em Sites, e depois em 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, navegue de volta para o painel principal clicando em Início. Na seção de 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. Sob Sites, selecione o site que você acabou de criar em Sites Disponíveis e clique na seta (—>) para movê-lo para o painel de 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 o DigitalOcean como o provedor de autenticação de terceiros para o seu aplicativo Django. No passo final, você fará login no seu site usando sua conta do DigitalOcean.

Passo 5 — Testando Autenticação

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

Clique no link DigitalOcean para fazer login usando o DigitalOcean. (Conforme 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ê deverá selecionar sua conta da equipe do 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 do DigitalOcean para autenticá-lo.

Depois de fazer login, você deverá ver sua página inicial conforme mostrado abaixo:

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

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

Esse problema normalmente ocorre quando você referencia incorretamente o número do ID do seu site, como por exemplo, se você tem example.com como o primeiro site na sua lista. Para resolver isso, encontre SITE_ID no arquivo settings.py e aumente o seu valor em 1 até que o erro desapareça.

Neste passo, você testou a configuração de autenticação fazendo login no seu site usando as informações de login do DigitalOcean.

Conclusão

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

Como próximo passo, você pode usar o django-allauth para autenticar qualquer um dos seus outros projetos de aplicativos Django com qualquer um dos provedores do django-allauth. Para mais informações sobre autenticação Django com o 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 um estilo básico 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