fluid_27’s blog

勉強した内容をアウトプットするためのブログ

ブログアプリ作成② ログイン機能の実装

超初心者がスクールの教材やネット検索を駆使して、不格好なブログアプリを作成する道のり その2

 

 

今回も教材にそって進めていきます。

自分のための備忘録のようなものです。

 

ログイン実装

ログイン機能を実装するにあたり、device というgemを使用。

deviceはログイン機能を一通り実装でき、機能をモジュール形式で追加・削除できるgemとのこと。

 

httpとは

ログイン機能の前に、httpについて。

そもそもwebでの情報のやりとりはhttp(Hyper transfer  Protocol)という方式で行っている。

Protcolとは「やり方」という意味。

なのでhttpは直訳すると「Hyper transferというやり方」という意味。

 

ステートレス

httpは「リクエスト」と「レスポンス」の組み合わせで成り立っている。

あるリクエストとレスポンスの組み合わせは、他の組み合わせと独立している。干渉しあわない。

このような性質を「ステートレス」という。

逆に反対の概念として「ステートフル」という。

 

、、とここまでほぼ教材の写し書きです。

ただ、リクエスト・レスポンス含め、今の知識でも理解できるので先に進めます。

 

ようは、状態を維持する仕組みをステートフル。

状態を維持しない仕組みをステートレス。

下記のサイトで詳しく説明されてました。

[必見!] ステートフルとステートレスの違いを分かりやすく解説します! | 押さえておきたいWeb知識

 

httpはステートレスなため、「ログインしている」という情報を各リクエスト間で保持できない。

でもAmazonなどを思い返すと、カートの内容などはリクエスト間で保持できている。(ページが変わったらカートに入れたものがクリアされてる、などはない。という事)

それを実現する代表的なものがcookie

 

cookieとは

各webサイトごとに4KBまでのテキストファイル(英字で4,000字程度)を保存することができる。

そのテキストファイルをcookieと呼ぶ。

cookieへの書き込みはwebサイト側がブラウザに対してレスポンスを送り、その結果cookieに内容が書き込まれる。(cookieの編集自体はユーザ側でも行うことができる)

cookieに保存される情報はハッシュのようなkey, value の形式になる。

 

ブラウザ側がすでにcookieを持っている場合は、リクエスト時にサーバ側にcookieを渡します。

cookieを利用したログインの管理方法の一例としては

1.クライアントがwebサイトの訪問した際に、サーバでは整理番号となるsession_idというidを発行し、クライアントのcookieに保存する

2.session_idはWebサイトのDBにも記録する。DBではそのsession_idを未ログインのidとして保存する。

3.上記のsession_idを持ったユーザがその後、ログインした際にDBのsession_idをログイン済みとして更新する。

4.以降はクライアントはcookieに保存それたsession_idを送るだけで、ログインした状態になる。

 

実際はもう少し複雑なプロセスみたいなんですが、ザックリでいうと上記の流れ。とのことです。

 

こういった部分をdeviceを導入することで簡単に実装できるようです。

 

deviseをgemに追加

Gemfile に

#deviseの追加

gem 'devise', '~>4.2' 

を追記します。

 bundle install

でインストール

 

deviseのセットアップ

gemのインストールが終わったら、下記のgithubにある通りコマンドを実行し、設定を行う

 https://github.com/plataformatec/devise#getting-started 

rails g devise: install

を実行。すると、下記のようなメッセージ文が出てくる

 

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

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. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================
意訳:

まだやっていなかったら手作業でやらなければならない設定があります。

1. 環境設定ファイルに default url options が定義してあることを確認してください。
   開発環境に使用できる default_url_options のサンプルは下記の通りです。
   config/environments/development.rb に記述します。

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

   本番環境では :host はアプリケーションが置かれる実際のホスト(≒ドメイン)になるはずです。


   ※訳注  メールを送信する際に必要になります。
          今回メールは使用しませんが、Devise の設定の流れとして覚えておきましょう。


