Rails 7 애플리케이션에서 Devise로 사용자 인증을 설정하는 방법

작성자는 DOnations 프로그램에 쓰기를 선택했습니다.

소개

OmniAuth 보석. 또한 Devise에는 잊어버린 암호 재설정, 로그인 횟수 및 타임스탬프 추적, 제한 시간 정의, 계정 잠금 등과 같은 기능을 위한 내장 모듈이 함께 제공됩니다.

Devise는 gem을 초기화하고 필요한 기능으로 User 모델을 생성하는 것처럼 사용자 인증을 간단하게 만듭니다. 처음부터 사용자 인증을 구축하려면 원하는 모든 기능에 대한 코드와 테스트를 작성하고 세션 처리, 쿠키 저장 및 데이터 보안 유지에 대한 모든 엣지 케이스를 처리해야 합니다. Devise gem을 사용하면 모든 작업을 직접 수행하지 않고 대신 앱 빌드에 집중할 수 있습니다.

이 튜토리얼에서는 Rails로 최소한의 웹 애플리케이션을 만들고 Devise를 설치하여 사용자가 계정을 만들고 로그인 및 로그아웃할 수 있도록 합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

• Ruby on Rails용 로컬 개발 환경입니다. Linux의 경우 튜토리얼 공식 Rails 문서를 따를 수 있습니다. Devise gem에는 Ruby 버전 2.1.0 이상이 필요합니다. 이 튜토리얼은 Ruby 버전 3.0.2 및 Rails 버전 7.0.3을 사용하여 테스트되었습니다.
• 컴퓨터에 설치된 Node.js. 자산 파이프라인과 같은 일부 Rails 기능은 JavaScript 런타임에 의존합니다. Node.js는 이 기능을 제공합니다. Ubuntu의 경우 MacOS에서 Node.js를 설치하고 로컬 개발 환경을 만드는 방법의 옵션 2에 설명된 대로 공식 PPA를 사용하여 Node.js를 설치합니다.
• Ruby 및 Ruby on Rails 프레임워크에 익숙합니다. Rails 가이드 시리즈에서 처음 몇 개의 튜토리얼을 확인할 수 있습니다.

1단계 — 새 Rails 애플리케이션 만들기

이 단계에서는 새 Rails 애플리케이션을 만들고 머신에서 로컬로 실행합니다. rails 명령줄 유틸리티를 사용하여 프로젝트를 초기화합니다.

터미널에서 다음 명령을 실행합니다.

rails new blog

rails new 명령은 blog 디렉토리 아래에 생성된 여러 파일과 폴더를 포함하는 새 Rails 프로젝트를 생성합니다. 이 중 하나는 프로젝트의 종속성을 포함하는 Gemfile입니다. 3단계 — Devise 설치 및 구성에서 Devise를 사용하도록 Gemfile을 구성합니다.

참고: 보석을 찾을 수 없음이라는 오류가 발생하면 프로젝트 디렉토리(cd 블로그)로 변경하고 다음을 실행하여 해결할 수 있습니다. bundle install, Gemfile에 나열된 모든 gem을 설치합니다.

즐겨 사용하는 텍스트 편집기에서 이 디렉토리를 열거나 터미널을 사용하여 탐색할 수 있습니다.

cd blog

Rails 애플리케이션을 시작하려면 프로젝트 디렉토리에서 rails server 명령을 사용하여 개발 서버를 시작하십시오.

bundle exec rails server

이 명령은 Rails 개발 서버를 시작합니다. Rails 시작 페이지에 액세스하려면 브라우저에서 http://localhost:3000을 여십시오. Rails는 대체 포트 번호를 제공하지 않은 경우 포트 3000을 사용하여 애플리케이션을 실행합니다.

**참고:*명령에 bundle exec를 추가하면 현재 번들의 컨텍스트에서 실행됩니다. 즉, 프로젝트별 Gemfile과 그 안에 정의된 gem 버전만 사용됩니다. 이는 동일한 gem의 다른 버전이 전역적으로 설치된 경우에 유용합니다.

