Criando autenticação com o Facebook em 10 minutos! (Devise + Omniauth)

Screencast #1

Saiu o primeiro ScreenCast do Blog, nele falamos sobre como criar uma autenticação (usando a conta do facebook) com o Devise e o Omniauth em 10 minutos. Talvez este assunto seja trivial para algumas pessoas, mas ainda existem muitas dúvidas e dificuldades na hora de fazer isso. Então, decidimos simplificar o assunto criando um tutorial em vídeo.

 

Pra acessar o repositório no GitHub com o código completo para consulta, clique aqui!

Lista de comandos

Parte 1 – Criar o App e instalar o devise

1. 1. Criar o App
      
      Ruby

      rails new social_register

      1	rails new social_register

   2. Incluir as dependências no Gemfile
      
      Ruby

      gem 'devise' gem 'omniauth' gem 'omniauth-facebook'

      1 2 3

      gem 'devise' gem 'omniauth' gem 'omniauth-facebook'

   3. Rodar o bundle
      
      Ruby

      bundle

      1

      bundle

   4. Gerar o Controller da Home
      
      Ruby

      rails g controller home

      1	rails g controller home

   5. Incluir o caminho nos routes
      
      Ruby

      root to: "home#index"

      1	root to: "home#index"

   6. Criar o arquivo “app/views/home/index.html.erb”
   7. Colar o seguinte códido dentro:
      
      Ruby

      Hello <%= current_user.email %> <% if current_user.image.present? %> <%= image_tag(current_user.image, size: "40") %> <% end %>

      1 2 3 4

      Hello <%= current_user.email %> <% if current_user.image.present? %> <%= image_tag(current_user.image, size: "40") %> <% end %>

      
      <%= link_to “Sair”, destroy_user_session_path, method: :delete %>

 

• Instalar o devise
  
  Ruby

  rails g devise:install

  1	rails g devise:install

• Criar o User do devise
  
  Ruby

  rails g devise user

  1	rails g devise user

• Rodar as migrations
  
  Ruby

  rake db:migrate

  1	rake db:migrate

• Colocar o before_action no “/app/controllers/application_controller.rb”
  
  Ruby

  before_action :authenticate_user!

  1	before_action :authenticate_user!

 

Parte 2

 

Nota: Devido à atualizações na plataforma developers.facebook.com, houve a necessidade de atualizar essa parte do tutorial para que seu APP local funcione. Para o bom funcionamento do tutorial, a Parte 2 poderá ser alterada no futuro caso aconteçam novas atualizações na plataforma. 🙂

 

1- Acesse developers.facebook.com e ative sua conta do facebook como developer. Em seguida, no Menu superior direito ‘Meus Aplicativos’ clique em ‘Adicionar um novo aplicativo’, escolha um nome e seu e-mail para criar nossa interação.

 

2- Na tela seguinte vá em Login do Facebook e clique em ‘Configurar’

 

3- Na tela seguinte clique em Web e digite http://localhost:3000 no campo URL do site e clique em salvar.

 

4- Em seguida, clique no menu Login do Facebook -> Configurações e no campo URIs de redirecionamento do OAuth válidos e insira o valor:

 

Clique em ‘Salvar Alterações’.

 

Parte 3 – Criar o login e o signup social

1. Alterar a parte “devise_for :users” no arquivo Routes, para:
   
   Ruby

   devise_for :users, :controllers =&gt; { :omniauth_callbacks =&gt; "callbacks" }

   1	devise_for :users, :controllers => { :omniauth_callbacks => "callbacks" }

2. Adicionar o omniautable ao “app/models/user.rb”
   
   Ruby

   :omniauthable

   1	:omniauthable

3. Adicionar os campos necessários para o omniauth no model User
   
   Ruby

   rails g migration AddColumnsToUsers provider uid name

   1	rails g migration AddColumnsToUsers provider uid name

4. Rodar as migrations
   
   Ruby

   rake db:migrate

   1	rake db:migrate

5. Incluir a configuração do omniauth no “config/initializers/devise.rb”. OBS: Está diferente do ScreenCast devido à atualização na integração.
   
   Ruby

   config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], callback_url: "http://localhost:3000/users/auth/facebook/callback"

   1	config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], callback_url: "http://localhost:3000/users/auth/facebook/callback"

6. Vamos gerar o controller de callback
   
   Ruby

   rails g controller callbacks

   1	rails g controller callbacks

7. Copiar o código pra dentro do “app/controllers/callbacks_controller.rb”
   
   Ruby

   class CallbacksController &lt; Devise::OmniauthCallbacksController def facebook @user = User.from_omniauth(request.env["omniauth.auth"]) if @user.persisted? sign_in_and_redirect @user, :event =&gt; :authentication else redirect_to new_user_registration_url end end def failure redirect_to root_path end end

   1 2 3 4 5 6 7 8 9 10

   class CallbacksController < Devise::OmniauthCallbacksController def facebook @user = User.from_omniauth(request.env["omniauth.auth"]) if @user.persisted? sign_in_and_redirect @user, :event => :authentication     else       redirect_to new_user_registration_url     end   end     def failure     redirect_to root_path   end end

8. Copiar o código para o “app/models/user.rb”
   
   Ruby

   class User &lt; ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :omniauthable def self.from_omniauth(auth) where(provider: auth.provider, uid: auth.uid).first_or_create do |user| user.email = auth.info.email user.name = auth.info.name user.password = Devise.friendly_token[0,20] user.image = auth.info.image end end end

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   class User < ApplicationRecord   # Include default devise modules. Others available are:   # :confirmable, :lockable, :timeoutable and :omniauthable   devise :database_authenticatable, :registerable,   :recoverable, :rememberable, :trackable, :validatable, :omniauthable   def self.from_omniauth(auth)     where(provider: auth.provider, uid: auth.uid).first_or_create do |user|       user.email = auth.info.email       user.name = auth.info.name       user.password = Devise.friendly_token[0,20]       user.image = auth.info.image     end   end end

 

Precisa de ajuda?

1. Dê uma olhada nos comentários e veja se uma dúvida semelhante à sua já não foi resolvida 🙂
2. Pergunte aí em baixo que nós responderemos.
3. Curta nossa página no Facebook que a gente bate um papo pra solucionar sua dúvida.  Curtir agora!

Referências

1. Projeto completo no GitHub, aqui.
2. Para criar seu App no Facebook, clique aqui.
3. Documentação do Devise, aqui.
4. Documentação do OmniAuth, aqui.

Conclusão

Espero que este Post seja útil e que torne a sua vida como programador mais fácil. Se você está gostando do conteúdo do blog, compartilhe-o com os seus amigos que possam se beneficiar desses conteúdos (ajude esse blog a crescer 🙂 ) e não se esqueça de assinar a Newsletter 🙂.

Muito obrigado pela sua atenção e um grande abraço.

Equipe OneBitCode.

---

Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode trás conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no dating scene san diego, alguns acontecimentos no the red pill reddit dating hookup nyc la, ouça os https://onebitcode.com/free-gay-dating-sites-uk/ e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

• WorkFlow Super Full Stack
  • Desenvolvendo seus projetos como um profissional
• Guia do Freelancer
  • PDF com links fundamentais para quem quer ser um freelancer de sucesso
• Guia One Bit Code de Gems
  • Baixe gratuitamente seu e-Book com 60 Gems separadas por categorias

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/