Bem, existem uma série de tutoriais que ensinam como integrar a sua aplicação escrita em Flask ao Facebook. Os exemplos de alguns tutoriais funcionam, alguns são complexos e outros não funcionam por algum motivo.

Neste post, como já esperado, aprenderemos a integrar o Flask ao Facebook, permitindo ao usuário se cadastrar e logar através da sua conta no Facebook. Claro que poderíamos dar mais opções aos usuários, fornecendo também a opção deles logarem pelo Twitter ou qualquer outra rede social, mas como o foco deste post é apresentar a integração com o Facebook, focaremos exclusivamente nele.

O principal benefício de não só integrar o Facebook, mas como qualquer outra rede social na nossa aplicação é a praticidade oferecida ao usuário. Quando nós oferecemos ao usuário por exemplo: se inscrever com o Facebook, ele não precisará colocar o seu email, colocar a sua senha, colocar o seu nome, etc. Ele apenas clica no botão de login com o Facebook e bum! Ele já está registrado no nosso banco de dados.

Mas como já devemos saber, por trás dessa “mágica” há um truque bastante interessante, digamos assim. A primeira coisa que devemos ter em mente para ela funcionar o usuário deverá estar logado na sua conta. Caso o usuário não esteja logado, então ele será redirecionado para uma tela de login do Facebook. Algo como a imagem abaixo.

Quando o usuário logar na sua conta, então nós receberemos os dados dele, tais como: o seu id no Facebook(dado importante), o seu nome, o seu gênero, etc.

Criando e configurando aplicação no Facebook

Antes de mais nada, nós deveremos criar uma aplicação no Facebook para poder obter os dados de acesso. Sendo assim, iremos primeiramente acessar a seguinte url: https://developers.facebook.com/. Ao acessar a url, deveremos ir até o menu e clicar na opção “My Apps”. Quando clicarmos na opção “My Apps” seremos redirecionados para uma outra página, onde deveremos clicar no botão “Add a new app”, como mostra a imagem abaixo.

Após isto, uma popup será aberta para nós podermos selecionar qual é a plataforma em que utilizaremos a nossa aplicação. Como estamos querendo integrar com o Flask, selecionaremos a opção “Website”. Na próxima página devemos cliar no botão de pular.

Quando pularmos, vamos ser redirecionados para outra páginas onde devemos colocar algumas informações sobre a nossa aplicação. Por fim, seremos redicionados a um painel de administração do nosso app.

Configurando aplicação

Agora que criamos o app, vamos configurar ele para podermos utilizá-lo no nosso localhost. A primeira coisa que deveremos fazer é entrar nas configurações. Quando entrarmos, seremos redirecionados para as configurações básicas do nosso app, como podemos ver na imagem abaixo.

O que nós devemos fazer nela é o seguinte: deveremos clicar no botão “+ Add Plataform” e selecionar a opção Website. Após isso, ele irá fornecer dois campos para nós preenchermos. As informações que devemos colocar nesses campos são correspondente a url da nossa aplicação no localhost, ou seja, no nosso caso utilizaremos a porta 3000 no localhost, sendo assim, colocaremos a url http://www.localhost:3000/.

Feito os passos descritos acima, devemos salvar as alterações clicando no botão “Save Changes”. Por fim, devemos clicar na aba “Advanced”, ir até o container “OAuth Settings” e adicionar a nossa url local ao campo “Valid OAuth redirect URIs”. Para um melhor compreendimento, vejamos a imagem abaixo.

Bem, agora temos tudo configurado para criarmos a nossa aplicação no ambiente local.

Integrando o Flask ao Facebook

Antes de mais nada, vamos instalar as nossas dependências(é recomendado criar um ambiente antes). Neste exemplo utilizaremos os seguintes pacotes: flask, flask-sqlalchemy, flask-login e o flask-oauth.

$ pip install flask flask-sqlalchemy flask-login flask-oauth

Agora que possuímos todas as dependências instaladas, vamos iniciar a criação da nossa aplicação. Inicialmente vamos criar um arquivo chamado app.py e após isto vamos importar os objetos que nós necessitaremos. Vejamos no trecho de código abaixo como ficará as nossas importações.

Logo abaixo das nossas importações nós devemos declarar duas constantes, sendo elas: o App Id e o App Secret da nossa aplicação gerada lá no Facebook. Sendo assim, ficará da seguinte maneira:

Após importamos o que iremos utilizar na construção da nossa aplicação e declararmos as nossas constantes, vamos criar um objeto da classe Flask(como de padrão) e adicionar algumas configurações a ele. Para um melhor compreendimento, vejamos o trecho de código logo abaixo.

