Rails 7アプリケーションでDeviseを使用したユーザー認証のセットアップ方法

著者は「Write for Donationsプログラム」の一環として、寄付を受ける団体として「Girls Who Code」を選びました。

イントロダクション

Devise(デバイス)は、Ruby on Railsアプリケーション向けの認証ソリューションです。独自にすべて行う必要なく、プロダクションレベルのユーザー認証をプロジェクトに設定するのに役立ちます。Deviseには、ユーザーセッションの管理やOmniAuth gemを使用したサードパーティのOAuthサインインのサポートを含む、多くの便利な機能があります。Deviseは、パスワードのリセット、サインイン回数やタイムスタンプの追跡、タイムアウトの定義、アカウントのロックなどの機能に対する組み込みモジュールも提供しています。

Deviseは、ジェムの初期化と必要な機能を持つユーザーモデルの作成だけで、ユーザー認証を非常に簡単にします。もしもゼロからユーザー認証を作りたい場合、希望する全ての機能に対してコードとテストを書く必要があり、セッションの処理、クッキーの保存、データの安全性の全てのエッジケースを扱わなければなりません。Deviseジェムを使うことで、これらを全て自分で対応する必要がなくなり、代わりにアプリケーションの開発に集中することができます。

このチュートリアルでは、Railsを使用して最小限のWebアプリケーションを作成し、Deviseをインストールします。これにより、ユーザーはアカウントを作成し、アカウントにサインインし、サインアウトすることができるようになります。

前提条件

このチュートリアルを完了するためには、以下が必要です:

  • A local development environment for Ruby on Rails. For Linux, you can follow our tutorial How To Install Ruby on Rails with rvm on Ubuntu 20.04 or use the rvm product docs for installing on Mac or Windows. You can also refer to the Ruby project docs to install Ruby directly in your system. To install the Rails gem, you can use the official Rails documentation. The Devise gem requires Ruby version 2.1.0 or greater; this tutorial was tested using Ruby version 3.0.2 and Rails version 7.0.3.
  • Node.js installed on your machine. A few Rails features, such as the Asset Pipeline, depend on a JavaScript Runtime. Node.js provides this functionality. For Ubuntu, install Node.js using the official PPA, as explained in option 2 of How To Install Node.js on Ubuntu 20.04. For Mac OS, follow our guide How To Install Node.js and Create a Local Development Environment on MacOS.
  • Familiarity with Ruby and the Ruby on Rails framework. You can check out the first few tutorials from our series Rails on Containers, or you can use the official Rails Guides.

ステップ1 — 新しいRailsアプリケーションの作成

このステップでは、新しいRailsアプリケーションを作成し、ローカルマシン上で実行します。プロジェクトを初期化するために、railsコマンドラインユーティリティを使用します。

ターミナルから次のコマンドを実行してください。

  1. rails new blog

 

レールズの新しいコマンドは、ディレクトリの”blog”の下に新しいレールズプロジェクトを作成します。このプロジェクトには、いくつかの生成されたファイルとフォルダが含まれます。そのうちの1つがGemfileであり、プロジェクトの依存関係を含んでいます。Step 3のDeviseのインストールと設定で、Gemfileを構成します。

Note

注意:「gemが見つからない」というエラーが表示された場合、プロジェクトディレクトリに移動して(cd blog)、bundle installコマンドを実行することで解決できます。これにより、Gemfileにリストされているすべてのgemがインストールされます。

このディレクトリはお気に入りのテキストエディタで開くことも、ターミナルを使用してそれに移動することもできます。

  1. cd blog

 

Railsアプリケーションを始めるには、プロジェクトディレクトリからrails serverコマンドで開発サーバーを起動してください。

  1. bundle exec rails server

 

このコマンドを実行すると、Railsの開発用サーバーが起動します。ブラウザでhttp://localhost:3000を開くと、Railsのウェルカムページにアクセスできます。もし代替ポート番号を指定していない場合、Railsはアプリケーションを実行するためにポート3000を使用します。

Note

以下の文を日本語で自然に表現してください。一つの選択肢で結構です:

注意:コマンドの末尾に「bundle exec」と追加すると、そのコマンドは現在のバンドルのコンテキストで実行されます。これにより、プロジェクト固有のGemfileとその中で定義されたgemのバージョンだけが使用されます。これは、同じgemの異なるバージョンがグローバルにインストールされている場合に便利です。

