웹사이트 검색

Rails 애플리케이션에 Devise 및 OmniAuth를 구성하는 방법


소개

대부분의 Ruby on Rails 애플리케이션에는 사용자 등록 및 인증 메커니즘이 필요합니다. 이를 처음부터 개발하려면 많은 시간과 노력이 필요합니다. 고맙게도 Devise가 있습니다. Devise gem을 사용하면 몇 분 안에 본격적인 사용자 인증 시스템을 설정할 수 있습니다.

그러나 사용자가 새 계정을 만들지 않고도 응용 프로그램에 액세스할 수 있도록 하여 사용자를 더 행복하게 만들 수 있습니다. 기존 Facebook, Twitter, Amazon 또는 DigitalOcean 계정을 사용하여 간단히 로그인할 수 있습니다. 실제로 널리 사용되는 모든 OAuth 서비스 공급자와의 인증을 지원할 수 있습니다. OAuth 지원은 OmniAuth gem에서 제공합니다. 이 자습서에서는 Devise와 OmniAuth를 모두 사용하는 간단한 애플리케이션을 만듭니다.

전제 조건

시작하기 전에 최신 버전의 RVM, Ruby 및 Rails가 호스트에 설치되어 있는지 확인하십시오. 그렇지 않은 경우 RVM을 사용하여 Ubuntu 12.04 LTS에 Ruby on Rails를 설치하는 방법의 지침을 따르십시오.

이 튜토리얼은 Ruby 2.1.2 및 Rails 4.1.5에서 테스트되었습니다.

1단계 - 새 Rails 애플리케이션 생성

모든 Rails 애플리케이션을 별도의 디렉토리에 두는 것이 좋습니다.

지금 만들어야 합니다.

mkdir rails_apps
cd rails_apps

Rails 명령 실행을 시작하기 전에 RVM 환경을 초기화해야 합니다.

이 자습서를 수행하는 동안 휴식을 취하는 경우 터미널 세션을 다시 시작할 때마다 이 작업을 수행해야 합니다.

. ~/.rvm/scripts/rvm
rvm use ruby --default

새 애플리케이션을 myapp이라고 부르겠습니다. 응용 프로그램을 만든 후 cd를 사용하여 응용 프로그램의 기본 디렉터리로 들어갑니다.

rails new myapp
cd myapp

참고: 모든 Rails 명령은 애플리케이션의 디렉토리 내부에서 실행해야 합니다. 이 경우에는 ~/rails_apps/myapp입니다.

2단계 - 필요한 Gem을 Gemfile에 추가

Devise 및 OmniAuth gem이 필요합니다. 또한 지원하려는 모든 OAuth 서비스 공급자에 대해 별도의 gem이 필요합니다. 이 튜토리얼에서는 DigitalOcean을 사용한 로그인을 지원하므로 omniauth-digitalocean gem이 필요합니다.

~/rails_apps/myapp/Gemfile 파일 끝에 다음 줄을 추가합니다. nano를 텍스트 편집기로 사용할 수 있습니다.

gem 'therubyracer'
gem 'devise'
gem 'omniauth'
gem 'omniauth-digitalocean'

다른 공급자를 지원하려면 유사한 보석이 필요합니다. 예를 들어 Facebook을 지원하려면 omniauth-facebook이 필요합니다. 다음은 참조할 수 있는 몇 가지 보석입니다.

  • 트위터 - omniauth-트위터
  • 아마존 - omniauth-amazon
  • Google - omniauth-google
  • Github - omniauth-github

새로 추가된 gem을 설치합니다.

bundle install

3단계 - 애플리케이션에 기본 기능 추가

테스트를 위해 이 애플리케이션에 몇 페이지를 빠르게 추가해 보겠습니다. 궁극적으로 이러한 페이지는 로그인한 후에만 액세스할 수 있습니다.

이를 위해 Rails의 스캐폴딩 기능을 사용할 수 있습니다. rails g scaffold 명령을 사용하여 모델에 대한 세부 정보를 지정하기만 하면 Rails가 해당 모델에서 CRUD(Create Read Update Delete) 작업을 수행하는 완전한 기능의 페이지를 생성합니다. 즉, 모델 파일과 함께 모든 관련 컨트롤러 및 보기가 생성됩니다.

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

다음으로 이 애플리케이션의 루트를 정의해야 합니다.

~/rails_apps/myapp/config/routes.rb를 편집하고 root products#index 줄을 추가하여 기존 바로 아래 앱의 루트를 지정합니다. 리소스 라인. 주석 처리된 모든 행은 무시할 수 있습니다. 완료되면 파일의 활성 행은 다음과 같이 표시됩니다.

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

지금 애플리케이션을 테스트하십시오. 다음을 입력하여 개발 서버를 시작합니다.

rails s

브라우저에서 http://localhost:3000/을 방문하세요. 원격으로 개발하는 경우 localhost를 Droplet에 적합한 IP 주소 또는 도메인으로 바꾸십시오. 3000은 개발 서버의 기본 포트 번호입니다.

지금은 로그인이 필요하지 않습니다. "새 제품\을 클릭하여 몇 가지 제품을 추가합니다. 애플리케이션이 예상대로 작동하는 것에 만족하면 터미널로 돌아가서 Ctrl+C를 눌러 서버를 중지합니다.

4단계 - 장치 설정

Devise 인증 지원을 추가하려면 다음 명령을 입력하십시오.

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

이렇게 하면 로그인 및 등록 양식과 모든 관련 논리가 추가됩니다.