이제 새 Rails 애플리케이션을 초기화했으며 이후 단계에서 사용자 인증을 추가할 것입니다. 다음 단계에서는 Devise를 추가한 후 샘플 애플리케이션을 쉽게 탐색할 수 있도록 Rails가 제공하는 기본 홈페이지를 사용자 정의 랜딩 페이지로 대체합니다. 새 랜딩 페이지를 생성한 후 사용자가 애플리케이션에 가입하고 로그인할 수 있는 링크를 추가합니다.

2단계 - 랜딩 페이지 만들기

이제 기본 Rails 애플리케이션이 있으므로 Rails가 제공하는 기본 페이지를 고유한 랜딩 페이지로 대체합니다. 맞춤형 랜딩 페이지를 사용하면 애플리케이션의 루트 URL에서 가입하고 로그인하기 위한 사용자 링크를 더 쉽게 표시할 수 있습니다. 이후 단계에서 로그인 및 가입 링크를 추가합니다.

랜딩 페이지를 만들려면 다음을 수행해야 합니다.

• config/routes.rb 파일에 경로를 추가합니다.
• 이 경로에 대한 요청을 처리할 HomeController를 만듭니다.
• 경로에 도달했을 때 렌더링할 보기 파일을 만듭니다.

프로젝트를 만들 때 생성된 routes.rb 파일에 루트 경로를 추가하는 것으로 시작합니다.

nano 또는 선호하는 텍스트 편집기를 사용하여 이전에 생성된 config/routes.rb 파일을 엽니다.

nano config/routes.rb

강조 표시된 줄을 추가합니다.

Rails.application.routes.draw do
  root to: "home#index" 
end

root to:는 루트 경로에 대한 요청을 처리할 컨트롤러 작업을 정의합니다. 이 경우 경로는 기본 포트인 http://localhost:3000입니다. 레일스 앱용. 이 경로에 대한 요청은 home 컨트롤러의 인덱스 작업에 의해 처리됩니다. 이 파일은 현재 존재하지 않으므로 다음에 app/controllers/home_controller.rb 파일을 생성합니다.

config/routes.rb를 저장하고 닫습니다. nano를 사용하여 CTRL+X를 눌러 종료하고 Y를 눌러 저장하고 ENTER를 눌러 파일 이름을 확인하고 닫습니다. 파일.

다음으로 app/controllers/home_controller.rb 파일을 만들고 다음 줄을 추가합니다.

class HomeController < ApplicationController
  def index
    render
  end
end

이것은 한 가지 일을 하는 인덱스 메서드가 있는 기본 HomeController입니다. 컨트롤러 작업과 연결된 보기 파일을 렌더링합니다.

이 경우 뷰 파일은 app/views/home/index.html.erb 파일이 됩니다. 이 파일과 app/views 디렉토리 안에 home 디렉토리를 만들어야 합니다.

home 컨트롤러 파일을 저장하고 닫습니다.

다음으로 app/views 디렉토리에 home 디렉토리를 만듭니다.

mkdir app/views/home/

home 디렉토리는 특정 Rails 컨트롤러에 대한 모든 보기를 보유합니다.

그런 다음 app/views/home/index.html.erb 파일을 만들고 다음 줄을 추가합니다.

<h1>Hello DigitalOcean!</h1>

app/views/home/index.html.erb는 홈의 색인 작업을 수행하는 보기 파일입니다. 컨트롤러가 렌더링됩니다. Ruby 코드를 포함할 수 있는 HTML 파일입니다. 특정 컨트롤러 작업에 대해 정의된 경로가 실행되면 이 보기 파일이 사용자의 브라우저에 렌더링됩니다.

파일을 저장하고 닫습니다.

루트 URL의 변경 사항을 보려면 브라우저에서 http://localhost:3000을 여십시오(또는 이미 열려 있는 경우 페이지를 새로 고치십시오). 업데이트된 방문 페이지는 다음과 유사합니다.

필요한 경우 이 페이지를 추가로 사용자 정의할 수 있지만 이 튜토리얼에서는 이것이 전부입니다.

자체 랜딩 페이지가 있는 간단한 Rails 애플리케이션이 있으므로 이제 Devise gem을 사용하여 사용자 인증을 추가합니다.

3단계 - Devise 설치 및 구성