現在新しいRailsアプリケーションを初期化しました。後のステップでユーザー認証を追加します。次のステップでは、Railsが提供するデフォルトのホームページをカスタムのランディングページに置き換えます。これにより、Deviseを追加した後にサンプルアプリケーションをより簡単にナビゲートできます。新しいランディングページを作成した後、ユーザーがアプリケーションにサインアップやサインインするためのリンクを追加します。

ステップ2 — ランディングページの作成

Railsアプリケーションの基本ができたので、Railsが提供するデフォルトのページを独自のランディングページに置き換えます。カスタムのランディングページを作成することで、ユーザーにアプリケーションのルートURLでのサインアップとサインインのリンクを表示しやすくします。後の手順で、サインインとサインアップのリンクを追加します。

ランディングページを作成するには、以下の手順を行う必要があります。

  • Add the route in the config/routes.rb file.
  • Create a HomeController which will handle the requests to this route.
  • Create a view file to be rendered when you hit the route.

プロジェクトを作成する際に生成されたroutes.rbファイルにルートパスを追加することから始めます。

お好きなテキストエディタ(nano含む)を使用して、前に生成されたconfig/routes.rbファイルを開いてください。

  1. nano config/routes.rb

 

ハイライトされた行を追加してください。

以下の設定ファイルを日本語で言い換えてください。1つのオプションで構いません。

config/routes.rb → 設定ルート.rb

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

ルート(root):ルートパスへのリクエストを処理するコントローラーアクションを定義します。この場合、ルートはhttp://localhost:3000であり、これはRailsアプリのデフォルトのポートです。このルートへのリクエストは、homeコントローラーのindexアクションで処理されます。現時点ではこのファイルは存在していないので、次にapp/controllers/home_controller.rbファイルを作成します。

config/routes.rbを保存して閉じます。nanoを使用して、CTRL+Xで終了し、保存するためにYを押し、ファイル名を確認してファイルを閉じる際にはENTERを押してください。

次に、app/controllers/home_controller.rbファイルを作成し、次の行を追加してください。

アプリのコントローラであるhome_controller.rbに相当する日本語の表現を提供してください。
class HomeController < ApplicationController
  def index
    render
  end
end

これは基本的なHomeControllerで、indexメソッドが1つのことを行います:コントローラーのアクションに関連付けられたビューファイルを表示します。

この場合、ビューファイルはapp/views/home/index.html.erbファイルになります。このファイルと、app/viewsディレクトリ内にhomeディレクトリを作成する必要があります。

ホームコントローラーファイルを保存して閉じる。

次に、app/viewsディレクトリ内にホームディレクトリを作成します。

  1. mkdir app/views/home/

 

特定のRailsコントローラーのビューはホームディレクトリに保存されます。

その後、app/views/home/index.html.erbファイルを作成し、以下の行を追加してください。

「app/views/home/index.html.erb」を日本語で言い換えると、以下のようになります。1つのオプションを提供します:

「アプリ/ビュー/ホーム/インデックス.html.erb」

<h1>Hello Silicon Cloud!</h1>

app/views/home/index.html.erbは、Homeコントローラーのindexアクションがレンダリングするビューファイルです。ここではRubyコードを埋め込むことができるHTMLファイルです。特定のコントローラーアクションに対して定義されたルートが呼び出されると、このビューファイルがユーザーのブラウザで表示されます。

ファイルを保存して閉じてください。

ルートURLの変更を確認するには、ブラウザでhttp://localhost:3000を開いてください(既に開いている場合はページを更新してください)。更新されたランディングページは、以下のようになります。

The home page of the application, rendering the index.html.erb file

必要に応じて、このページをさらにカスタマイズすることができますが、このチュートリアルではこれだけで十分です。

簡単なRailsアプリケーションと独自のランディングページを持っているので、Devise gemを使ってユーザー認証を追加します。

ステップ3 — Deviseのインストールと設定

このステップでは、DeviseをRailsアプリケーションにインストールして設定します。これにより、gemに付属しているメソッドとヘルパーを使用することができます。user_signed_in?メソッドを使用して、ブラウザのクッキーに保存されているサインインしているユーザーのセッション情報を確認します。また、current_userヘルパーを使用して、現在サインインしているアカウントの詳細を取得します。両方のメソッドはDeviseに組み込まれており、余分なコードを書かずに直接アプリケーションで使用できます。これらのヘルパーメソッドの詳細については、DeviseプロジェクトのGitHubページでさらに学ぶことができます。

Deviseをインストールするための最初の手順は、Gemfileにgemを追加することです。Gemfileには、Rubyプロジェクトを実行するために必要なすべての依存関係に関する情報が含まれています。この場合、Railsアプリケーションを初期化する際に、生成されたGemfileには、Railsの実行に必要なすべての基本的なgemがすでに含まれています。

