Đăng nhập facebook, google trong rails

Tóm tắt

Trong bài viết sẽ cung cấp các bước cơ bản để thực hiện đăng nhập vào trang web của bạn thông qua facebook.

1. Create a New Rails Application

Tạo mới ứng dụng để thực hiện đăng nhập vào facebook

rails new myapp
cd myapp

2. Add the Required Gems to the Gemfile

Trong ứng dụng này sẽ sử dụng các gem : Devise, OmniAuth. Ngoài ra trong ứng dụng này còn sử dụng các gem tách biệt khác để đăng nhập vào facebook, google plus hoặc twitter. Tuy nhiên trong ứng dụng này sẽ demo gem omniauth-facebook

Với việc đăng nhập qua các api khác. Ví dụ như omniauth-digitalocean để đăng nhập qua digitalocean. Tuy nhiên lưu ý hiện này một số trang (google plus) cung cấp api đăng nhập và việc kiểm tra đăng nhập thông qua oauth2 do đó tuy từng api cần sử dụng gem hợp lý để đăng nhập. Sau đây là mốt số ví dụ về các gem tương ứng với các trang khac nhau:

• Twitter - omniauth-twitter
• Amazon - omniauth-amazon
• Google - omniauth-google-oauth2
• Github - omniauth-github

Chạy bundle để cài đặt các gem vừa được thêm vào

bundle install

3. Add Basic Functionality to the Application

Tại bước này trong ứng dụng sẽ thêm vào model và các action. Có thể thêm vào bằng cách sự dụng câu lệnh "rails g scaffold"để thêm. Với câu lệnh scaffold, rails sẽ sinh ra đẩy đủ các phương thức CRUD (Create Read Update Delete). Có thể hiểu, câu lệnh trên sẽ tạo ra đầy đủ mối quan hệ giữa controller, view từ model vừa được khai báo

rails g scaffold Product name:string price:integer description:text
rake db:migrate

Sửa file routes(~/rails_apps/myapp/config/routes.rb) để khai báo đường dẫn mặc định(root) cho trang web thêm dòng sau : root "products#index" . Sau khi thêm file routes sẽ có định dạng như sau :

Rails.application.routes.draw do
  resources :products
  root "products#index"
end

Chạy thử ứng dụng bằng câu lệnh sau : rails s

Trong browser vào địa chỉ http://localhost:3000/ để kiểm tra ứng dụng đã chạy thành công chưa. Tuy nhiên ứng dụng lúc này cần kiểm tra login để thực hiện các hành động ví dụ như thêm, xóa sửa hàng

4. Set Up Devise

Trong file gem thêm dòng sau :

gem "devise"

Chạy các câu lệnh sau để cài đặt gem devise

bundle install
rails generate devise:install
rails generate devise User
rake db:migrate

Gem devise sẽ hỗ trợ việc thêm các trang sign-in, sign-up cho ứng dụng . Tuy nhiên các chức năng vẫn có thể truy cập một cách dễ dang, bằng cách thêm đoạn sau đê kiểm tra user đã đăng nhập chưa

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :authenticate_user!
end

Chạy lại server để kiểm tra ứng dụng của bạn đã kiểm tra đăng nhập trước khi thực hiện các hành động khác. Tiếp tục vào browser, localhost:3000 để kiểm tra.

Để tạo một tài khoản mới trong đường link :http://localhost:3000/users/sign_up

5.Update the User Model to Support OmniAuth

Nếu bạn đang chạy server thì hãy dừng lại bằng cách sử dụng câu lệnh ctrl + c. Thêm trường dữ liệu trong bảng User (Cột mới thêm uid

rails g migration AddColumnsToUsers provider uid
rake db:migrate

6.Get the Client ID and Client Secret from the OAuth Service Provider

Để sử dụng OAuth Authentication với vai trò là Developer. Các khai bao callback url cho ứng dụng của các api . Với mỗi api callback url khác nhau ví dụ :

• Digital Ocean: http://localhost:3000/users/auth/digitalocean/callback
• Facebook: http://localhost:3000/users/auth/facebook/callback
• Amazon: http://localhost:3000/users/auth/amazon/callback
• Twitter: http://localhost:3000/users/auth/twitter/callback
• Google: http://localhost:3000/users/auth/google_oauth2/callback

7. Update the Devise Initializer

Config file devise của ứng dụng bằng cách thêm dòng sau:

config.omniauth :digitalocean, facebook_app_id, facebook_app_secret

8. Update the User Model

Trong ứng dụng cần khai báo rõ ràng các service cần thiết để thiết lập để đăng nhập thông qua các api

class User < ActiveRecord::Base
  devise :database_authenticatable, :registerable,
    :recoverable, :rememberable, :trackable, :validatable,
    :omniauthable, :omniauth_providers => [:facebook]
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.email = auth.info.email
      user.password = Devise.friendly_token[0,20]
    end
  end
end

Save file để tiếp tục

9.Add a Controller to Handle the Callback URLs

Sửa routes và khai báo controller để xử lý callback trả về

Rails.application.routes.draw do
  devise_for :users, :controllers => { :omniauth_callbacks => "callbacks" }
  resources :products
  root 'products#index'
end

Tạo file mới :~/rails_apps/myapp/app/controllers/callbacks_controller.rb

thêm đoạn code sau:

class CallbacksController < Devise::OmniauthCallbacksController
  def create
    @user = User.from_omniauth(request.env["omniauth.auth"])
    sign_in_and_redirect @user
  end
end

Chạy ứng dụng để xem thành qủa : rails s

Tham khảo

Bài viết có sự tham khảo từ blog : https://www.digitalocean.com/community/tutorials/how-to-configure-devise-and-omniauth-for-your-rails-application