2. config/routes.rb に root_url を定義してあることを確認してください。
   例:

     root to: "home#index"


   ※訳注  Devise でログイン時やログアウト時に root_url にリダイレクトされます。


3. app/views/layouts/application.html.erb に
   flash メッセージの記述がしてあることを確認してください。
   例:

    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>


   ※訳注  Devise でログイン後やログアウト後などに
         flash メッセージが表示されますのでそのための設定になります。
          今回は2章で flash のパーシャルを作成したので完了しています。


4. カスタマイズのために Devise の views をコピーすることができます。
   下記のコマンドで実行します。

     rails g devise:views


    ※訳注  Devise のデフォルトのログインフォームを編集する場合に使用します。
           毎回、常に実行する必要はありません。
           今回は後ほど実行します。

 

下記コマンドを実行していく。

rails g devise user

でデバイスで認証するモデルを作成

 

rails db:migrate

で、作成されたマイグレーションをDBに反映させる

 

action_mailerの設定を行う

action_mailerとはメールの送信を行うrailsの機能だとのこと。

deviseにはユーザーの新規登録の際のメールアドレス確認機能があり、そのためにaction_mailerを使用するみたいです。

config.action_mailer.default_url_options

はメール本文中のリンク先を決める。通常はアプリケーションが動作しているアドレス(とポート)を指定する。ということ。

 

 config/environments/development.rb

#deviseの設定

config.action_mailer.default_url_options = { host : "localhost", port: ENV.fetch("PORT", 3000) }

を追記します。

3000のところはrails severを立ち上げた際に表示されるport。

通常は3000番だが、cloud9 などを使用している場合は8080番とかになっているそうです。

 

 

rootの設定

次にconfig/routes.rb に 

root to: "home#index"

を記述。

これでurl の root へのアクセスに対してhomeコントローラのindexアクションが実行されることになる。

なお、rootへのアクセス、とはwebサイトの一番上の階層にアクセスする。つまり、そのwebサイトのホーム画面。ということですね。

 

そして下記コマンドでhomeコントーラを生成

rails g controller home

これによって

 app/controllers/home_controller/rb

が生成される。ここにindexを記述しておくことで、rootへのアクセスがあった際にの内容が呼ばれることになる。

実際に呼ばれると、

 app/views/home/index.html.erb

のファイルをHTMLとしてサーバがレスポンスで返すようになる。

 

Railsの挙動として、ある特定のコントーラが呼び出されると、コントローラに対応する同名のviewディレクトリの

 アクション名/html.erb

をレスポンスとして返す。

 

…と、ここまでは自分の知識でも理解できます。

 

また、補足で root to: "home#index"という記述が routes.rbにあった場合、home_controllerにindexアクションがなくてもapp/views/home/index.html.erbというファイルが存在すれば、Railsがviewを表示してくれる、とのこと。

 

なので、app/controllers/home_controller.rbに追記しなくても

app/views/home/index.html.erb 新規作成し、

<h1 class= "display-1 text-white text-center font-weight-bold" style="text-shadow: 0 0 10px rgba(0,0,0,0.5)">TODO App</h1>

<h2 class= "text-center" style="color #ccc">TODO Appリストを作ろう</h2>

を記述すれば大丈夫

 

rails s

でサーバを立ち上げ、確認します。

が、

<main>': undefined local variable or method config' for main:Object (NameError) 

というエラー文が出てきて、そもそもサーバが立ち上がりません。

どうやらconfigの記述が悪いみたいなので、app/config/environments/developement.rbを調べます。

と、どうやら

#deviseの設定

config.action_mailer.default_url_options = { host : "localhost", port: ENV.fetch("PORT", 3000) }

Rails.application.configure do

end

の間に書き込んでいなかったのが原因みたいです。

修正して、再度実行。

無事立ち上がりました。最後に

 

git add .

git commit -m "finish_devise_setting"

 

をして、一区切り。

 

また、超絶駆け出しエンジニアなので、突っ込みどころがあればご指導・ご鞭撻いただけると幸いです。