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

Screencast #1

Saiu o primeiro ScreenCast do Blog, nele eu falo 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 eu decidi 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. Criar o App
    rails new social_register
  2. Incluir as dependências no Gemfile
    gem 'devise'
    gem 'omniauth'
    gem 'omniauth-facebook'
  3. Rodar o bundle
    bundle
  4. Gerar o Controller da Home
    rails g controller home
  5. Incluir o caminho nos routes
    root to: "home#index"
  6. Criar o arquivo “app/views/index.html.erb”
  7. Colar o seguinte códido dentro:
    <p>
      Hello <%= current_user.email %>
      <% if current_user.image.present? %>
        <%= image_tag(current_user.image, size: "40") %>
      <% end %>
      </p>
    </br>
    <%= link_to "Sair", destroy_user_session_path, method: :delete %>
  8. Instalar o devise
    rails g devise:install
  9. Criar o User do devise
    rails g devise user
  10. Rodar as migrations
    rake db:migrate
  11. Colocar o before_action no “/app/controllers/application_controller.rb”
    before_action :authenticate_user!
Parte 2

Está parte não possui comandos 🙂

Parte 3 – Criar o login e o signup social
  1. Alterar a parte “devise_for :users” no arquivo Routes, para:
    devise_for :users, :controllers => { :omniauth_callbacks => "callbacks" }
  2. Adicionar o omniautable ao “app/models/user.rb”
    :omniauthable
  3. Adicionar os campos necessários para o omniauth no model User
    rails g migration AddColumnsToUsers provider uid name
  4. Rodar as migrations
    rake db:migrate
  5. Incluir a configuração do omniauth no “config/initializers/devise.rb”
    config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], scope: "email"
  6. Vamos gerar o controller de callback
    1
    
    rails g controller callbacks
  7. Copiar o código pra dentro do “app/controllers/callbacks_controller.rb”
    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”
    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 aí em baixo e vê se sua dúvida não foi resolvida 🙂
  2. Pergunta aí em baixo que eu te responderei.
  3. Me adicione no Facebook que a gente bate um papo pra solucionar sua dúvida, adicionar 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 para você e torne a sua vida como programador mais fácil. Se você está gostando do conteúdo do blog compartilha ele com os seus amigos que podem ser beneficiados por esses conteúdos  (ajude esse blog a crescer 🙂 ) e não esqueça de assinar a Newsletter 🙂.

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

Deixe seu Feedback!

Comentários