이 단계에서는 gem과 함께 제공되는 메서드 및 헬퍼를 사용할 수 있도록 Rails 애플리케이션에 Devise를 설치 및 구성합니다. user_signed_in? 메서드를 사용하여 브라우저 쿠키에 저장된 로그인 사용자의 세션 정보를 확인합니다. 또한 current_user 헬퍼를 사용하여 현재 로그인한 계정의 세부 정보를 얻을 수 있습니다. 두 방법 모두 Devise에 내장되어 있으며 추가 코드를 작성하지 않고도 애플리케이션에서 직접 사용할 수 있습니다. Devise 프로젝트의 GitHub 페이지에서 이러한 도우미 메서드에 대해 자세히 알아볼 수 있습니다.

Devise를 설치하는 첫 번째 단계는 Ruby 프로젝트를 실행하는 데 필요한 모든 종속성에 대한 정보가 포함된 Gemfile에 gem을 추가하는 것입니다. 이 경우 Rails 애플리케이션을 초기화할 때 생성된 Gemfile에는 이미 Rails를 실행하는 데 필요한 모든 기본 gem이 있습니다.

그러나 Gemfile을 변경하기 전에 실행 중인 터미널에서 CTRL+C를 눌러 마지막 단계에서 시작한 개발 서버를 중지하십시오.

그런 다음 편집을 위해 Gemfile을 엽니다. Devise gem을 추가하려면 강조 표시된 줄을 파일의 끝을 향해 추가하되 development 및 test 그룹 외부에 추가합니다.

# ...

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

gem "devise" 

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

# ...

파일을 저장하고 닫습니다.

다음으로 터미널에서 bundle install 명령을 실행하여 새로 추가된 gem을 설치합니다. 프로젝트 디렉터리(blog)에서 다음 명령을 실행합니다.

bundle install

이 명령은 프로젝트에 Devise gem을 설치하여 rails 명령줄 유틸리티와 함께 devise 명령을 사용하고 인증을 구성할 수 있게 해줍니다.

프로젝트에서 Devise를 설정하려면 생성기 명령을 실행합니다.

bundle exec rails g devise:install

위 명령의 g 플래그는 generate를 나타내며 Rails 생성기를 호출하는 데 사용됩니다. 생성기는 시작점 역할을 할 수 있는 파일을 생성합니다. Rails 생성기에 대한 자세한 내용은 Rails 가이드를 참조하세요.

이전 명령은 초기화 파일과 Devise용 i18n 로케일 파일을 포함하여 여러 파일을 생성합니다. 아래에서 자세히 설명하는 초기화 파일은 앱을 처음 시작할 때 Devise를 구성하는 데 사용됩니다. i18n은 국제화를 의미하며, 이는 앱을 다른 언어로 실행하는 데 도움이 되는 표준입니다.

이 시점에서 다음과 같은 몇 가지 지침도 터미널에 인쇄됩니다.

Output
===============================================================================

Depending on your application's configuration some manual setup may be required:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

     * Not required for API-only Applications *

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

     * Not required *

===============================================================================

이 자습서에서는 이 수동 설정이 필요하지 않지만 이 단계의 뒷부분에서 notice 및 alert에 대한 플래시 메시지를 추가하게 됩니다.

Devise 설치를 완료했습니다. 다음으로 방금 생성된 Devise 초기화 파일에서 몇 가지를 구성해야 합니다.

devise:install 명령을 실행하면 Devise용 초기화 파일인 config/initializers/devise.rb가 생성됩니다. Rails 애플리케이션을 시작할 때마다 Rails는 모든 gem과 플러그인을 로드한 다음 모든 초기화 파일을 로드합니다. 이러한 이니셜라이저 파일에서 애플리케이션의 다른 부분에 대한 특정 설정을 구성할 수 있습니다. 이러한 초기화 프로그램은 모두 config/initializers/ 디렉토리에 있으며 Devise gem도 초기화 프로그램을 생성합니다.

편집을 위해 config/initializers/devise.rb를 엽니다. 파일에서 Devise.setup 블록을 찾고 다음 강조 표시된 줄을 추가합니다(Devise.setup 블록 내부에 다른 코드 블록이 있을 수 있지만 무시해도 됩니다. ):

Devise.setup do |config|
  # ...

  config.navigational_formats = ['*/*', :html, :turbo_stream]

  # ...
end

