Com as atividades corridas do dia a dia, ninguém tem mais tempo de preencher um grande formulário de cadastro e os botões de login 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ê. 🙌
Este artigo é o segundo de uma série em que vamos ver como configurar a autenticação com diversas redes sociais. Neste, como o título já diz, vamos ver a integração com o Google.
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 seguir 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 as urls no urls.py do projeto.
urlpatterns = [
...
path('social-auth/', include('social_django.urls', namespace='social-auth')),
]Como instalamos um novo aplicativo, precisamos migrar os novos models do banco de dados.
$ python manage.py migrateNo arquivo settings.py, adicione os seguintes backends em AUTHENTICATION_BACKENDS.
AUTHENTICATION_BACKENDS = [
'social_core.backends.google.GoogleOAuth2',
'django.contrib.auth.backends.ModelBackend',
]E adicione essas duas linhas de configuração em TEMPLATES.
TEMPLATES = [
{
...
'OPTIONS': {
'context_processors': [
...
# Adicione as linhas abaixo
'social_django.context_processors.backends',
'social_django.context_processors.login_redirect',
],
},
},
]Por fim, vamos adicionar as urls que o social-auth-app-django utiliza para autenticação.
LOGIN_URL = 'login'
LOGIN_REDIRECT_URL = 'index'
LOGOUT_URL = 'logout'
LOGOUT_REDIRECT_URL = 'login'Configurações do Google
Aplicativo
Na data em que escrevi este artigo, para algumas redes sociais era necessária a utilização de urls com 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, vamos acessar console.developers.google.com/apis/credentials/oauthclient para criar seu app, caso não tenha criado. Clique em CRIAR PROJETO e preencha com os dados do seu novo projeto.
Agora clique no menu lateral Credenciais e o botão + CRIAR CREDENCIAIS aparecerá no topo. Vamos clicar e escolher a opção ID do cliente OAuth.
Caso apareça uma tela para configurar a tela de consentimento, basta seguir os passos apresentados e escolher a opção de uso Externo. Depois colocar seu domínio e url de política de privacidade em domínios autorizados.
Agora que já configuramos a tela de consentimento, podemos ir novamente em Credenciais > + CRIAR CREDENCIAIS > ID do Cliente OAuth.
Em Tipo de Aplicativo vamos escolher Aplicativos da Web e no final da tela adicionar a URI de redirecionamento.
Repare que o termo social-auth da url muda dependendo de sua configuração no urls.py, mas o final será sempre /complete/google-oauth2.
Uma janela irá aparecer com a credenciais para configuração e anote os valores de Seu ID de cliente e Sua chave secreta de cliente.
Login
Com os valores de ID e chave secreta, vamos adicionar as seguintes variáveis no settings.py.
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'SEU_ID_AQUI'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'SUA_CHAVE_AQUI'Finalmente, adicionamos o botão de login com Google:
<button type="button" class="btn btn-primary">
<i class="fa fa-google"></i>
<a class="white" href="{% url 'social:begin' 'google-oauth2' %}">
Login com Google
</a>
</button>Pronto! Agora basta clicar no botão criado que uma página de autorização da Google 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.
Utilização
Para utilizar os dados que recebemos da Google, precisamos do model UserSocialAuth para obter o usuário 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.uid }}
{% endif %}Código
O código completo deste artigo está disponível no github.
