Login en tu App Rails Con FaceBook Y Devise

Standard

Muy buenos días, hoy vengo a compartirles un pequeño tutorial para poder hacer login en nuestra app web con Rails, Devise y Facebook.

Esta guía está basada en el tutorial que nos da el mismo devise, que puedes encontrar aqui.

La razón de este post, es que a pesar de que la guía es bastante clara, hay un par de detalles que no explica, por lo que trataré de llenar esos huecos de la mejor manera posible.

Lo primero que tenemos que hacer (si no lo hemos hecho ya) es instalar devise, para eso pueden seguir el tutorial original o seguir los siguientes pasos tomados de esta guía.

  1. Agregar a tu Gemfile
    gem 'devise'
  2. Instalamos las gemas
    bundle install
  3. Ejecutar el generador de devise en la carpeta de tu proyecto
    rails generate devise:install
  4. Ejecutar el generador de nuestro modelo (reemplazar MODEL con el nombre de tu modelo)
    rails generate devise MODEL
  5. Corremos las migraciones que nos ha generado devise
    rake db:migrate
  6. En nuestro ApplicationController agregamos esta linea
    before_action :authenticate_user!
  7. Ahora generamos las vistas para después poder modificar el login
    rails generate devise:views
  8. Listo

Estos pasos debieran ser suficientes para tener nuestra app con devise pidiendo un usuario y contraseña.

Ahora sí viene la parte de unir FB con nuestra aplicación.

  1. Agregamos la gema que necesitaremos a nuestro Gemfile
    gem 'omniauth-facebook'
  2. Instalamos las gemas
    bundle install
  3. Agregamos los campos necesarios a nuestro modelo
    <code>rails g migration AddOmniauthToUsers provider:index uid:index
    rake db:migrate</code>
  4. Agregamos la siguiente linea en este archivo config/initializers/devise.rb (más adelante explicaré de donde sacar el “APP_ID” y “APP_SECRET” para los que no sepan)
    config.omniauth :facebook, "APP_ID", "APP_SECRET"
  5. En nuestro modelo agregamos
    devise :omniauthable, :omniauth_providers => [:facebook]
  6. Agregamos en nuestro login
    <%= link_to "Sign in with Facebook", user_omniauth_authorize_path(:facebook) %>
  7. Vamos a nuestras rutas y modificamos las rutas de devise para que se vean así
    devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
  8. Creamos el archivo que contendrá este callback app/controllers/users/omniauth_callbacks_controller.rb y colocamos el código
    class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
      def facebook
        # Implementaremos este método en nuestro modelo más adelante
        @user = User.from_omniauth(request.env["omniauth.auth"])
    
        if @user.persisted?
          sign_in_and_redirect @user, :event => :authentication 
          set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
        else
          session["devise.facebook_data"] = request.env["omniauth.auth"]
          redirect_to new_user_registration_url
        end
      end
    
      def failure
        redirect_to root_path
      end
    end
  9. Una vez listo esto, vamos a agregar el método en nuestro modelo
    def self.from_omniauth(auth)
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.email = auth.info.email
        user.password = Devise.friendly_token[0,20]
      end
    end
  10. Ahora vamos a poner nuestra “APP_ID” y “APP_SECRET”
    1. Para esto vamos a el sitio de fb para desarrolladores y seleccionamos nuestra aplicación, se nos mostrará un dashboard y vendrán los datos que nos interesan.appdatos
    2. Ahora vamos a “Settings” en el menú que encontraremos del lado izquierdo.
    3. Después, en la parte inferior de la página encontraremos un botón para agregar una plataforma “+ Add Platform”.
    4. Llenaremos el formulario como sigue (Ojo!, que esta url es para poder hacer pruebas de manera local, se cambiaría por la url de tu servidor en caso de que sea otro) appserver
    5. Listo ya podemos hacer login en nuestra aplicación.

Pues bueno, si hay alguna duda sobre alguno de estos pasos, favor de hacer el comentario y trataré de responder en lo breve.

Saludos.

2 thoughts on “Login en tu App Rails Con FaceBook Y Devise

Leave a Reply

Your email address will not be published. Required fields are marked *