디자인의 깊이를 밝히다, 1부-HTML 튜토리얼-php.cn

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

Rails의 이미지 업로드에 대한 이전 기사에서 Devise에 대해 언급했지만 깊이 다루지는 않았습니다. 이번 튜토리얼에서는 Devise에 대해 가르쳐 드리겠습니다.

준비됐나요? 시작하자!

디자인 개요 및 모듈

Devise는 Plataformatec의 훌륭한 직원들이 Warden과 함께 구축한 Rails 인증 솔루션입니다. Devise는 다양한 모듈을 제공합니다:

데이터베이스 확인 가능: 로그인 시 사용자의 진위를 확인하기 위해 비밀번호를 암호화하고 데이터베이스에 저장합니다.
Omniauthable: Devise에 OmniAuth 지원이 추가됩니다. 앱 사용자는 Facebook, Twitter, Google과 같은 계정을 사용하여 로그인할 수 있습니다.
확인 가능: 계정 확인에 도움이 되는 지침이 포함된 이메일을 보냅니다.
복구 가능: 이 모듈은 사용자가 비밀번호를 잊어버려서 복구해야 할 때 도움이 됩니다. 이 방법으로 사용자는 비밀번호를 재설정할 수 있습니다.
등록 가능: 사용자 등록을 처리합니다. 또한 사용자는 자신의 계정을 편집하고 삭제할 수 있습니다.
Rememberable: 이 모듈을 사용하면 애플리케이션이 쿠키를 저장하여 로그인한 사용자를 기억할 수 있습니다.
추적 가능: 이 모듈은 로그인 횟수, 타임스탬프 및 IP 주소를 추적하는 데 도움이 됩니다.
Timeoutable: 이 모듈은 일정 기간 동안 비활성화된 세션을 만료시키는 역할을 합니다.
확인 가능: 이 모듈을 사용하면 이메일과 비밀번호를 확인할 수 있습니다.
잠금 가능: 추가 보안 계층을 제공합니다. 활성화되면 특정 횟수만큼 로그인 시도에 실패하면 계정이 잠길 수 있습니다.

장치 통합

이 튜토리얼의 목적에 따라 Devise가 실제로 작동하는지 확인하는 데 사용할 수 있는 Rails 애플리케이션을 생성하겠습니다. 계속하자!

rails 新设计应用 -T

-T 标志告诉 Rails 在没有默认测试套件的情况下生成应用程序。导航到您的应用程序目录并将以下 gems 放入您的 Gemfile.

으아악

이제 방금 추가한 Devise 및 Bootstrap gem을 설치하세요.

捆绑安装

app/assets/stylesheets/application.css 文件重命名为 app/assets/stylesheets/application.scss을 변경하고 그 안에 다음 줄을 추가하세요.

으아악

열어요 app/assets/javascripts/application.js 文件并需要 bootstrap-sprockets. 내 모습은 다음과 같습니다:

으아악

다음으로 Devise의 구성 파일을 설치하려면 Rails 명령을 실행해야 합니다. 다음 명령을 실행하면 됩니다:

rails 生成设备：install

이 명령은 터미널에 다음을 생성합니다. 무슨 일이 일어나고 있는지 이해하려면 그것을 읽어야합니다.

으아악

이 명령은 config 디렉터리에서 찾을 수 있는 두 개의 파일도 생성합니다. 또한 우리가 무엇을 해야 하는지에 대한 몇 가지 지침도 제공합니다.

앱 레이아웃으로 이동하여 app/views/layouts/application.html.erb 다음과 같이 만드세요.

으아악

개발 환경에 맞는 기본 URL 옵션을 정의해야 합니다. config/environments/development.rb 안에 다음 코드를 추가하세요.

으아악

이제 Devise용 User 모델을 만들어야 합니다. 이 작업을 수행하려면 터미널을 사용할 수 있습니다.

rails 生成设备 User

이 내용은 app/models 目录中生成一个 user.rb 파일에 있습니다. 생성된 파일은 다음과 같습니다:

으아악

위에 언급한 기본 모듈이 포함되어 있는 것을 볼 수 있습니다. 실행하는 명령은 devise의 경로를 추가하여 config/routes.rb 파일도 수정합니다. 꼭 확인해 보세요.

이 시점에서 데이터베이스를 마이그레이션해야 합니다. 다음 명령을 실행하면 됩니다:

rake 数据库：migrate

기기를 사용하여 인증

이제 PagesController을 만들고 Devise 인증을 둘러싸야 합니다. 이렇게 하면 승인되지 않은 사람이 페이지를 보는 것을 방지할 수 있습니다.

rails 生成控制器页面索引

경로 파일을 열고 애플리케이션의 루트 디렉터리를 설정하세요.

으아악

열고 PagesController 并为 index 和 new index 및 새 페이지에 대한 인증을 추가하세요.

#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 登录页面。

不使用电子邮件登录

运行命令：

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

로그인 후 복사