如何使用 Devise 添加用户身份验证（Rails 7 中的 Bootstrap）

用户身份验证是 Web 应用程序的一项重要安全功能，尤其是那些处理敏感用户数据或提供对某些功能的受限访问的应用程序。通过要求用户在访问应用程序之前进行身份验证，开发人员可以确保只有授权用户才能查看或修改应用程序的数据和功能。

什么是设计？

Devise 是一个 Ruby Gem，为 Rails 应用程序提供用户身份验证和授权功能。它减少了向应用程序添加注册、登录和注销功能的过程，而无需从头开始编写所有内容。

它具有密码重置和帐户确认等内置功能。它支持多种身份验证策略，例如电子邮件和密码、OAuth、OpenID 等。

Devise 拥有涵盖基本和高级功能的详细文档。

在本教程中，我们将使用 Devise 构建一个简单的 Rails 应用程序，允许用户创建帐户、登录和注销其帐户。我们还将介绍如何使用 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

  这将创建一个名为“Home”的新控制器，其操作为“index”。

• 通过添加以下行，将根路径添加到“config”文件夹中的routes.rb文件： root 'home#index'

• 在app/views/home目录中，您将找到一个名为index.html.erb的新文件。该视图将包含您的目标网页的 HTML 代码。

• 重新启动服务器并在网络浏览器中检查本地主机以查看新创建的登录页面。

第三步：安装并配置Bootstrap

• 在本节中，我们将使用导入映射来加载 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中导入import 'bootstrap'; 。
• 将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 文件。