しかし、Gemfileを変更する前に、最後のステップで開始した開発サーバーを実行しているターミナルでCTRL+Cを押して停止してください。

その後、編集のためにGemfileを開いてください。Deviseのgemを追加するには、ファイルの最後の方に、開発とテストのグループの外側にハイライトされた行を追加してください。

ジェムファイル

# ...

# 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

# ...

ファイルを保存して閉じてください。

次に、ターミナルでバンドルインストールコマンドを実行して、新しく追加されたジェムをインストールします。プロジェクトディレクトリ(ブログ)から、以下のコマンドを実行してください。

  1. bundle install

 

このコマンドは、プロジェクトにDeviseのgemをインストールします。これにより、railsのコマンドラインユーティリティでdeviseコマンドを使用し、認証を設定することができます。

プロジェクトでDeviseをセットアップするには、ジェネレーターコマンドを実行してください。

  1. bundle exec rails g devise:install

 

上記のコマンドでの「g」フラグは、生成を表し、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 * ===============================================================================

このチュートリアルでは、この手順ではマニュアル設定は必要ありませんが、後で通知と警告のためのフラッシュメッセージを追加します。

Deviseのインストールが完了しました。次に、生成されたDevise初期化ファイルでいくつかの設定を行う必要があります。

デバイス:インストールコマンドを実行すると、Deviseの初期化ファイルであるconfig/initializers/devise.rbが生成されます。Railsアプリケーションを起動するときに、Railsはすべてのgemやプラグインをロードし、その後初期化ファイルをロードします。これらの初期化ファイルを使用して、アプリケーションのさまざまな部分の特定の設定を行うことができます。これらの初期化ファイルはすべてconfig/initializers/ディレクトリに存在し、Devise gemもその初期化ファイルをここに作成します。

編集するためにconfig/initializers/devise.rbを開く。ファイル内で、Devise.setupブロックを見つけて、以下の強調された行を追加します(Devise.setupブロック内に他のコードブロックがある場合は無視して構いません)。

デバイスの.rbファイルを以下のようにネイティブな日本語で言い換えてください:

設定/初期化子/devise.rb

Devise.setup do |config|
  # ...

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

  # ...
end

この行は、ターボストリームをナビゲーション形式に追加します。ターボストリームは、Turboの一部であり、サーバーレンダリングされたHTMLを送信し、JavaScriptをあまり使用せずにページを表示できるようにします。Rails 7でDevise 4.8.1を使用するためにこれを追加する必要があります。そうしなければ、undefined method user_url エラーが発生します。

ファイルを保存して閉じる。

次に、以前の印刷された指示書で強調されている通知とアラートのフラッシュメッセージを追加します。アラートと通知のタグは、ユーザーインターフェースに表示される「パスワードが間違っています」といったメッセージの場所です。アプリケーションには常にカスタムなアラートメッセージを実装することができます(たとえば、ReactをフロントエンドとしてAxiosインターセプターを使用している場合など)、しかし、このチュートリアルではDeviseの最低限の設定が完了します。

アプリケーションのhtml.erbレイアウトファイルを開きましょう。bodyタグの直上に「notice」と「alert」メッセージのタグを追加してください。具体的には、<%= yield %>の直前に追加してください。

「app/views/layouts/application.html.erb」のファイルを日本語に改変した場合 :

「アプリ/views/layouts/application.html.erb」

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

ブラウザでビューが描画されると、<%= yield %>ブロックはビューファイルのコンテンツに置き換えられます。ビューファイルでは、pタグのみが存在しました。このyieldタグはそのコンテンツで置き換えられます。

ファイルを保存して閉じてください。

このステップでは、プロジェクトにDeviseをインストールして設定しました。次のステップでは、Deviseを使用してアプリケーションのユーザーモデルを作成し、ユーザー認証を設定します。

ステップ4 — Deviseを使用してユーザーモデルを作成する

Deviseを使用して、ユーザーモデルを生成する準備が整いました。これにより、必要なモデルファイルが作成され、アプリケーション内でusersテーブルを作成するためのマイグレーションが生成されます。誰かがサインアップするたびに、データベースのusersテーブルに新しいレコードを作成する必要があります。ユーザーモデルを使用すると、フロントエンドビューからこれらのデータベースレコードを操作することができます。

このステップでは、ユーザーモデルを生成し、デフォルトの設定を確認してから、データベースを更新するためにマイグレーションを実行します。

