自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Rails 6.0でアプリを開発 基本の流れ⑦ ログイン機能

アプリケーションにログインの機能を付ける際のメモ。セキュリティ上重要だと思うので基本ログイン機能はつけていきたい。

f:id:kslabo51:20200301144706p:plain

実現したいこと

ユーザーがログインできること。最終的に任意でログイン情報をブラウザに保存できること

 

認可モデルについて

ログイン情報はCookiesに保存する。認可の仕組みは下記の図を作ってみた

f:id:kslabo51:20200229102206p:plain

参考)rails tutorial 第8章

セッションのRESTfulなモデリング

new 新しいセッションを出力(ログイン)

create セッションを作り(cookiesへ)保存

destroy セッションを破棄(ログアウト)

 

①Sessionsコントローラを作成

$ rails g controller Sessions new

 

②ルーティングの設定

モデリングに合わせてルーティングを設定

f:id:kslabo51:20200301141405p:plain

 

③テストの編集

自動でできているSessions_controller_test.rbで名前付きルートを使うように編集

f:id:kslabo51:20200229103337p:plain

 

④ログインフォームを作成

セッションにはモデルがないのでユーザー登録フォームのように@usersのようなインスタンス変数がなく追加の情報は独自で渡す必要がある。

f:id:kslabo51:20200229104302p:plain

フォームのコードはこちら

f:id:kslabo51:20200229105239p:plain

 

⑤ログインフォームの送信を受けるcreateアクションを作成

1)emailからユーザーを見つける

2)ユーザーで勝つパスワードが有効ならtrue、どちらか違うならfalseに

3)ログイン

4)ログインできないときはログインフォームへ戻しエラー表示

flash.now

レンダリングが終わっているページのみ(今回はログインフォーム)にメッセージを表示

f:id:kslabo51:20200229110348p:plain

 

flashのメッセージを統合テストでテストする

$ rails g integration_test users_login

f:id:kslabo51:20200229112533p:plain

 

⑦Sessionヘルパーをどのコントローラーでも使えるようにする

セッションを実装するには、様々なコントローラやビューでおびただしい数のメソッドを定義する必要があります。Rubyのモジュール機能を使うと、そうしたメソッドを一箇所にパッケージ化できる(rails tutorial)

 ApplicationコントローラーでSessionヘルパーモジュールを読み込む

f:id:kslabo51:20200229112952p:plain

 

⑧Sessions_helper.rbでメソッドをいろいろ作成していく

f:id:kslabo51:20200229114857p:plain

f:id:kslabo51:20200229114908p:plain

f:id:kslabo51:20200229114959p:plain

 

⑨log_inメソッドをcreateアクションに実装

f:id:kslabo51:20200229115244p:plain

ログイン後はユーザーのページにredirect_toで飛ばす

 

⑩レイアウトのリンクをログインによって変える

 1)ログインをしているかどうかチェックするメソッドをsessions_helper.rbに追加

f:id:kslabo51:20200229173944p:plain

f:id:kslabo51:20200229174153p:plain

2)ヘッダーパーシャルでlogged_in?メソッドを使用して挙動を分ける
※注意※

ユーザーによってはプロフ画像を投稿しない場合があるのでその点も分岐

f:id:kslabo51:20200301104306p:plain



※併せてプロフ画像を使用しているshow.html.erbも編集

f:id:kslabo51:20200229190732p:plain

 

補足)ここでローカル環境で画像のチェックをしたときに出たエラーメモ

現象 ↓

画像を投稿しているユーザーのプロフページにログインした後、再度login画面をurl直打ちで表示した際、avatarnilだと表示されエラーとなる

原因 ↓

ログアウト機能を設定していないので、/loginでurl直打ちをしたのだが、実はブラウザを閉じてなかったので、ログインをチェックしたユーザーのセッションがブラウザに残っておりログアウト扱いにならず、その状態でログインのページに移行しようとするとログインしている扱いになるのでエラーが出てしまっていた。

ある意味セッションメソッドが成功しているという形ではあるが少しはまった。

 

ブラウザの設定からcookieを削除した後、loginページのurlを直打ちすると正常に表示された

 

⑪レイアウト変更のテスト

レイアウト変更のテストのためにユーザーをログインさせるが、ユーザーログインの際にハッシュ化されたパスワードを使う。パスワードはhas_secure_passwordでbcryptを使用して作成されている。パスワード生成のコードは下記。

BCrypt::Password.create(string, cost: cost)

 

1)テストのコストパラメータを低くする

cost ↓

(コストパラメータ)ハッシュを計算するための計算コストを指定。高くすればハッシュから計算でオリジナルのパスワードを推測するのを困難にさせる。

テストはそこまで高いコストパラメータは必要ないので低くする

f:id:kslabo51:20200301105523p:plain

 

2)テストフィクスチャを作成

f:id:kslabo51:20200301105853p:plain

 

3)ユーザーログインのテスト

f:id:kslabo51:20200301112200p:plain

 

⑫ユーザー登録時にログインさせる

f:id:kslabo51:20200301115024p:plain

 

⑬テストで登録後ユーザーがログインするかどうかチェック

 testで使用するのでtestヘルパーにログイン中かどうかをチェックするメソッドを作成

f:id:kslabo51:20200301135901p:plain

 

user_signupテストにメソッドを追加

f:id:kslabo51:20200301144134p:plain

 

⑭ユーザーをログアウトさせる

1)sessionヘルパーにlog_outメソッドを作る

f:id:kslabo51:20200301140602p:plain

f:id:kslabo51:20200301140735p:plain

2)sessions_controllerの中に実装

ログアウト後はトップページへリダイレクトさせる

f:id:kslabo51:20200301141013p:plain

3)ログインテストにログアウト部分も付け加える

f:id:kslabo51:20200301142618p:plain

 

今回はここまでだが、Bootstrapがあまり機能していないので訂正版に都度差し替えていきます。

 

ここでheroku にpush しようとするとエラーが発生

! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/yourapp.git

 

原因はこれかな

Error: Cannot find module 'vue-loader'

 

vue-loaderはここに書いた。

f:id:kslabo51:20200302200031p:plain

bootstrapのレイアウトについては後で見直すとしてひとまずもとに戻しプッシュ

f:id:kslabo51:20200302200117p:plain

成功です。

 

参考にさせていただいたサイト

第8章 基本的なログイン機構 - Railsチュートリアル

Rails 6にjQueryとBootstrapを入れる - Qiita

Railsでユーザー画像登録(デフォルト画像設定も含む)|Hiro|note

How to resolve vue-loader error 'vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.' - kakts-log