Devise を使用してユーザー認証を追加する方法 (Rails 7 のブートストラップ)

ユーザー認証は、Web アプリケーション、特に機密性の高いユーザー データを処理したり、特定の機能へのアクセスを制限したりするアプリケーションにとって不可欠なセキュリティ機能です。アプリケーションにアクセスする前にユーザー自身の認証を要求することで、開発者は、承認されたユーザーのみがアプリケーションのデータと機能を表示または変更できるようにすることができます。

デバイスとは何ですか？

Devise は、Rails アプリケーションにユーザー認証および認可機能を提供する Ruby Gem です。すべてを最初から作成する必要がなく、サインアップ、ログイン、ログアウトの機能をアプリケーションに追加するプロセスが軽減されます。

パスワードのリセットやアカウント確認などの機能が組み込まれています。電子メールとパスワード、OAuth、OpenID などのさまざまな認証戦略をサポートしています。

Devise には、基本機能と高度な機能の両方をカバーする詳細なドキュメントがあります。

このチュートリアルでは、ユーザーがアカウントを作成し、アカウントにサインインおよびサインアウトできるようにするシンプルな Rails アプリを Devise で構築します。 Bootstrap を使用してアプリにスタイルを追加する方法についても説明します。

前提条件

このチュートリアルを始める前に、Ruby と Rails の基本をよく理解しておく必要があります。さらに、次のソフトウェアがコンピュータにインストールされている必要があります。

• Ruby: マシンに Ruby をインストールしていない場合は、公式から最新バージョンをダウンロードできます。ルビーのウェブサイト。
• Ruby on Rails: 次のようにしてローカル開発環境をセットアップする必要があります。レールガイド。
• Node.js: インストールNode.jsアセット パイプラインを管理し、JavaScript コードを実行します。
• 糸
• SQLite3
• Visual Studio Codeのようなテキストエディタ
• Google Chromeのようなブラウザ

このチュートリアルの後半では、Rails 7 で Bootstrap を使用する方法についても説明します。

ステップ 1: 新しい Rails アプリを作成する

• 新しい Rails アプリを作成するには、任意のディレクトリでターミナルを開き、次のコマンドを実行します。

 rails new authApp

これにより、 authAppディレクトリにauthAppという名前の新しい Rails アプリケーションが生成されます。このディレクトリを任意のテキスト エディタで開きます。

• cd authAppと入力してアプリ ディレクトリに移動します。
• ターミナルで次のコマンドを実行して Rails rails serverを起動します。
• ブラウザでhttp://127.0.0.1:3000/を開いて、Rails のようこそページにアクセスします。

ステップ 2: ランディング ページを作成する

• 次のコマンドを使用して、ルート パスへのリクエストを処理する新しいコントローラーを生成します: $rails generate controller home index

  これにより、アクション「index」を持つ「Home」という名前の新しいコントローラーが作成されます。

• 次の行を追加して、「config」フォルダー内のroutes.rbファイルにルート パスを追加します: root 'home#index'

• app/views/homeディレクトリに、 index.html.erbという新しいファイルがあります。このビューには、ランディング ページの HTML コードが含まれます。

• サーバーを再起動し、Web ブラウザでローカル ホストを確認して、新しく作成したランディング ページを表示します。

ステップ 3: ブートストラップをインストールして構成する

• このセクションでは、JS をロードするインポート マップを使用します。まず、 cat config/importmap.rbを実行して、インポート マップがインストールされているかどうかを確認します。そうでない場合は、 rails importmap:installを実行します。
• 次に、インポート マップを介して Bootstrap 5 JS を Rails に追加します: $ bin/importmap pin bootstrap 。これにより、JS、bootstrap、popperjs がconfig/importmap.rbに追加されます。
• import 'bootstrap';を使用して、 app/javascript/application.jsにブートストラップをインポートします。 。
• gem 'bootstrap', '~> 5.1.3' Gemfile に追加し、 bundle installを実行します。
• app/assets/stylesheets/application.cssで、 @import "bootstrap";ファイルの名前をapplication.scssに変更します。
• app/views/layouts/application.html.erbファイルに以下が含まれていることを確認してください。

 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %>

• app/views/home/index.html.rbファイルに好みに応じてスタイルを追加します。
• サーバーをリロードして変更を確認します。

ステップ 4: デバイスのインストールと構成

• Gemfile に移動し、次のコマンドを使用して Devise gem を追加します。

  gem 'devise', github: 'heartcombo/devise', branch: 'main'

• bundle install実行して Devise をインストールします。

• rails g devise:installを実行して、プロジェクトに Devise をセットアップします。これにより、Devise 用のいくつかのスターター ファイルが生成され、ターミナルに指示が表示されます。

• devise.rbファイル内のconfig.navigational_formats = ['*/*', :html, :turbo_stream]コメントを解除します。これにより、Turbo_stream がナビゲーション形式として追加されます。これは、Devise 4.9.2 が Rails 7 で動作するために必要です。これを実行しないと、 undefined method user_urlエラーが発生します。

• app/layouts/applications.html.erbを開き、通知および警告メッセージ用に次の行を追加します。

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

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

• Devise でユーザー モデルを作成するには、ターミナルでrails g devise userを実行します。これにより、ユーザー認証の実装に必要なファイルと構成が生成されます。

• 移行コマンドrails db:migrateを実行して、ユーザー テーブルを作成します。

• サーバーを再起動して、新しい Devise 初期化ファイルをロードし、ユーザー認証が機能するようにすべてをセットアップします。

• ブラウザでhttp://localhost:3000/users/sign_upにアクセスし、サインアップ フォームにアクセスし、電子メールとパスワードを入力してアカウントを作成します。

  
  

• index.html.erbファイルに移動し、次のコード行を追加します。

 <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %>

これらの行は、アプリケーションのサインアップ、サインイン、およびサインアウトのリンクを作成します。 user_signed_in 、Devise が提供するヘルパー メソッドで、現在のユーザーがサインインしている場合は true を返し、そうでない場合は false を返します。

• ブラウザでページを更新して変更を確認します。

• 変更を確認するには、ブラウザでページを更新するだけです。まだサインインしていない場合は、画面にサインイン ボタンが表示されます。それをクリックして登録プロセスを完了します。サインアップが正常に完了すると、ランディング ページにリダイレクトされ、現在サインインしているユーザーの電子メール アドレス、ウェルカム メッセージ、およびサインアウト ボタンが表示されます。

  
  

これらの手順に従うことで、Devise gem が正常に統合され、アプリケーションのユーザー認証が設定されました。

結論

このチュートリアルでは、Devise を使用して、Rails アプリにユーザー認証を追加しました。ユーザーがアカウントを作成し、サインアップしてサインアウトできるアプリケーションを開発しました。また、プロジェクトの外観を改善するために Bootstrap も統合しました。 Devise の知識を深め、さらにヘルパーやメソッドを探索するには、Devise GitHub リポジトリにある README ファイルを参照してください。