Railsはモデルビューコントローラー(MVC)フレームワークであるため、各データベーステーブルにはそれに関連付けられたクラスがあり、そのテーブルのデータを操作するために使用することができます。この場合、ユーザーテーブルを作成すると、Userモデルを使用してUser.firstやUser.find_by_email(“sammy@example.com”)などの操作を行うことができます。Railsでは、通常のクラスをApplicationRecordから継承したものとして作成することができますが、Deviseを使用してユーザーモデルを生成すると、認証に使用できる多くのメソッドが提供されます。

Deviseユーザーを作成するには、次の生成コマンドを実行してください。

  1. 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はこれらの変更をどの順序で行うかを知ることができます。

デバイスは、ユーザーモデルのファイル(app/models/user.rb)とそれに対するテストも作成しました。出力の最後の行には、既存のconfig/routes.rbファイルにルートが追加されたことが示されています。デバイスは、devise_for :usersヘルパーを使用して、/users/sign_upや/users/sign_outなどのルートを自動的に追加します。

データベースのマイグレーションファイルを実行し、ユーザーテーブルを作成する前に、生成されたファイルを確認しましょう。これにより、マイグレーションの実行時に何が行われているかを理解し、Deviseが生成した設定を把握できます。

はじめに、デフォルトコードを確認するために移行ファイル(db/migrate/20220908152949_devise_create_users.rb)を開きます。

db/migrate/20220908152949_devise_create_users.rbを日本語で言い換えると、次のようになります:
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はUserモデルファイルも生成しました。これはapp/models/ディレクトリで利用可能です。

デフォルトのコードを確認するために、アプリのapp/models/user.rbモデルファイルを開いてください。

ブログ/アプリ/モデル/ユーザー.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_authenticatable、registerable、recoverable、rememberable、validatable)はすでに含まれています。マイグレーションファイルで見た追加の機能に対応するいくつかの追加オプションがコメントアウトされています。これらのモジュールをモデルファイルに追加し、アプリケーションで必要な機能に応じてマイグレーションを設定することができます。

以下は基本モジュールの機能です:

  • database_authenticatable: Users can authenticate themselves with a login and password field. Their encrypted password will be stored in your database.
  • registerable: Users can register themselves and can edit or delete their accounts.
  • recoverable: Users can reset their password and recover their accounts if they forget their credentials.
  • rememberable: This module remembers a user’s sessions by saving the information in a browser cookie.
  • validatable: This module provides validations for the user’s email and password fields. (For example, your application asks for the password to be at least six characters, even though you haven’t defined any custom validations in your model.)

あなたが作成したUserモデルには、これらの基本モジュールが含まれています。Deviseが提供するモジュールの完全なリストは、DeviseのGitHubリポジトリで見つけることができます。

何も変更する必要はありませんので、ユーザーモデルファイルを閉じてください。

もうひとつのアップデートは、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ファイルを閉じてください。

アプリケーションで定義されているルートを知るために、以下のコマンドを実行して一覧を表示することができます。

  1. bundle exec rails routes

 

このコマンドは、すべてのアプリケーションのルートと、それに対応するコントローラーを表示します。認証の場合、これらのルートはDeviseによって自動的に作成され、手動で追加する必要はありませんでした。

出力結果は長くなりますが、以下にいくつかのルートの一部を示します。

Prefix Verb URI Pattern Controller#Action
new_user_session GET /users/sign_in(.:format) devise/sessions#new
user_session POST /users/sign_in(.:format) devise/sessions#create
destroy_user_session DELETE /users/sign_out(.:format) devise/sessions#destroy
new_user_password GET /users/password/new(.:format) devise/passwords#new
edit_user_password GET /users/password/edit(.:format) devise/passwords#edit
user_password PATCH /users/password(.:format) devise/passwords#update
PUT /users/password(.:format) devise/passwords#update
POST /users/password(.:format) devise/passwords#create
cancel_user_registration GET /users/cancel(.:format) devise/registrations#cancel

出力されたルートは、デバイスを含めてroutesファイルにdevise_for :usersの行を追加した際に追加されたルートです。これらは、サインイン、サインアップ、パスワードリセットなどのアクションのためのルートです。

この手順の最初に生成したマイグレーションを以下のコマンドで実行する前に、Deviseで生成されたファイルと設定を確認しました。

  1. 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サーバーを再起動してください。

  1. bundle exec rails server

 

