Cách cấu hình Devise và OmniAuth cho ứng dụng Rails của bạn
Hầu hết các ứng dụng Ruby on Rails đều yêu cầu cơ chế xác thực và đăng ký user . Việc phát triển những thứ này từ đầu đòi hỏi rất nhiều thời gian và nỗ lực - rất may, có Devise . Sử dụng đá quý Devise, bạn có thể cài đặt hệ thống xác thực user chính thức trong vòng vài phút.Tuy nhiên, bạn có thể làm cho user của bạn hạnh phúc hơn bằng cách cho phép họ truy cập ứng dụng của bạn mà không cần tạo account mới. Họ chỉ cần đăng nhập bằng account Facebook, Twitter, Amazon hoặc DigitalOcean hiện có của họ. Trên thực tế, bạn có thể hỗ trợ xác thực với bất kỳ nhà cung cấp dịch vụ OAuth phổ biến nào. Hỗ trợ OAuth được cung cấp bởi đá quý OmniAuth. Trong hướng dẫn này, ta sẽ tạo một ứng dụng đơn giản sử dụng cả Devise và OmniAuth.
Yêu cầu
Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt version RVM, Ruby và Rails mới nhất trên server của bạn . Nếu không, vui lòng làm theo hướng dẫn tại đây: Cách cài đặt Ruby on Rails trên Ubuntu 12.04 LTS với RVM
Hướng dẫn này đã được thử nghiệm với Ruby 2.1.2 và Rails 4.1.5.
Bước 1 - Tạo một ứng dụng Rails mới
Bạn nên có tất cả các ứng dụng Rails của bạn trong một folder riêng.
Bạn nên tạo một cái ngay bây giờ.
mkdir rails_apps cd rails_apps Bạn phải khởi tạo môi trường RVM trước khi bắt đầu phát lệnh Rails.
Nếu bạn tạm nghỉ khi làm theo hướng dẫn này, hãy nhớ làm điều này mỗi khi bạn khởi động lại phiên terminal của bạn .
. ~/.rvm/scripts/rvm rvm use ruby --default Hãy để ta gọi ứng dụng mới là myapp . Sau khi tạo ứng dụng, sử dụng cd để vào folder cơ sở của ứng dụng.
rails new myapp cd myapp Lưu ý: Tất cả các lệnh Rails phải được chạy từ bên trong folder ứng dụng của bạn, trong trường hợp này là ~ / rails_apps / myapp.
Bước 2 - Thêm Gems cần thiết vào Gemfile
Ta cần đá quý Devise và OmniAuth. Ngoài ra, bạn cũng cần một viên ngọc riêng cho mỗi nhà cung cấp dịch vụ OAuth mà bạn muốn hỗ trợ. Đối với hướng dẫn này, ta sẽ hỗ trợ đăng nhập bằng DigitalOcean, vì vậy ta cần đá quý omniauth-digitalocean .
Thêm các dòng sau vào cuối file ~/rails_apps/myapp/Gemfile . Bạn có thể sử dụng nano làm editor của bạn .
gem 'therubyracer' gem 'devise' gem 'omniauth' gem 'omniauth-digitalocean' Bạn cần những viên ngọc tương tự để hỗ trợ các nhà cung cấp khác. Ví dụ, để hỗ trợ Facebook, bạn cần omniauth-facebook . Dưới đây là một số loại đá quý như vậy để bạn tham khảo:
- Twitter - omniauth-twitter
- Amazon - omniauth-amazon
- Google - omniauth-google
- Github - omniauth-github
Cài đặt các viên ngọc mới được thêm vào.
bundle install Bước 3 - Thêm chức năng cơ bản vào ứng dụng
Hãy để ta nhanh chóng thêm một vài trang vào ứng dụng này để thử nghiệm. Cuối cùng, các trang này sẽ chỉ có thể truy cập được sau khi đăng nhập.
Ta có thể sử dụng tính năng giàn giáo của Rails cho việc này. Sử dụng lệnh rails g giàn giáo , ta chỉ cần chỉ định chi tiết về một mô hình và Rails tạo ra các trang đầy đủ chức năng để thực hiện các hoạt động CRUD (Create Read Update Delete) trên mô hình đó. Nói cách khác, tất cả các bộ điều khiển và chế độ xem liên quan được tạo cùng với file mô hình.
rails g scaffold Product name:string price:integer description:text rake db:migrate Tiếp theo, ta phải xác định root của ứng dụng này.
Chỉnh sửa ~/rails_apps/myapp/config/routes.rb và thêm root 'products#index' dòng root 'products#index' để chỉ định root của ứng dụng, ngay bên dưới dòng tài nguyên hiện có. Bạn có thể bỏ qua tất cả các dòng được comment . Khi bạn hoàn tất, các dòng hiện hoạt trong file sẽ giống như sau:
Rails.application.routes.draw do resources :products root 'products#index' end Hãy tiếp tục, kiểm tra ứng dụng của bạn ngay bây giờ. Khởi động server phát triển bằng lệnh :
rails s Truy cập http: // localhost : 3000 / từ trình duyệt của bạn. Nếu bạn đang phát triển từ xa, vui lòng thay thế localhost bằng địa chỉ IP hoặc domain thích hợp cho Server. 3000 là số cổng mặc định cho server phát triển.
Hiện tại, không cần đăng nhập. Thêm một vài sản phẩm bằng cách nhấp vào “Sản phẩm mới”. Khi thấy ổn rằng ứng dụng của bạn đang hoạt động như mong đợi, hãy quay lại terminal và nhấn Ctrl + C để dừng server .
Bước 4 - Cài đặt Devise
Nhập các lệnh sau để thêm hỗ trợ xác thực Devise.
rails generate devise:install rails generate devise User rake db:migrate Điều này thêm các biểu mẫu đăng nhập và đăng ký cũng như tất cả logic liên quan.
Ứng dụng của ta hiện có hệ thống xác thực cơ bản, nơi user có thể tự đăng ký và sau đó đăng nhập. Tuy nhiên, tất cả các trang vẫn có thể truy cập trực tiếp. Để thay đổi điều này, hãy chỉnh sửa ~/rails_apps/myapp/app/controllers/application_controller.rb và thêm authenticate_user! như một hành động phải được thực hiện trước khi phân phát bất kỳ trang nào.
class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :authenticate_user! end Nếu muốn, bạn có thể khởi động lại server phát triển bằng lệnh rails s và xem các trang mới được thêm này bằng cách truy cập http:// localhost :3000/ ( , sử dụng domain hoặc địa chỉ IP của bạn ). Bạn sẽ thấy một trang trông như thế này:
Bạn có thể đăng ký làm user mới bằng cách truy cập http://localhost:3000/users/sign_up .
Bước 5 - Cập nhật Mô hình user để hỗ trợ OmniAuth
Nếu bạn khởi động lại server , hãy dừng nó bằng CTRL-C. Thêm một cột mới có tên uid vào mô hình mà Devise đã tạo.
rails g migration AddColumnsToUsers provider uid rake db:migrate Bước 6 - Nhận ID khách hàng và bí mật khách hàng từ Nhà cung cấp dịch vụ OAuth
Truy cập trang web của nhà cung cấp dịch vụ và đăng ký ứng dụng của bạn tại đó. Tất cả các nhà cung cấp dịch vụ có các thủ tục đăng ký khác nhau. Đối với DigitalOcean, hãy tham khảo hướng dẫn tại đây: Cách sử dụng Xác thực OAuth với DigitalOcean với quyền là user hoặc nhà phát triển
Bạn cần cung cấp URL gọi lại trong quá trình đăng ký. Có một URL gọi lại riêng cho mỗi nhà cung cấp. Dưới đây là các URL gọi lại của một số nhà cung cấp dịch vụ phổ biến:
- 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 / callback
Vui lòng thay thế localhost bằng địa chỉ IP hoặc domain phân giải thành Server. Khi kết thúc quá trình đăng ký, bạn sẽ được cung cấp ID khách hàng và bí mật khách hàng của bạn . Bạn sẽ sử dụng các giá trị này trong bước tiếp theo.
Bước 7 - Cập nhật Bộ khởi tạo Devise
Chỉnh sửa ~/rails_apps/myapp/config/initializers/devise.rb để thêm ID ứng dụng client và bí mật ở cuối file , ngay trước dòng end . Bạn cũng nên cập nhật mailer_sender thành một thứ có tên server và user của bạn . Bạn không cần thực hiện bất kỳ thay đổi nào khác ngoài hai mục đó.
Sau khi chỉnh sửa, file của bạn sẽ trông như thế này (cũng sẽ có nhiều dòng chú thích trong file ):
Devise.setup do |config| #Replace example.com with your own domain name config.mailer_sender = 'mailer@example.com' require 'devise/orm/active_record' config.case_insensitive_keys = [ :email ] config.strip_whitespace_keys = [ :email ] config.skip_session_storage = [:http_auth] config.stretches = Rails.env.test? ? 1 : 10 config.reconfirmable = true config.expire_all_remember_me_on_sign_out = true config.password_length = 8..128 config.reset_password_within = 6.hours config.sign_out_via = :delete #Add your ID and secret here #ID first, secret second config.omniauth :digitalocean, "db381dc9990be7e3bc42503d0", "5b0824c2722b65d29965f1a1df" end Bước 8 - Cập nhật mô hình user
Mô hình User mà Devise đã tạo phải được thay đổi để chỉ định các nhà cung cấp dịch vụ mà ta muốn sử dụng. Ta đang thêm ba mục vào danh sách hiện có ( : omniauthable,: omniauth_providers => [: digitalocean] và đừng quên thêm dấu phẩy!). Ta cũng tạo một phương pháp mới có tên from_ mất ngủ để extract thông tin có sẵn sau khi xác thực.
Sau khi chỉnh sửa nó, ~/rails_apps/myapp/app/models/user.rb bạn sẽ trông giống như sau:
class User < ActiveRecord::Base devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :omniauthable, :omniauth_providers => [:digitalocean] 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 Lưu các file .
Bước 9 - Thêm bộ điều khiển để xử lý các URL gọi lại
Đầu tiên, hãy chỉnh sửa ~/rails_apps/myapp/config/routes.rb và cập nhật dòng devise_for để chỉ định tên của bộ điều khiển sẽ xử lý các lệnh gọi lại. Hãy để ta gọi nó đơn giản là gọi lại . Tệp của bạn bây giờ sẽ trông như thế này (trừ các phần được comment ):
Rails.application.routes.draw do devise_for :users, :controllers => { :omniauth_callbacks => "callbacks" } resources :products root 'products#index' end Sau đó, tạo một file mới ~/rails_apps/myapp/app/controllers/callbacks_controller.rb .
Thêm mã sau vào nó:
class CallbacksController < Devise::OmniauthCallbacksController def digitalocean @user = User.from_omniauth(request.env["omniauth.auth"]) sign_in_and_redirect @user end end Nếu bạn đã sử dụng nhiều nhà cung cấp OAuth hơn, bạn cần một phương pháp riêng cho từng nhà cung cấp đó. Tên của phương thức phải trùng với tên của trình cung cấp. Ví dụ, để thêm hỗ trợ cho Facebook, phương pháp của bạn sẽ được xác định bằng cách sử dụng def facebook .
Ứng dụng của bạn hiện đã sẵn sàng. Chạy lại server của bạn:
rails s Truy cập trang chủ của bạn. Vì ta đang thử nghiệm tính năng đăng nhập, bạn có thể cần thực hiện việc này trong một phiên mà không có dữ liệu được lưu trữ, chẳng hạn như Cửa sổ ẩn danh của Chrome. Bạn sẽ thấy liên kết Đăng nhập bằng Digitalocean . Nhấn vào nó. Bạn sẽ được chuyển hướng đến trang đăng nhập của DigitalOcean. Sau khi đăng nhập thành công, bạn sẽ được chuyển hướng trở lại ứng dụng của chính mình và trang sản phẩm sẽ được hiển thị.
Kết luận
Như vậy, bạn có một hệ thống xác thực user hiện đại cho ứng dụng của bạn , nơi user có thể đăng nhập bằng địa chỉ email, account mạng xã hội hoặc một dịch vụ phổ biến khác.
Nếu bạn quyết định đưa ứng dụng này vào production trên Server, bạn có thể tham khảo hướng dẫn tại đây: Cách chạy ứng dụng Ruby on Rails của bạn với Hình ảnh một cú nhấp chuột DigitalOcean . Nếu bạn thêm ứng dụng của bạn vào Server mới, đừng quên quay lại Bước 6 để cập nhật cài đặt API DigitalOcean của bạn với URL gọi lại của server production của bạn.
Các tin liên quan