이 줄은 탐색 형식으로 turbo_stream을 추가합니다. 터보 스트림은 서버에서 렌더링된 HTML을 전송하고 JavaScript를 많이 사용하지 않고도 페이지를 렌더링할 수 있는 터보의 일부입니다. Devise 4.8.1이 Rails 7과 함께 작동하려면 이것을 추가해야 합니다. 그렇지 않으면 undefined method user_url 오류가 발생합니다.

파일을 저장하고 닫습니다.

다음으로 이전에 인쇄된 지침에서 강조 표시된 알림 및 경고 플래시 메시지도 추가합니다. alert 및 notice 태그는 "잘못된 암호\와 같은 메시지가 사용자 인터페이스에 표시되는 위치입니다. 애플리케이션에서 항상 사용자 지정 경고 메시지를 구현할 수 있습니다(예: 예를 들어 React와 함께 Axios 인터셉터를 프런트엔드로 사용하는 경우), 이 자습서에서는 최소한의 Devise 설정을 완료합니다.

편집을 위해 app/views/layouts/application.html.erb를 엽니다. <%= yield %> 바로 위에 있는 본문 태그 내부의 \notice\ 및 \alert\ 메시지에 대한 태그를 추가합니다.

...
<body>
  <p class="notice"><%= notice %></p> 
  <p class="alert"><%= alert %></p> 
  <%= yield %>
</body>

뷰가 브라우저에서 렌더링되면 <%= yield %> 블록이 뷰 파일의 콘텐츠로 대체됩니다. 보기 파일에는 p 태그만 있습니다. 이 수익 태그는 해당 콘텐츠로 대체됩니다.

파일을 저장하고 닫습니다.

이 단계에서는 프로젝트에 Devise를 설치하고 구성했습니다. 다음 단계에서는 Devise를 사용하여 애플리케이션에 대한 사용자 모델을 생성하고 사용자 인증을 설정합니다.

4단계 — Devise로 사용자 모델 만들기

이제 필요한 모델 파일을 생성하고 애플리케이션에서 users 테이블을 생성하기 위해 실행할 수 있는 마이그레이션을 생성하는 Devise로 사용자 모델을 생성할 준비가 되었습니다. 누군가 가입할 때마다 데이터베이스의 users 테이블에 새 레코드를 만들어야 합니다. 사용자 모델을 사용하면 프런트엔드 보기에서 이러한 데이터베이스 레코드를 조작할 수 있습니다.

이 단계에서는 사용자 모델을 생성하고 기본 구성을 검사한 다음 마이그레이션을 실행하여 데이터베이스를 업데이트합니다.

Rails는 models-view-controller(MVC) 프레임워크이므로 각 데이터베이스 테이블에는 테이블의 데이터 작업에 사용할 수 있는 연관된 클래스가 있습니다. 이 경우 users 테이블을 생성하면 User 모델을 사용하여 User.first 또는 User와 같은 작업을 수행할 수 있습니다. .find_by_email(sammy@example.com). Rails의 ApplicationRecord에서 상속된 일반 클래스를 만들어 이 모델을 만들 수 있지만 Devise로 사용자 모델을 생성하면 인증에 사용할 수 있는 많은 방법이 제공됩니다.

Devise 사용자를 생성하려면 다음 생성기 명령을 실행합니다.

bundle exec rails g devise user

다음 출력이 화면에 인쇄됩니다.

Output
invoke  active_record
create    db/migrate/20220908152949_devise_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
insert    app/models/user.rb
route  devise_for :users

출력은 Devise가 여러 파일을 생성하고 테스트를 생성하고 경로를 추가했음을 보여줍니다. 첫 번째 파일인 db/migrate/20220908152949_devise_create_users.rb는 데이터베이스에 users 테이블을 생성하기 위한 마이그레이션 파일입니다. Rails 마이그레이션 파일은 데이터베이스에서 수행해야 하는 변경 사항을 설명합니다. 각 마이그레이션의 파일 이름에는 타임스탬프가 포함되어 있어 Rails가 변경 순서를 알 수 있습니다.

Devise는 또한 동일한 테스트와 함께 사용자 모델 파일(app/models/user.rb)을 만들었습니다. 출력의 마지막 줄은 경로가 기존 config/routes.rb 파일에 추가되었음을 나타냅니다. Devise는 devise_for :users 도우미를 사용하여 /users/sign_up 및 /users/sign_out과 같은 모든 경로를 자동으로 추가합니다.

