« HE:labs
HE:labs

Implementando Login via Facebook na sua App Rails

Postado por Matheus Bras em 24/06/2013

Eu falei anteriormente sobre o Passwordless Login e agora vou falar sobre o Login via Facebook. Este post será mais como uma 'receita' de como implementar na sua aplicação Rails. Então, vamos lá.

Todo mundo que você conhece tem uma conta no Facebook, certo? Até minha mãe fez uma conta no Facebook! Só o Rafael Lima mesmo que não tem (truestory). Implementar login via Facebook na sua aplicação traz uma facilidade bem grande para o usuário fazer seu cadastro. Com uns dois cliques ele já cria a conta e você tem acesso ao nome, email, data de nascimento, avatar e outras informações que pode-se acessar pedindo permissão, como amigos, fotos, likes e por aí vai...

O que você precisa para implementar o login:

  • Uma conta no Facebook
  • Criar uma App no Facebook
  • Ter uma App usando Rails
  • As gems omniauth e omniauth-facebook
  • Alguns métodos e controllers

Criando um aplicativo no Facebook

Acesse http://developers.facebook.com/apps e clique em "Criar Novo Aplicativo". Digite o nome do seu App e um namespace.

image

Próximo passo é pegar o APP ID e o APP Secret e configurá-los como variáveis de ambiente da sua aplicação Rails. Normalmente, colocamos as variáveis no .rvmrc do projeto, mas nada impede que você crie um arquivo .yml e salve estas informações.

image

1 export FACEBOOK_APP_KEY= #{APP ID}
2   export FACEBOOK_APP_SECRET= #{APP_SECRET}

Existe a opção de deixar o aplicativo no Facebook em modo 'Sandbox'. Caso esteja ativado, somente você e/ou outras pessoas que estiverem cadastradas como desenvolvedores ou testers poderão usar sua aplicação para fazer o login. Caso você prefira que qualquer pessoa possa se logar sem precisar dar permissão, desative o modo Sandbox. Para ver as configurações de permissões, clique em "Privilégios de desenvolvedores" na sidebar.

image

Depois, na seção "Selecione o modo como seu aplicativo se integra com Facebook" clique em "Site com o Login do Facebook". Em Site URL, coloque a url onde o Facebook vai enviar as informações da autenticação. Normalmente o path "/auth/facebook/callback" é usado com a gem "omniauth". Vou explicar isto melhor depois.

Se você estiver configurando a App para desenvolvimento local, o host será "http://localhost:3000" ou qualquer que seja seu host local.

image

E é isto para o aplicativo do Facebook. Agora, vamos para o Rails:

A parte do Rails...

Primeiro, adicione no seu Gemfile estas gems:

1 gem 'omniauth'
2   gem 'omniauth-facebook'

Depois, crie um arquivo chamado "omniauth.rb" em config/initializers:

1 Rails.application.config.middleware.use OmniAuth::Builder do
2     provider :facebook, ENV['FACEBOOK_APP_KEY'], ENV['FACEBOOK_APP_SECRET'], :scope => "email"
3   end

Note que a opção "scope" tem o valor "email". Isto significa que pediremos permissão para ter acesso, além das informações básicas do usuários, ao email. Existem outros tipos de "scopes" para ter acesso a lista de amigos do usuário e aos posts no mural. Você pode saber mais sobre os tipos de permissão em: https://developers.facebook.com/docs/reference/login/#permissions.

Precisamos agora de um model para o usuário:

1 $ rails g model User name:string email:string access_token:string uid:string photo_url:string provider:string
2   $ rake db:migrate

Precisamos também de um controller para cuidar da autenticação. Vamos criar o SessionsController:

1 $ rails g controller Sessions

Neste controller vamos implementar algumas actions:

 1 # encoding: UTF-8
 2   class SessionsController < ApplicationController
 3     def create
 4       auth = request.env["omniauth.auth"]
 5       user = User.find_or_create_with_omniauth(auth)
 6       session[:user_id] = user.id
 7       redirect_to secret_page_path, :notice => "Opa! Você está online!"
 8     end
 9 
10     def failure
11       redirect_to root_url
12     end
13 
14     def destroy
15       session[:user_id] = nil
16       redirect_to root_url, :notice => "Volte em breve!"
17     end
18   end

A action create vai receber as informações do usuário enviado pelo Facebook através do request.env["omniauth.auth"]. Caso ele não exista no banco de dados, nós criaremos o usuário ou então, somente o encontraremos através do método que ainda será implementado no model User, find_or_create_with_omniauth(). Para saber mais sobre o Auth Hash, clique aqui. A action failure vai redirecionar o usuário para o root_url, caso a autenticação falhe. E a action destroy, vai simplesmente deslogar o usuário.

Agora vamos criar as rotas para este controller:

1 match "/auth/:provider/callback" => "sessions#create", as: :auth_callback
2   match "/auth/failure" => "sessions#failure", as: :auth_failure
3   match "/logout" => "sessions#destroy", as: :logout

Lembra que ao criarmos o aplicativo no Facebook definimos a url para login como http://localhost:3000/auth/facebook/callback? Esta rota aponta para a action create do nosso SessionsController. Você pode mudar a rota para a action create, mas lembre-se de mudar nas configurações do aplicativo do Facebook também.

Vamos voltar ao model User para implementar o método find_or_create_with_omniauth:

1 def self.find_or_create_with_omniauth(auth)
2     user = self.find_or_create_by_provider_and_uid(auth.provider, auth.uid)
3     user.assign_attributes({ name: auth.info.name, email: auth.info.email, photo_url: auth.info.image, access_token: auth.credentials.token })
4     user.save!
5     user
6   end

Na primeira linha do método tente achar o usuário pelos campos provider e uid. Se não for encontrado, nós criaremos um. Logo na linha debaixo nós setamos alguns atributos pelo Auth Hash, como: nome, email, avatar e o access_token. Então, salvamos o usuário e o retornamos na última linha.

Para finalizar, só precisamos criar algum link onde o usuário clique e faça o login. Adicione na view da sua preferência:

1 <%= link_to "Login com Facebook", "/auth/facebook" %>

E pronto. O usuário já pode fazer o login usando o Facebook na sua aplicação Rails. Como no outro post, eu também preparei uma aplicação exemplo no Heroku e disponibilizei o código no Github. É uma versão modificada da aplicação do outro exemplo. ;)

Heroku -> https://facebook-login-example.herokuapp.com/ Github -> https://github.com/matheusbras/facebook-login-example

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!