どぼじょのIT学習ブログ

高専卒土木女子がIT業界を目指してお勉強。

はじめての devise でユーザ認証(試行錯誤記録)

本日は Rails のアプリにユーザ認証機能を付けます!
devise という gem を使います。
先に断っておきますが、試行錯誤を重ねたため、この記事の流れはちぐはぐかもしれません…😇
初めてdevise使った人のメモ程度に読んでいただけますと幸いです!

目次

1.ユーザ認証

ユーザ認証というのは、コンピュータにアクセスしようとするユーザが、アクセスを許可された本人かどうかを確認することです。
身の回りの例では、パスワードを使ったログイン機能や、ICカードや指紋を使った認証です🗝

2.devise を使ってみる

devise は rails のアプリでよく使われるユーザ認証プラグインです。

github.com

早速使ってみます!

2-1. deviseインストール

まず自分の rails アプリの Gemfile に以下の1行を追加します。

gem 'devise'

そしてコンソールでbundle installを実行し、deviseをインストールします。

2-2. 初期セットアップ

続いて、deviseの機能を rails アプリで使えるようにしていきます。
コンソールで以下の順番で4つ実行します💪

rails g devise:install   #全体のインストール
rails g devise user    #ユーザーモデルを作成
rails db:migrate    #userテーブルを作成
rails g devise:views    #ビューの作成

全体のインストールの時、コンソール上にセットアップ方法が出てきます。
f:id:mistyrinth:20190502151802p:plain

ここに書いてあるとおり進めていきます。
まずconfig/environments/development.rbに以下の1行を追加します💡

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

わたしの場合、コメントアウトで devise の設定であることをメモしておきました。
f:id:mistyrinth:20190502152347p:plain

次にconfig/routes.rbを確認します。
f:id:mistyrinth:20190502153444p:plain
2行目のdevise_forという行が自動で追加されています🌝
この時点で rails サーバを起動して routes を見てみると、以下のようになっています(抜粋)。
routes の見方はhttp://localhost:3000/rails/info/routesに接続です🚗
f:id:mistyrinth:20190502153553p:plain
この一覧はコンソールでrails routesを実行しても見ることができます。

config/routes.rbに以下の1行を追加します。

root to: "コントローラ名#ビュー名"

ここには各々rootパスに設定したいものを設定するそうです。
rootということなので、多分/にアクセスした時の設定ですね😎
トップページにあたるところだと思います。 私はRailsの教科書で作ったbooks_appを使っているので、私の場合コントローラ名はbooks、ビュー名はindexになります。
books_contoroller.rbというファイルがあるので、ひとまず先に進めるはず!👼👼 f:id:mistyrinth:20190502155221p:plain
参考記事:Railsの教科書

2-3. カスタマイズ

ここからは自分でカスタマイズしていきます🎈

 ログイン状態の確認

devise には、ページに飛んできた人がログイン状態かどうかを判定し、ログイン状態ならコンテンツを表示、ログイン状態でなければログインページに飛ぶという動作をするためのヘルパーが定義されています😊
/app/controllers/application_controller.rbに以下の1行を書きます。

before_action :authenticate_user!

続いて/app/views/layouts/application.html.erbに以下を追加します。

<% if user_signed_in? %>
    <p><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></p>
<% end %>

ここでlocalhost:3000にアクセスすると、以下の画面になりました!
f:id:mistyrinth:20190502171734p:plain
英語ですが、とりあえずログイン画面ができているようです。

メール認証

サインアップするユーザは、まず仮登録として登録メールアドレスにメールを送り、返信によって本登録とします。

/app/models/user.rb:confirmableを追加することで、各種認証時の確認作業が定義できるようになります😐
5行目の最後のやつです👏
f:id:mistyrinth:20190502172301p:plain

ここから試行錯誤していてかなり不安のある内容ですが、migrationファイルを作成します。
多分一度はうまくいかないので、次わかるようになったらちゃんと書きます😢
とりあえずやってみたこと。

rails g migration add_confirmable_to_devise

f:id:mistyrinth:20190502172543p:plain

migrationファイルには以下のように書きます。
/db/migrate/yyyymmddxxxxxx_add_confirmable_to_devise.rbという名前のファイルです。

f:id:mistyrinth:20190502173045p:plain
沢山書いてありますが、コピペしたい方は以下のサイトを見てください😊😊

How To: Add :confirmable to Users · plataformatec/devise Wiki · GitHub

今回は7行目と18行目のコメントアウトを取り除きます。
書けたらコンソールでrails db:migrateです!

ちなみに私は色々試行錯誤しているうちに devise に関する migration ファイルが2つできてしまってエラーが発生しました。
どちらか消すとうまくいきました!笑
その際、migrationファイルのConfirmableに関する部分にコメントアウトがあれば外します。
f:id:mistyrinth:20190516154250p:plain
migrationファイルを含むdbディレクトリ以下のファイルを修正した場合、コンソールでrails db:resetをしないと反映されないです🤨
または db:dropdb:createdb:migrateを順番に実行します!

SMTPサーバの設定

メール送信の設定ができたら、SMTPサーバの設定をします。
letter-openerletter-opener_webという gem を使ってみます!
Gemfile のgroup :developmentの中に以下の2文を追加し、bundle installを実行します。

gem 'letter_opener'
gem 'letter_opener_web'

/config/routes.rbに以下を追加します。

if Rails.env.development?
  mount LetterOpenerWeb::Engine, at: "/letter_opener"
end

10〜12行目のところですね👀
f:id:mistyrinth:20190502191929p:plain

/config/environments/development.rbには以下を追加します。

config.action_mailer.delivery_method = :letter_opener_web

キャプチャの64行目です!
f:id:mistyrinth:20190502192116p:plain

これでlocalhost:3000/letter_openerにアクセスするとrailsアプリから送信したメールが確認できるようになるはずです。多分。
f:id:mistyrinth:20190516154851p:plain

サインアップ

railsサーバを起動して、サインアップ画面に行きます。
f:id:mistyrinth:20190516154948p:plain

まだ日本語に対応していないので、英語のまま進めます。
(いじってる間にいつの間にかリンク増えてるのはすみません)

サインアウト

好きなところにサインアウト用のリンクを書きます。
私はとりあえず全部のページからサインアウトできるようにしました笑

f:id:mistyrinth:20190516155938p:plain

3.i18nで多言語化

言語化します!
devise-i18nという gem を使います。
※ devise-i18n-views という gem は上記の gem に統合されたので使いません!!

Gemfileに以下の1文を追加し、bundle installします。

gem 'devise-i18n'

これだけでロケールファイルがインストールされたことになるので、手動で yml ファイルを生成する必要はありません🙂便利〜!
インストールされたロケールファイルの中身は以下のリンクから確認できます。

github.com

あとはviewファイルのほうでちまちまとi18nに対応するようにt('.sign_in')など書いていくだけです。
自分で書かなくてもいい方法がありそうでよくわからなかったので、もしご存知の方は教えてください〜😊

はじめてのdeviseについては以上です。
ちぐはぐな情報ですみません…次使うときはもっと整理できるよう善処します!💪