Revealing the Depth of Design, Part 1-HTML Tutorial-php.cn

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

In some of my previous articles about image uploading in Rails, I mentioned Devise but didn’t delve into it in depth. In this tutorial, I'm going to teach you about Devise.

Are you ready? let's start!

Design Introduction and Modules

Devise is a Rails authentication solution built with Warden, from the great folks at Plataformatec. Devise provides different modules:

Database Verifiable: This will encrypt and store the password into the database to verify the user's authenticity upon login.
Omniauthable: This adds OmniAuth support to Devise. Users of your app will be able to log in using accounts such as Facebook, Twitter, and Google.
Confirmable: This sends an email with instructions to help verify the account.
Recoverable: This module helps when a user forgets their password and needs to recover it. This way, the user can reset their password.
Registerable: Process user registration. It also allows users to edit and delete their accounts.
Rememberable: This module enables your application to remember logged in users by storing cookies.
Traceable: This module helps track login counts, timestamps, and IP addresses.
Timeoutable: This module is responsible for expiring sessions that have been inactive for a period of time.
Verifiable: Using this module, emails and passwords can be verified.
Lockable: This provides an extra layer of security - when activated, the account can be locked after a certain number of failed login attempts.

Device integration

For the purpose of this tutorial, we will generate a Rails application that can be used to check Devise in action. Let's continue!

rails new design application -T

The

-T flag tells Rails to build the application without a default test suite. Navigate to your application directory and place the following gems into your Gemfile.

#Gemfile

gem 'devise', '~> 4.1'
gem 'bootstrap-sass', '~> 3.3'

Copy after login

Now install the Devise and Bootstrap gems you just added.

Bundled installation

Rename your app/assets/stylesheets/application.css file to app/assets/stylesheets/application.scss and add the following lines in it:

#app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Copy after login

Open the app/assets/javascripts/application.js file and require bootstrap-sprockets. Mine looks like this:

#app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Copy after login

Next, you need to run the Rails command to install Devise's configuration files. You can do this by running the following command:

rails Generate device: install

This command generates the following on your terminal. You should read it to understand what's going on.

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

      ===============================================================================

Copy after login

This command also generates two files, which you can find in the config directory. It also gives us some pointers on what we should do.

Navigate to your application layout, app/views/layouts/application.html.erb, and make it look like this:

#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>

Copy after login

You need to define default URL options for your development environment. Add the following code in config/environments/development.rb.

#config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

Copy after login

Now you need to create a User model for Devise. You can use the terminal to do this.

rails Generate Device User

This will generate a user.rb file in your app/models directory. The generated file will look like this:

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

Copy after login

You can see that it contains the default module I mentioned above. The command you run also modifies your config/routes.rb file by adding devise's routes. You should check it out.

At this point, you need to migrate the database. You can do this by running the following command:

rake database: migrate

Authenticate using device

Now you need to create a PagesController and wrap Devise authentication around it - this will prevent unauthorized people from viewing the page.

rails Generate controller page index

Open your routes file and set the root directory of your application.

#config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: "pages#index"
end

Copy after login

Open PagesController and add authentication for the index and new pages.

#app/controllers/pages_controller.rb

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

  def index
  end

  def new
  end
end

Copy after login

代码显示 index 和 new 页面仅可供注册用户访问。打开终端并启动 rails 服务器。将浏览器指向 http://localhost:3000，您将自动重定向到 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" %>

Copy after login

编辑

#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 %>

Copy after login

#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" %>

Copy after login

使用文本编辑器导航至 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

Copy after login

现在用户可以使用他/她的用户名登录。此时，您的申请有一些不正确的地方。当用户登录时，无法退出。这不会带来良好的用户体验。我将向您展示如何解决这个问题。

在终端中，在 app/views 文件夹中创建一个名为 shared 的新目录。

mkdir app/views/shared
touch app/views/shared/_navigation.html.erb

Copy after login

您上面创建的文件是用于写入导航栏代码的部分文件。添加以下代码。

#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>

Copy after login

现在您需要在应用程序布局中呈现导航栏。打开 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>
...

Copy after login

结论

在本部分中，您学习了如何安装 Devise 并向页面添加身份验证。我还提到了一部分。我将在单独的教程中介绍这一点。

在下一部分中，我们将介绍一些比这更高级的领域。我希望这值得您花时间！

The above is the detailed content of Revealing the Depth of Design, Part 1. For more information, please follow other related articles on the PHP Chinese website!