Como implementar autenticação em aplicações Django utilizando Allauth

Como implementar autenticação em aplicações Django utilizando Allauth

A autenticação é um processo essencial em aplicações web, que permite que usuários se identifiquem e acessem conteúdos restritos. Nas aplicações mais atuais, o processo de autenticação pode ir além do e-mail e senha, como por exemplo a utilização de login social.

Nesse contexto, o Allauth vem como uma ferramenta no processo de autenticação em aplicações Django, oferecendo uma solução robusta e flexível.

O que é o Allauth?

O Allauth é uma biblioteca de código aberto criada por Raymond Penners em 2012. Ela é baseada em Django e segue um processo de autenticação simples e intuitivo. A biblioteca possibilita a autenticação de usuários utilizando uma conta de provedor externo, como Google ou Facebook, e facilita o registro de usuários com confirmação de e-mail.

Além disso, o Allauth reutiliza de forma flexível os recursos de autenticação do próprio Django.

Por que utilizar o Allauth ao invés do sistema de autenticação que já vem pronto no Django?


O sistema de autenticação do Django é bom e fornece os recursos básicos para garantir segurança nos logins, mas o Allauth serve como um boost sobre o que já existe, dando mais complexidade e modernidade na ferramenta.

Veja alguns motivos pelos quais você poderia utilizar o Allauth ao invés do sistema de autenticação padrão:

Autenticação social

O Allauth facilita a autenticação de usuários usando contas de provedores externos, como Google, Facebook ou X. Isso pode ajudar a melhorar a experiência do usuário, pois permite que eles se conectem facilmente usando uma conta que já possuem em outra plataforma.

Flexibilidade

A biblioteca é configurável e pode ser personalizada para atender às necessidades específicas do seu projeto. Ela fornece vários modelos e formulários personalizáveis, além de recursos adicionais, como confirmação de e-mail e autenticação por token.

Gerenciamento de usuários

Fornece uma interface de administração pronta para uso que pode ajudar a gerenciar os usuários registrados e suas informações de login. Isso pode ser especialmente útil em projetos em que há muitos usuários ou quando é necessário fazer alterações em grande escala.

Documentação e comunidade

O Allauth é uma biblioteca de código aberto bem documentada e ativamente mantida. Ela tem uma grande comunidade de usuários e colaboradores que podem fornecer suporte e solucionar problemas.

O que vamos fazer hoje?

Para entender na prática o funcionamento do Allauth, vamos criar um sistema simples de autenticação social.

Passo a passo para o setup da aplicação


Provedor externo

Antes de começar a colocar a mão na massa, vamos primeiro configurar um provedor externo para possibilitar o login social. Nesse tutorial vamos utilizar o provedor Google, que é bastante comum na maioria dos sites.

1) Faça login no Console de Desenvolvedores do Google utilizando uma conta Gmail.

2) Crie um novo projeto, se ainda não tiver um.


3) Após criar o projeto, ative APIs e serviços.


4) Na página Biblioteca, pesquise por Google+ API. Clique na opção e depois clique em Ativar.


5) Após a ativação, clique em Credenciais no botão lateral, depois em criar credenciais e, por último, em ID do Cliente OAuth. A próxima tela irá informar que primeiro é preciso configurar uma tela de permissão, então clique em Configurar tela de consentimento.


6) Na tela de permissão, vamos marcar a opção externo e depois clicar em Criar. Lembrando que estamos configurando apenas para testes. Caso você deseje liberar a funcionalidade em produção, é preciso fazer uma verificação com o Google.


7) Preencha as informações obrigatórias sobre o app. As opções opcionais podemos deixar em branco por enquanto.

8) No passo 3 (Usuários de teste), adicione a conta Gmail que terá liberação para uso da ferramenta durante esse período de testes.

9) Após a finalização, volte para o menu Credenciais, depois clique novamente em Criar credenciais e ID do cliente do OAuth. Marque o tipo de aplicativo como Aplicativo da Web. As outras informações você pode preencher como na imagem abaixo.


10) Pronto! As credenciais de acesso estarão criadas. Você pode fazer download do arquivo JSON para não perder. Voltaremos para elas mais tarde.


Instalação do Allauth no projeto Django


Vamos levar em consideração que você já possui o app Django já configurado em máquina, seguindo pelo menos a estrutura padrão renderizada pelo comando djangoadmin startproject <nome-do-projeto>.


Se estiver tudo certo, vamos instalar o Allauth utilizando o comando abaixo.


Após a instalação da dependência, é preciso habilitá-la dentro do projeto através de modificações no arquivo settings.py:

1) Em INSTALLED_APPS, adicione os apps django.contrib.sites, allauth, allauth.account, allauth.socialaccount e 'allauth.socialaccount.providers.google' - esse último é para habilitação de login social utilizando conta Google.


2) Abaixo de INSTALLED_APPS, adicione a variável SITE_ID recebendo o número 1.

3) Em TEMPLATES, adicione o caminho BASEDIR / 'templates' dentro da chave DIRS.


4) Ao final do arquivo settings.py, adicione a variável AUTHENTICATION_BACKENDS, do tipo lista (array). Você pode copiar e colar o código abaixo.


5) Também adicione a variável SOCIALACCOUNT_PROVIDERS. Ela receberá especificações do provedor externo que utilizaremos.


6) No arquivo urls.py, dentro do array urlpatterns, vamos adicionar as urls do Allauth.


7) Agora precisamos executar um comando de migrate, para que o ORM do Django importe as tabelas do Allauth para o banco de dados (utilizaremos o banco padrão sqlite).


8) Após o migrate, crie um superusuário, se ainda não tiver.


Criando um template para a página


Dentro da raiz do projeto, crie a pasta templates, a subpasta account e o arquivo login.html. É importante não errar a grafia das pastas/arquivos para que o Allauth consiga fazer a leitura automática deles.

Nesse arquivo será criado o template da página de login. Você pode copiar e colar o código html abaixo ou modificá-lo como desejar utilizando HTML e CSS.


Ainda na pasta templates, crie uma subpasta chamada socialaccount e um arquivo login.html. Você pode utilizar o código abaixo também.


Testando o funcionamento da aplicação

Execute o servidor.

Note que o servidor está funcionando no host http://127.0.0.1:8000. Vamos acessar a página de login pelo navegador configurada através do link http://127.0.0.1:8000/accounts/login. Nela, clique em Login with Google e siga adiante!


Ao final da autenticação, a aplicação irá redirecionar para a url http://127.0.0.1:8000/accounts/profile/, que em tese seria a url de perfil do usuário - mas como ainda não foi configurada, retornará um 404 - Not Found (fica como temática para outro artigo, rs).

De qualquer forma, é possível conferir o login do usuário através do painel administrativo:

  1. Acesse http://127.0.0.1:8000/admin;
  2. Realize o login utilizando o superusuário que criamos acima;
  3. Clique em Social accounts no menu. O registro de login social estará lá, e ao clicar no nome de usuário (automaticamente gerado pelo sistema), você poderá identificar várias informações que o Google fornece sobre o usuário.


Conclusão

Como o Django tem como lema “Baterias inclusas”, o Allauth não poderia ser diferente. Como podemos ver, com poucas modificações foi possível fazer essa integração com o Google funcionar. Basicamente o que fizemos aqui foi: instalar a biblioteca, configurá-la no projeto e sobrescrevemos os templates padrões (apenas por questões estéticas).

Este tutorial é apenas uma pequena possibilidade do que a biblioteca é capaz de fazer. Espero que este artigo te desperte a curiosidade para descobrir mais. :)

Referências

💡
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.