テクノロジー

2017年01月07日

login_01

Aws4 request&x amz signedheaders=host&x amz signature=7385481a0354e237cd2ee394cf63c09dd122e5042805d1e00f9ff5cd950d703d

ユーザー登録機能を実装する

ログイン機能とは言えども、ユーザーが登録できなければログインはできません。今回は以下の流れに従ってユーザー登録機能を実装していきましょう。

  1. userモデル、usersテーブルを作成する
  2. userに関するルーティングを定義する
  3. usersコントローラを作成、実装する
  4. 画面を設計する

※アプリケーション作成(rails new)やDBの作成(rake db:create)などは割愛させていただきます。

【手順】Gemをインストールする

以下をGemfileに追記します。

gem 'bcrypt'

これはhas_secure_passwordというメソッドを使うために必要なGemです。その後以下のコマンドを実行しましょう。

[コマンド]

bundle install

【手順】ユーザーモデルを作成する

[コマンド]

bin/rails g model user

【手順】マイグレーションファイルを実装する

[db/migrate/YYYYMMDDhhmmss_create_users.rb]

class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.string :password_digest
      t.timestamps null: false
    end

    add_index :users, :email, unique: true
  end
end

【手順】マイグレーションを実行する

[コマンド]

bin/rake db:migrate

【手順】バリデーションを設定する

[app/models/user.rb]

VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
has_secure_password

validates :name, presence: true
validates :email, presence: true, format: { with: VALID_EMAIL_REGEX }

has_secure_passwordはパスワードを暗号化してDBに保存したり、passwordとpassword_confirmationという仮想的なカラムに対して認証を行ったりすることが実現できるメソッドです。

【手順】ユーザー登録に関するルーティングを実装する

[config/routes.rb]

resources :users, only: [:show, :new, :create]

ここではonlyオプションを用いてshow, new, createのみのルーティングを定義します。

【手順】usersコントローラを作成する

[コマンド]

bin/rails g controller users

【手順】newアクションを作成する

[app/controllers/users_controller.rb]

def new
  @user = User.new
end

【手順】ユーザー登録画面を作成する

[app/views/users/new.html.erb]

<h1>ユーザ登録</h1>

<% if @user.errors.any? %>
  The form contains <%= pluralize(@user.errors.count, "error") %>.
  <% @user.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
  <% end %>
<% end %>

<%= form_for(@user) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :email %>
    <%= f.email_field :email %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <%= f.password_field :password %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation, "Confirmation" %>
    <%= f.password_field :password_confirmation %>
  </div>

  <div class="action">
    <%= f.submit "登録する" %>
  </div>
<% end %>

<%= link_to '戻る', root_path %>

has_secure_passwordのおかげで、usersテーブルには定義されていなかったpassword, password_confirmationという2つの仮想的なからむを使うことができます。

【手順】createアクションを作成する

[app/controllers/users_controller.rb]

def create
  @user = User.new(user_params)
  if @user.save
    redirect_to root_path, notice: 'ユーザー登録が完了しました!'
  else
    render 'new'
  end
end

ユーザー登録が完了したらトップページへリダイレクトさせます。

【手順】ストロングパラメータを実装する

[app/controllers/users_controller.rb]

private
  def user_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation)
  end

【手順】showアクションを作成する

[app/controllers/users_controller.rb]

def show
  @user = User.find(params[:id])
end

【手順】ユーザー詳細画面を作成する

[app/views/users/show.html.erb]

<p id="notice"><%= notice %></p>
<h1>プロフィール</h1>

<ul>
  <li><%= @user.name %></li>
  <li><%= @user.email %></li>
</ul>

<%= link_to 'Back', root_path %>

【手順】トップコントローラを作成する

[コマンド]

bin/rails g controller top index

【手順】不要なルーティングを削除する

[config/routes.rb]

get 'top/index'

【手順】ルートをトップ画面になるように設定する

[config/routes.rb]

root 'top#index'

【手順】サーバーを立ち上げる

bin/rails s

サーバが立ち上がったら以下のURLにアクセスしてみてください。

<http://localhost:3000/users/new>

ここから値を入力して登録ができれば、ユーザー登録機能は完了です。
次回はいよいよログイン機能を実装していきます!

DIVE INTO CODEのことをもっと知ってみませんか?