마이그레이션 파일을 실행하고 데이터베이스에 users 테이블을 생성하기 전에 이렇게 생성된 파일을 검토해 보겠습니다. 이렇게 하면 Devise가 생성한 구성을 이해하여 마이그레이션을 실행할 때 진행되는 상황을 알 수 있습니다.

먼저 마이그레이션 파일(db/migrate/20220908152949_devise_create_users.rb)을 열어 기본 코드를 검토합니다.

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

Devise에는 암호 재설정 토큰 필드 및 마지막 토큰 전송 시간 등과 같은 많은 유용한 옵션이 포함되어 있습니다. 이메일 확인, 로그인 시도 실패 후 사용자 잠금, 로그인 세부 정보 추적과 같은 기능에 대한 라인도 있습니다.

변경할 필요가 없으므로 마이그레이션 파일을 닫습니다.

Devise는 User 모델 파일도 생성했습니다. 이는 app/models/ 디렉토리에서 사용할 수 있습니다.

app/models/user.rb 모델 파일을 열어 기본 코드를 검토합니다.

class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable
end

사용자 모델이 작동하는 방식을 구성하기 위해 몇 가지 옵션이 Devise에 의해 추가되었습니다. 기본 모듈(database_authenticable, registerable, recoverable, rememberable 및 validatable) 이미 포함되어 있습니다. 마이그레이션 파일에서 본 추가 기능에 해당하는 몇 가지 추가 옵션이 주석 처리되어 있습니다. 애플리케이션에 필요한 기능의 양에 따라 이러한 모듈을 모델 파일에 추가하고 마이그레이션을 구성할 수 있습니다.

이것이 기본 모듈이 하는 일입니다.

• database_authenticable: 사용자는 로그인 및 암호 필드로 자신을 인증할 수 있습니다. 암호화된 암호는 데이터베이스에 저장됩니다.
• 등록 가능: 사용자는 자신을 등록하고 계정을 수정하거나 삭제할 수 있습니다.
• 복구 가능: 사용자는 자격 증명을 잊어버린 경우 암호를 재설정하고 계정을 복구할 수 있습니다.
• 기억 가능: 이 모듈은 브라우저 쿠키에 정보를 저장하여 사용자의 세션을 기억합니다.
• validatable: 이 모듈은 사용자의 이메일 및 비밀번호 필드에 대한 유효성 검사를 제공합니다. (예를 들어 모델에 사용자 지정 유효성 검사를 정의하지 않은 경우에도 애플리케이션에서 비밀번호를 6자 이상으로 요구합니다.)

이러한 기본 모듈은 방금 생성한 사용자 모델에 포함되어 있습니다. Devise GitHub 리포지토리에서 Devise와 함께 제공되는 전체 모듈 목록을 찾을 수 있습니다.

변경할 필요가 없으므로 User 모델 파일을 닫습니다.

또 다른 업데이트는 config/routes.rb 파일이 users에 대한 devise_for 줄을 추가하도록 수정되었다는 것입니다.

Rails.application.routes.draw do
  devise_for :users

  root "home#index"
end

이는 /users/sign_in, /users/sign_out 및 /users/password/new와 같은 사용자 인증과 관련된 모든 필수 경로를 정의하는 유용한 방법입니다. . Devise가 모든 것을 처리하고 경로 파일을 깨끗하게 유지합니다. devise_for :users를 추가하면 이러한 모든 경로로 자동 변환되는 방식을 이해하려면 Devise GitHub 저장소에서 메서드의 소스 코드를 확인할 수 있습니다.

여기서 변경할 필요가 없으므로 config/routes.rb 파일을 닫습니다.

애플리케이션에 정의된 경로를 알아보려면 다음 명령을 실행하여 경로를 나열할 수 있습니다.

bundle exec rails routes

이 명령은 모든 애플리케이션 경로와 이러한 경로가 처리되는 컨트롤러를 인쇄합니다. 인증의 경우 이러한 모든 경로는 Devise에서 생성되었으며 수동으로 추가할 필요가 없습니다.

출력은 길지만 다음은 일부 경로를 보여주는 스니펫입니다.

