揭示設計的深度，第 1 部分
- 王林原創
- 2023-08-26 22:25:16530瀏覽
在我之前的一些關於 Rails 中圖像上傳的文章中，我提到了 Devise，但沒有深入探討它。在本教程中，我將教您有關 Devise 的知識。
#準備好了嗎？讓我們開始吧！
設計簡介與模組
Devise 是與 Warden 一起建立的 Rails 身份驗證解決方案，由 Plataformatec 的優秀人員提供。 Devise提供了不同的模組：
- #資料庫可驗證：這會將密碼加密並儲存到資料庫中，以便在登入時驗證使用者的真實性。
- Omniauthable：這將 OmniAuth 支援附加到 Devise。您的應用程式的用戶將能夠使用 Facebook、Twitter 和 Google 等帳戶登入。
- 可確認：這可以發送包含有助於驗證帳戶的說明的電子郵件。
- 可恢復：當使用者忘記密碼並需要恢復密碼時，此模組會有所幫助。這樣，使用者就可以重置密碼。
- 可註冊：處理用戶的註冊。它還允許用戶編輯和刪除他們的帳戶。
- Rememberable：此模組可讓您的應用程式透過儲存 cookie 來記住登入的使用者。
- 可追蹤：此模組有助於追蹤登入計數、時間戳記和 IP 位址。
- 可逾時：此模組負責使一段時間內不活動的會話過期。
- 可驗證：使用此模組，可以驗證電子郵件和密碼。
- 可鎖定：這提供了額外的安全層 - 啟動後，帳戶可以在登入嘗試失敗一定次數後被鎖定。
裝置整合
出於本教程的目的，我們將產生一個 Rails 應用程序，用於檢查 Devise 的工作情況。我們繼續吧！
#rails 新設計應用 -T
-T 標誌告訴 Rails 在沒有預設測試套件的情況下產生應用程式。導航到您的應用程式目錄並將以下 gems 放入您的 Gemfile。
#Gemfile gem 'devise', '~> 4.1' gem 'bootstrap-sass', '~> 3.3'
現在安裝您剛剛新增的 Devise 和 Bootstrap gem。
捆綁安裝
#將您的 app/assets/stylesheets/application.css 檔案重新命名為 app/assets/stylesheets/application.scss 並在其中新增以下行：
#app/assets/stylesheets/application.scss @import "bootstrap-sprockets"; @import "bootstrap";
開啟 app/assets/javascripts/application.js 檔案並需要 bootstrap-sprockets。我的看起來像這樣：
#app/assets/javascripts/application.js //= require jquery //= require bootstrap-sprockets //= require jquery_ujs //= require turbolinks //= require_tree .
接下來，您需要執行 Rails 命令來安裝 Devise 的設定檔。您可以透過執行以下命令來執行此操作：
rails 產生裝置：install
該命令在您的終端機上產生以下內容。您應該閱讀它以了解發生了什麼。
create config/initializers/devise.rb
create config/locales/devise.en.yml
===============================================================================
Some setup you must do manually if you haven't yet:
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.
2. Ensure you have defined root_url to *something* in your config/routes.rb.
For example:
root to: "home#index"
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>
4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:
config.assets.initialize_on_precompile = false
On config/application.rb forcing your application to not access the DB
or load models when precompiling your assets.
5. You can copy Devise views (for customization) to your app by running:
rails g devise:views
===============================================================================
該指令也會產生兩個文件，您可以在 config 目錄中找到它們。它也為我們提供了一些關於我們應該做什麼的指示。
導航到您的應用程式佈局，app/views/layouts/application.html.erb，並使其如下所示：
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>DeviseApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container-fluid">
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
</div>
<div class="container-fluid">
<%= yield %>
</div>
</body>
</html>
您需要為您的開發環境定義預設 URL 選項。在 config/environments/development.rb 中加入以下程式碼。
#config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
現在您需要為 Devise 建立一個 User 模型。您可以使用終端來執行此操作。
rails 產生裝置 User
這將在您的 app/models 目錄中產生一個 user.rb 檔案。生成的文件將如下所示：
class User < ActiveRecord::Base
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
end
你可以看到它包含了我上面提到的預設模組。您執行的命令也會透過新增 devise 的路由來修改您的 config/routes.rb 檔案。你應該檢查一下。
此時，您需要遷移資料庫。您可以透過執行以下命令來執行此操作：
rake 資料庫：migrate
使用裝置進行身份驗證
現在您需要建立一個 PagesController 並在其周圍封裝 Devise 驗證 - 這將防止未經授權的人員查看該頁面。
rails 產生控制器頁面索引
開啟您的路由檔案並設定應用程式的根目錄。
#config/routes.rb Rails.application.routes.draw do devise_for :users root to: "pages#index" end
開啟 PagesController 並為 index 和 new 頁面新增驗證。
#app/controllers/pages_controller.rb class PagesController < ApplicationController before_action :authenticate_user!, only: [:index, :new] def index end def new end end
代码显示 index 和 new 页面仅可供注册用户访问。打开终端并启动 rails 服务器。将浏览器指向 http://localhost:3000，您将自动重定向到 Devise 登录页面。
不使用电子邮件登录
登录 Devise 的默认方式涉及使用电子邮件地址和密码。如果您想让用户能够使用其唯一的用户名登录怎么办？如果那是你想要的，那是可能的。让我们看看如何。
运行命令：
rails 生成迁移 AddUsernameToUSers 用户名：string
这将在 users 表中为 username 添加一个新列。迁移您的数据库。
rake 数据库：migrate
您需要在视图中添加一个字段，用户可以在其中输入他们的用户名。当您转到 app/views 目录时，您将找不到任何呈现 Devise 视图的文件。这是因为 Devise 从其 gemset 加载视图。要自定义它，您必须生成视图的副本。下面的命令发挥了魔力。
rails 生成设备：views
这将在您的 app/views 目录中生成一些文件夹和文件。
您将需要编辑用于登录、注册和更新用户信息的页面。只需将下面的代码块粘贴到各自的文件中即可。
注册
#app/views/devise/registrations/new.html.erb
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
编辑
#app/views/devise/registrations/edit.html.erb
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, autocomplete: "off", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "off", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Update", class: "btn btn-primary" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
<%= link_to "Back", :back %>
登录
#app/views/devise/sessions/new.html.erb
<h2>Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :username %><br />
<%= f.text_field :username, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "off", class: "form-control" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="form-group">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in", class: "btn btn-primary" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
使用文本编辑器导航至 app/controllers/application_controller.rb。您需要修改它以允许使用用户名。将其修改为如下所示：
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
added_attrs = [:username, :email, :password, :password_confirmation, :remember_me]
devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
devise_parameter_sanitizer.permit :account_update, keys: added_attrs
end
end
现在用户可以使用他/她的用户名登录。此时，您的申请有一些不正确的地方。当用户登录时，无法退出。这不会带来良好的用户体验。我将向您展示如何解决这个问题。
在终端中，在 app/views 文件夹中创建一个名为 shared 的新目录。
mkdir app/views/shared touch app/views/shared/_navigation.html.erb
您上面创建的文件是用于写入导航栏代码的部分文件。添加以下代码。
#app/views/shared/_navigation.html.erb
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<%= link_to 'Tutsplus Devise', root_path, class: 'navbar-brand' %>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li><%= link_to 'Home', root_path %></li>
</ul>
<ul class="nav navbar-nav pull-right">
<% if user_signed_in? %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<%= current_user.name %>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to 'Profile', edit_user_registration_path %></li>
<li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% else %>
<li><%= link_to 'Log In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<% end %>
</ul>
</div>
</div>
</nav>
现在您需要在应用程序布局中呈现导航栏。打开 app/views/layouts/application.html.erb 并放入代码以呈现导航栏。
#app/views/layouts/application.html.erb ... <div class="container-fluid"> <%= render "shared/navigation" %> <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> </div> ...
结论
在本部分中，您学习了如何安装 Devise 并向页面添加身份验证。我还提到了一部分。我将在单独的教程中介绍这一点。
在下一部分中，我们将介绍一些比这更高级的领域。我希望这值得您花时间！
以上是揭示設計的深度，第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！