Com as atividades corridas do dia a dia, ninguém mais tem tempo de preencher um grande formulário de cadastro e os botões de login e cadastro com redes sociais foram uma verdadeira revolução nesse setor.
Se ainda não sabe como integrar a autenticação com redes sociais no Django, este artigo será ótimo para você. 🙌
Como primeiro de uma série, vamos ver como configurar a integração com o Facebook.
Preparação
Apesar da autenticação com redes sociais ser fundamental, sua aplicação deveria sempre ter um sistema de autenticação padrão com login e senha.
Precisamos de um projeto Django básico com páginas de cadastro, login, logout e pelo menos uma página index. Se ainda não sabe como fazer isso você pode conferir este artigo.
Configurações do projeto
Vamos ativar nosso virtualenv e instalar os pacotes necessários:
$ (env) pip install django social-auth-app-djangoAgora precisamos adicionar algumas configurações em nosso settings.py. Primeiro, vamos adicionar o social-auth-app-django, que na verdade tem o nome de social_django, no INSTALLED_APPS.
INSTALLED_APPS = [
...
'social_django',
]E adicionar suas urls no urls.py do projeto.
urlpatterns = [
...
path('admin/', admin.site.urls),
path('social-auth/', include('social_django.urls', namespace='social-auth')),
]Como instalamos um novo aplicativo, precisamos migrar os novos modelos de banco de dados.
$ python manage.py migrateNo arquivo settings.py, vamos adicionar os seguintes backends em AUTHENTICATION_BACKENDS.
AUTHENTICATION_BACKENDS = [
'social_core.backends.facebook.FacebookOAuth2',
'django.contrib.auth.backends.ModelBackend',
]Precisamos adicionar também, duas linhas de configuração em TEMPLATES.
TEMPLATES = [
{
...
'OPTIONS': {
'context_processors': [
...
'social_django.context_processors.backends',
'social_django.context_processors.login_redirect',
],
},
},
]Por fim, vamos adicionar as urls que o social-auth-app-django vai utilizar para redirecionar o usuário ao completar a autenticação.
LOGIN_URL = 'login'
LOGIN_REDIRECT_URL = 'index'
LOGOUT_URL = 'logout'
LOGOUT_REDIRECT_URL = 'login'Configurações do Facebook
Login
Na data em que escrevi este artigo, o Facebook não estava mais autorizando a utilização de urls sem HTTPS. Por isso, recomendo que continue este artigo depois de já ter configurado seu site em um servidor de produção. Você pode seguir este ótimo tutorial da DigitalOcean.
Se você ainda não conhece, a DigitalOcean é uma empresa de hospedagem onde se tem total liberdade de subir e configurar suas próprias máquinas virtuais Linux, sem ficar preso a dashboards ou usuários sem permissão de root.
Crie sua conta aqui e ganhe $100 dólares de crédito para criar suas máquinas na DigitalOcean.
Primeiramente, acesse developers.facebook.com/apps para criar seu app, caso não tenha criado. Clique em Adicionar um novo aplicativo e escolha a opção Escolher outros usos e preencha com os dados necessários.
No menu Configurações > Básico preencha o Nome de exibição, Domínios do aplicativo, URL da Política de Privacidade e anote os valores do ID do Aplicativo e Chave Secreta do Aplicativo.
No final da página, clique em Adicionar plataforma e escolha a opção Site. Agora só preencher com a url do seu site.
No menu Login do Facebook > Configurações preencha a url de retorno em URIs de redirecionamento do OAuth válidos. Esta será a url que o Facebook vai chamar logo após a autenticação.
Repare que o termo social-auth da url muda dependendo de sua configuração no urls.py, mas o final será sempre /complete/facebook.
Após finalizar as configurações, não esqueça de clicar no botão Em desenvolvimento para ativar seu aplicativo em produção.
Com os valores do ID do Aplicativo e Chave Secreta do Aplicativo, vamos adicionar as seguintes variáveis no settings.py.
SOCIAL_AUTH_FACEBOOK_KEY = 'SEU_ID_AQUI'
SOCIAL_AUTH_FACEBOOK_SECRET = 'SUA_CHAVE_AQUI'Finalmente, adicionamos o botão de login com Facebook em nossa página de login.
<button type="button" class="btn btn-primary">
<i class="fa fa-facebook"></i>
<a class="white" href="{% url 'social:begin' 'facebook' %}">
Login com Facebook
</a>
</button>Pronto! Agora basta clicar no botão que uma página de autorização do Facebook irá se abrir.
Se quiser você pode verificar no admin que o novo usuário foi criado na tabela User assim como seus dados complementares foram criados na tabela User social auths.
Dados adicionais
Até agora, obtemos os dados estritamente necessários para fazer o login. O social-auth-app-django pega o primeiro e último nome para criar o username do usuário.
Se quisermos mais dados do usuário como a foto do perfil, podemos adicionar as seguintes configurações em nosso settings.py.
SOCIAL_AUTH_FACEBOOK_SCOPE = ['email', 'user_link']
SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = {
'fields': 'id, name, email, picture.type(large), link'
}
SOCIAL_AUTH_FACEBOOK_EXTRA_DATA = [
('name', 'name'),
('email', 'email'),
('picture', 'picture'),
('link', 'profile_url'),
]E assim as informações extras são salvas no campo Extra data da tabela User social auths.
Utilização
Para utilizar os dados que recebemos do Facebook, precisamos do model UserSocialAuth para obter o usuário do Facebook salvo. Note que precisamos testar para ver se o usuário que está logado fez cadastro com redes sociais ou não. (Sempre teremos o cadastro padrão com login e senha).
from social_django.models import UserSocialAuth
class IndexView(LoginRequiredMixin, View):
def get(self, request):
data = { 'user': request.user }
user_query = UserSocialAuth.objects.filter(user=request.user)
if user_query.count():
data.update({ 'social_user': user_query.first() })
return render(request, 'main/index.html', data)No template, basta testar se a variável social_user existe, e utilizar seus atributos.
olá, {{ request.user }}
<br><br>
{% if social_user %}
Url: {{ social_user.extra_data.profile_url }}
{% endif %}Pronto! Agora você já pode integrar o login com Facebook em seu site de maneira bem simples e rápida. No próximo artigo veremos como integrar uma aplicação Django com a autenticação do Google.
Código
O código completo deste artigo está disponível no github.
Referências
- Imagem de fundo de Pete Linforth no Pixabay.
- Artigo de Archie Mistry.