前述したイニシャライザファイルは、Railsが起動する際にのみ読み込まれます。Deviseの新しいイニシャライザファイルをRailsが読み込み、ユーザー認証が機能するために必要なすべての設定を行うには、サーバーを再起動する必要があります。

ブラウザで「http://localhost:3000/users/sign_up」にアクセスしてください。そこには、メールアドレスとパスワードを入力してアカウントを作成するためのサインアップフォームがあります。次のステップでは、ランディングページにサインアップとサインインのボタンを追加し、読者がこのURLに簡単に移動できるようにします。

The signup page generated by Devise

認証を試すために、sammy@example.comのようなテスト用のメールアドレスとパスワードを入力してください。

「サインアップすると、自動的にルートページにリダイレクトされます。そのページには、’Hello Silicon Cloud!’というメッセージが表示され、サインアップが成功したことも表示されます。」

Screencapture showing the landing page the user is redirected to once they've signed up

このサインアップ成功通知は、application.html.erb ファイルに追加した

<%= notice %>

タグで表示されます。

この時点で、プロジェクトでDeviseを使用してユーザー認証を設定し、サンプルアカウントを使ってサインアップしました。Deviseをアプリケーションのニーズに合わせて設定し、Deviseがルート、ビュー、コントローラを生成してユーザーのサインアップ体験を容易にしています。

「正常にサインアッププロセスが機能することを確認したので、次のステップは、ステップ2で作成したランディングページにこの認証を追加することです。次のステップでは、サインアップページをランディングページにリンクさせ、ユーザーがサインアップするために特定のURLに移動する必要がなくなります。ここで行ったように。」

ステップ5 – 認証をランディングページにリンクさせる

あなたのプロジェクトではすべての機能がセットアップされていますが、まだDeviseが作成したページをあなたのランディングページに接続する必要があります。前のステップでは、手動で/users/sign_upページにアクセスしてサインインしました。このステップでは、必要なリンクをランディングページに追加することで、すべてのページをリンクさせます。また、ユーザーのステータスに基づいてアプリケーションへのサインインまたはサインアウトのリンクを条件付きで表示することもできます。

この作業は、Deviseからいくつかのヘルパーメソッドを利用することで達成することができます。Deviseのgemには、自分ですべてを実装する必要がなく、利用できる便利なメソッドが数多く用意されています。それにより、コードが読みやすくなるだけでなく、メンテナンスも容易になります。

最初に、ユーザーがサインインしているかどうかを確認するためのコードを追加します。 サインインしている場合、ランディングページにはユーザーのメールアドレスとアプリケーションからサインアウトするためのリンクが表示されます。 ユーザーがサインインしていない場合、ランディングページにはサインインページに移動するためのリンクが表示されます。

エディットするために、アプリケーション/views/home/index.html.erb ファイルを開き、ハイライトされた行を追加してください。

app/views/home/index.html.erbを日本語で言い換えると、次のようになります:「アプリ/ビュー/ホーム/インデックス.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 Silicon Cloud!</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 routesを実行して完全なルートURLヘルパーのリストを確認することもできます。)

ファイルを保存して閉じてください。

ブラウザーでページを更新して変更を確認してください。

もしまだアプリにサインアップしていない場合、ページ上の「サインイン」ボタンをクリックして/users/sign_inにアクセスすることができます。ここから、「サインアップ」リンクをクリックして新しいアカウントを作成することができます。テスト用のメールアドレス(例:sammy@example.com)とパスワードを入力してください。サインアップが完了すると、再びランディングページに戻ります。今度は、現在サインインしているユーザーのメールアドレスが表示され、付随の「サインアウト」ボタンも表示されます。以下のようになります。

The landing page after the user has signed in

「登録が成功しました」というメッセージも届きます。

そして、それによって、あなたはDeviseジェムを成功裏に統合し、アプリケーションでユーザー認証を設定しました。

結論

このチュートリアルでは、Railsアプリにユーザー認証を追加するためにDeviseを使用しました。Deviseのヘルパーメソッドを使用して、ユーザーがアカウントを作成し、サインアップおよびサインアウトができるアプリを作成しました。

Deviseと追加のヘルパーやメソッドの理解を深めるためには、DeviseのGitHubリポジトリのREADMEファイルを参照してください。このチュートリアルの次のステップとして、ユーザーがサインインしているかどうかによって、「ハローワールド!」の挨拶をページ上で条件付きで表示してみることができます。例えばユーザー名に依存して「こんにちは、ユーザー名」と表示するなどです。

このプロジェクトのコードは、Silicon CloudコミュニティのGitHubリポジトリで見つけることができます。

コメントを残す 0

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