출력에 나열된 경로는 경로 파일에 devise_for :users 행을 포함할 때 Devise에서 추가한 경로입니다. 로그인, 가입, 비밀번호 재설정 등과 같은 작업을 위한 경로입니다.

이제 Devise에서 생성된 파일 및 구성을 검토했으므로 다음 명령을 사용하여 이 단계 시작 시 생성한 마이그레이션을 실행할 수 있습니다.

bundle exec rails db:migrate

위의 명령은 데이터베이스에 대한 각 마이그레이션 파일의 모든 변경 사항을 적용합니다. 변경 사항은 파일에 정의된 것처럼 차례로 적용해야 합니다. Rails는 마이그레이션이 실행되어야 하는 순서를 알아야 하며, 이것이 파일 이름에 타임스탬프가 포함된 파일이 생성되는 이유입니다.

다음과 같은 출력이 화면에 인쇄됩니다.

Output
== 20220908152949 DeviseCreateUsers: migrating ================================
-- create_table(:users)
 -> 0.0040s
-- add_index(:users, :email, {:unique=>true})
 -> 0.0012s
-- add_index(:users, :reset_password_token, {:unique=>true})
 -> 0.0011s
== 20220908152949 DeviseCreateUsers: migrated (0.0074s) =======================

마이그레이션이 실행되면 데이터베이스가 설정됩니다. 프로젝트에서 사용자 인증을 설정하는 데 필요한 모든 작업을 완료했습니다.

이 시점에서 Rails 서버를 다시 시작합니다.

bundle exec rails server

앞에서 언급한 초기화 파일은 Rails가 부팅될 때만 로드됩니다. Rails가 새 Devise 초기화 파일을 로드하고 사용자 인증이 작동하도록 모든 것을 설정할 수 있도록 서버를 다시 시작해야 합니다.

브라우저에서 http://localhost:3000/users/sign_up로 이동하면 이메일과 비밀번호를 입력하여 계정을 생성할 수 있는 가입 양식이 표시됩니다. . (다음 단계에서는 독자가 이 URL을 더 쉽게 탐색할 수 있도록 랜딩 페이지에 가입하고 로그인하기 위한 버튼을 추가합니다.)

인증을 테스트하려면 sammy@example.com과 같은 테스트 이메일과 비밀번호를 입력하세요.

가입하면 Hello DigitalOcean!이 표시되는 루트 페이지로 리디렉션됩니다. 다음과 같이 성공적으로 가입했다는 메시지도 표시됩니다.

이 가입 성공 알림은 application.html.erb에 추가한

<%= notice %>

이 시점에서 프로젝트에서 Devise로 사용자 인증을 구성하고 샘플 계정을 사용하여 가입했습니다. 애플리케이션의 요구 사항을 충족하도록 Devise를 구성한 반면 Devise는 이 사용자 가입 경험을 용이하게 하는 경로, 보기 및 컨트롤러를 생성했습니다.

이제 가입 프로세스가 예상대로 작동하는 것을 확인했으므로 다음 단계는 이 인증을 2단계에서 만든 랜딩 페이지에 추가하는 것입니다. 다음 단계에서는 가입 페이지를 랜딩 페이지와 연결합니다. 여기에서 해야 했던 것처럼 사용자가 가입하기 위해 특정 URL로 이동할 필요가 없습니다.

5단계 - 방문 페이지에 인증 연결

프로젝트에 모든 기능이 설정되어 있지만 Devise가 생성한 랜딩 페이지 페이지를 연결해야 합니다. 이전 단계에서 수동으로 /users/sign_up 페이지를 방문하여 로그인했습니다. 이 단계에서는 방문 페이지에 필요한 링크를 추가하여 모든 페이지를 함께 연결합니다. 또한 상태에 따라 애플리케이션에 로그인하거나 로그아웃할 수 있는 링크를 사용자에게 조건부로 표시합니다.

Devise의 몇 가지 도우미 메서드를 사용하여 이 작업을 수행할 수 있습니다. Devise gem에는 직접 모든 것을 구현하지 않고도 사용할 수 있는 많은 도우미 메서드가 있습니다. 이렇게 하면 코드를 더 쉽게 읽고 유지 관리할 수 있습니다.