이제 우리 앱에는 사용자가 등록한 다음 로그인할 수 있는 기본 인증 시스템이 있습니다. 그러나 모든 페이지는 여전히 직접 액세스할 수 있습니다. 이를 변경하려면 ~/rails_apps/myapp/app/controllers/application_controller.rb를 편집하고 페이지를 제공하기 전에 수행해야 하는 작업으로 authenticate_user!를 추가합니다.

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

원하는 경우 rails s 명령으로 개발 서버를 다시 시작하고 http://localhost를 방문하여 새로 추가된 페이지를 확인할 수 있습니다. 3000/(다시, 자신의 도메인 또는 IP 주소 사용). 다음과 같은 페이지가 표시됩니다.

http://localhost:3000/users/sign_up을 방문하여 새 사용자로 등록할 수 있습니다.

5단계 - OmniAuth를 지원하도록 사용자 모델 업데이트

서버를 다시 시작한 경우 CTRL-C로 중지하십시오. Devise가 생성한 모델에 uid라는 새 열을 추가합니다.

rails g migration AddColumnsToUsers provider uid
rake db:migrate

6단계 - OAuth 서비스 공급자로부터 클라이언트 ID 및 클라이언트 암호 가져오기

서비스 제공업체의 웹사이트를 방문하여 애플리케이션을 등록하십시오. 모든 서비스 제공자는 등록 절차가 다릅니다. DigitalOcean의 경우 다음 자습서를 참조하십시오. DigitalOcean에서 사용자 또는 개발자로 OAuth 인증을 사용하는 방법

등록 과정에서 콜백 URL을 묻는 메시지가 표시됩니다. 공급자마다 별도의 콜백 URL이 있습니다. 다음은 몇 가지 인기 있는 서비스 제공업체의 콜백 URL입니다.

  • 디지털 오션: http://localhost:3000/users/auth/digitalocean/callback
  • Facebook: http://localhost:3000/users/auth/facebook/callback
  • 아마존: http://localhost:3000/users/auth/amazon/callback
  • 트위터: http://localhost:3000/users/auth/twitter/callback
  • Google: http://localhost:3000/users/auth/google/callback

localhost를 Droplet으로 확인되는 IP 주소 또는 도메인으로 바꾸십시오. 등록 프로세스가 끝나면 클라이언트 ID와 클라이언트 시크릿이 제공됩니다. 다음 단계에서 이 값을 사용합니다.

7단계 - Devise Initializer 업데이트

~/rails_apps/myapp/config/initializers/devise.rb를 편집하여 클라이언트 ID와 암호를 파일 하단의 end 줄 바로 앞에 추가합니다. mailer_sender를 자신의 서버 이름과 사용자가 있는 항목으로 업데이트하는 것도 좋은 생각입니다. 이 두 항목 외에는 다른 변경을 할 필요가 없습니다.

편집 후 파일은 다음과 같습니다(파일에 주석이 달린 행도 많음).

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

8단계 - 사용자 모델 업데이트

Devise가 생성한 사용자 모델은 우리가 사용하려는 서비스 제공자를 지정하기 위해 변경되어야 합니다. 기존 목록에 3개의 항목을 추가하고 있습니다(:omniauthable, :omniauth_providers => [:digitalocean], 그리고 추가 쉼표를 잊지 마세요!). 또한 인증 후 사용 가능한 정보를 추출하기 위해 from_omniauth라는 새 메서드를 만듭니다.

편집 후 ~/rails_apps/myapp/app/models/user.rb는 다음과 같아야 합니다.

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

파일을 저장합니다.

9단계 - 콜백 URL을 처리할 컨트롤러 추가

먼저 ~/rails_apps/myapp/config/routes.rb를 편집하고 devise_for 행을 업데이트하여 콜백을 처리할 컨트롤러의 이름을 지정합니다. 간단히 콜백이라고 부르겠습니다. 이제 파일은 다음과 같이 표시됩니다(주석 섹션 제외).

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

그런 다음 새 파일 ~/rails_apps/myapp/app/controllers/callbacks_controller.rb를 만듭니다.

다음 코드를 추가합니다.

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

더 많은 OAuth 공급자를 사용한 경우 각각에 대해 별도의 방법이 필요합니다. 메서드 이름은 공급자 이름과 일치해야 합니다. 예를 들어 Facebook에 대한 지원을 추가하려면 def facebook을 사용하여 메서드를 정의합니다.

이제 애플리케이션이 준비되었습니다. 서버를 다시 시작하십시오.

rails s

홈 페이지를 방문하십시오. 로그인 기능을 테스트 중이므로 Chrome 시크릿 창과 같이 저장된 데이터가 없는 세션에서 이 작업을 수행할 수 있습니다. Digitalocean으로 로그인 링크가 표시되어야 합니다. 그것을 클릭하십시오. DigitalOcean의 로그인 페이지로 리디렉션되어야 합니다. 로그인에 성공하면 자신의 애플리케이션으로 다시 리디렉션되고 제품 페이지가 표시됩니다.

결론

이제 사용자가 이메일 주소, 소셜 네트워킹 계정 또는 다른 인기 있는 서비스를 사용하여 로그인할 수 있는 앱에 대한 최신 사용자 인증 시스템이 있습니다.

이 앱을 Droplet에서 프로덕션으로 가져가기로 결정한 경우 여기에서 자습서를 참조할 수 있습니다. DigitalOcean 원 클릭 이미지로 Ruby on Rails 앱을 시작하는 방법. 새 Droplet에 앱을 추가하는 경우 6단계로 돌아가 프로덕션 서버의 콜백 URL로 DigitalOcean API 설정을 업데이트하는 것을 잊지 마십시오.