No trecho de código acima, basicamente explicitamos que o servidor deverá rodar no modo debug e que a url do nosso banco de dados é sqlite:///example.db. Feito isso, vamos criar o nosso model, onde conterá as seguintes colunas: o id do usuário, o nome do usuário, o id correspondente ao Facebook do usuário e o email do usuário, sendo o email opicional.

O email será opicional pelo fato de que nem todos os usuários quando logarem com o Facebook retornarão um email para nós. Essa ausência do email no retorno dos dados pode possuir diversas razões. Um motivo comum é quando o usuário não confirma o email, sendo assim o Facebook não retornará ele para nós. Vejamos o trecho de código abaixo para uma melhor compreensão.

No trecho de código acima criamos um objeto da classe SQLAlchemy e criamos a classe User, que nada mais é do que o nosso model. Podemos perceber também que nós declaramos como parâmetro na coluna email o nullable=True, indicando que esta coluna pode conter valores nulos, ou seja, nenhum valor.

Criando os callbacks necessários para o login

Inicialmente nós vamos criar um objeto da classe Oauth e outro objeto da classe LoginManager. O objeto da classe Oauth será utilizado para nós fazermos a autentificação do usuário no Facebook e o objeto da classe LoginManager para o usuário realizar o login na nossa aplicação.

Logo abaixo do model vamos adicionar as seguintes linhas:

No trecho de código acima podemos perceber a presença de duas linhas adicionais. A linha em que nós declaramos o método init_app() é importante para nós iniciarmos o objeto da classe LoginManager no contexto da nossa aplicação. E a linha em que nós definimos um valor para a propriedade login_view é importante pois nós definimos em qual rota estará a nossa página de login.

Agora iremos criar uma variável chamada facebook que armazenará as informações necessárias para realizarmos a autentificação com o Facebook. Informações como: a url base, a url de autenticação, tokens de acesso, etc. Sendo assim, logo abaixo do trecho de código que acabamos de escrever acima devemos colocar a seguinte linha:

Após criarmos todos os objetos necessários, vamos criar os nossos callbacks. O primeiro deles será relacionado a restrição de acesso, ou seja, se o usuário tentar acessar uma página em que ele não esteja autorizado, iremos barrá-lo e jogá-lo para a página de login. Ficará da seguinte maneira:

O segundo callbacks será responsável por recarregar o id do usuário armazenado na sessão, onde ele receberá o id desse usuário e retornará como resposta um objeto correspondente a este usuário.

O próximo callback será responsável por, a cada requesição feita em qualquer página identificar o usuário atual e inserí-lo na propriedade user do objeto g(que importamos lá no começo).

Agora que temos os callbacks de login criados, vamos criar os callbacks para autenticação no Facebook. Vejamos o trecho de código abaixo.

Como podemos ver, o primeiro callback na verdade é uma rota que ficará responsável por receber os dados do usuário após a autenticação no facebook, registrar este usuário no nosso banco de dados caso ele ainda não esteja registrado e logá-lo. Esse trecho de código é muito importante pois é aqui onde nós logaremos o usuário através do seu id do Facebook, que nada mais é do que um identificador único, permitindo a ausência de qualquer tipo de senha para o usuário que optar por este tipo de login.

O segundo callback é responsável apenas por pegar token da sessão.

Criando as rotas

Por fim, após termos feito todos esses passos, vamos criar as rotas que o usuário acessará e também o seus templates. Vejamos o trecho de código abaixo para entendermos a maneira que ficará as nossas rotas.

A primeira rota nada mais é que a nossa index, onde a mesma irá renderizar o nosso template index.html. A segunda rota é uma rota restrita, onde apenas os usuários logados podem acessar. Podemos perceber isso por causa da presença do decorator login_required.

A terceira rota exige um pouco mais de explicação. Ela fará o seguinte: caso o usuário atual não esteja logado, então ela vai enviar uma requisição para o facebook para poder autentificar o usuário. O Facebook por sua vez, irá retornar uma série de dados do usuário caso tudo ocorra bem, então, nós seremos redirecionados lá para a rota /login-facebook/authorized, onde já nos foi explicado o que irá acontecer. Caso o usuário já esteja logado, então, obviamente, nós o redirecionamos para o painel de administração.

A última rota como já devemos saber, irá deslogar o usuário.

O último passo que devemos dar é executar a nossa aplicação. Vejamos o trecho de código abaixo.

Sendo assim, chegamos ao fim desse simples tutorial de como integrar a nossa aplicação em Flask ao Facebook. Integrar com outras redes sociais seguem a mesma linha de raciocínio, porém modificando as urls e os tokens. Para visualizar o projeto completo, basta acessar o nosso repositório no github: flask-facebook-example. Até mais.