먼저 사용자가 로그인했는지 확인하는 코드를 추가합니다. 로그인되어 있으면 랜딩 페이지에 이메일과 애플리케이션에서 로그아웃할 수 있는 링크가 표시됩니다. 사용자가 로그인하지 않은 경우 랜딩 페이지에 로그인 페이지로 이동하는 링크가 표시됩니다.

편집을 위해 app/views/home/index.html.erb 파일을 열고 강조 표시된 줄을 추가합니다.

<% if user_signed_in? %> 
 <div> Welcome <%= current_user.email %> </div> 
  <%= button_to "Sign out", destroy_user_session_path, method: :delete %> 
<% else %>
  <%= button_to "Sign in", new_user_session_path %> 
<% end %>
<h1>Hello DigitalOcean!</h1>

user_signed_in?은 Devise의 컨트롤러와 연결된 도우미 메서드에서 가져옵니다. 사용자가 로그인했는지 여부를 확인하고 부울 true 또는 false 값을 반환합니다. 이 결과를 사용하여 로그인한 사용자의 계정 정보를 표시하는 것과 같은 앱의 다른 기능을 프로그래밍할 수 있습니다. 이 도우미 메서드에 대한 자세한 내용은 Devise GitHub 저장소에서 소스 코드를 확인할 수 있습니다.

current_user는 현재 애플리케이션에 로그인한 사용자의 세부정보에 액세스하는 Devise 도우미입니다. 예를 들어 sammy@example.com으로 로그인하면 current_user 도우미는 sammy@example.com에 대한 사용자 모델을 반환합니다. 따라서 current_user.email을 사용하면 sammy@example.com이 결과로 표시됩니다. Devise를 사용하면 이 논리를 처음부터 구현하지 않아도 되므로 시간과 노력이 절약됩니다.

마지막으로 이 코드를 사용하여 랜딩 페이지에 로그인 및 로그아웃 버튼을 추가했습니다. user_signed_in? 도우미 메서드의 결과에 따라 새로 추가된 로그인 및 로그아웃 버튼을 사용하여 로그인하거나 로그아웃하는 옵션이 표시됩니다.

사용자를 특정 경로로 안내하는 버튼을 정의하기 위해 button_to 메서드를 사용하고 있습니다. 또한 도우미 메서드를 사용하여 이러한 경로를 가져오고 있습니다. destroy_user_session_path는 /users/sign_out으로 확인되고 new_user_session_path는 /users/sign_in으로 확인됩니다 . (이전 단계에서 언급한 대로 bundle exec rails route를 실행하여 경로 URL 헬퍼의 전체 목록을 검토할 수 있습니다.)

파일을 저장하고 닫습니다.

변경 사항을 검토하려면 브라우저에서 페이지를 새로 고칩니다.

애플리케이션 가입을 아직 시도하지 않은 경우 페이지에서 로그인 버튼을 클릭하여 /users/sign_in 경로를 방문할 수 있습니다. 여기에서 하단의 가입 링크를 클릭하여 새 계정 만들기를 진행할 수 있습니다. sammy@example.com과 같은 테스트 이메일과 비밀번호를 입력합니다. 가입하면 랜딩 페이지로 다시 이동합니다. 이제 랜딩 페이지에는 다음과 같이 로그아웃 버튼과 함께 현재 로그인한 사용자의 이메일 주소가 표시됩니다.

성공적으로 가입했습니다라는 메시지도 표시됩니다.

이를 통해 Devise gem을 성공적으로 통합하고 애플리케이션에서 사용자 인증을 설정했습니다.

결론

이 자습서에서는 Devise를 사용하여 Rails 앱에 사용자 인증을 추가했습니다. Devise의 도우미 메서드를 사용하여 사용자가 계정을 만들고 가입하고 로그아웃할 수 있는 앱을 만들었습니다.

Devise와 추가 도우미 및 메서드를 더 잘 이해하려면 Devise GitHub 리포지토리에서 README 파일을 확인하세요. 이 튜토리얼의 다음 단계로 \Hello World! 사용자가 로그인했는지 여부에 따라 Hello username과 같은 형식으로 페이지에서 인사말을 표시합니다.

DigitalOcean Community GitHub 리포지토리에서 이 프로젝트의 코드를 찾을 수 있습니다.