首页 > web前端 > html教程 > 揭示设计的深度,第 1 部分

揭示设计的深度,第 1 部分

王林
发布: 2023-08-26 22:25:16
原创
524 人浏览过

揭示设计的深度,第 1 部分

在我之前的一些关于 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 并为 indexnew 并为 indexnew 页面添加身份验证。

#app/controllers/pages_controller.rb

class PagesController < ApplicationController
  before_action :authenticate_user!, only: [:index, :new]

  def index
  end

  def new
  end
end
登录后复制

代码显示 indexnew 页面仅可供注册用户访问。打开终端并启动 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板