在 rails 上使用 devise 套件

step 1.
在Gemfile加上

gem 'devise'

或是在該目錄的終端機使用指令% bundle add 'devise'

step 2.

% bundle install

step3.

% rails g devise:install

就會幫我們生成兩個在config下面的檔案
config/initializers/devise.rb
config/locales/devise.en.yml
接著在終端機的畫面同時顯示需要完成的指令:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


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

一步一步的按照指令完成。

step 4.

% rails g devise User

這個指令會幫我們生成一個migration檔 (db/migrate/20220423155313_devise_create_users.rb) 以及一個新的model檔(app/models/user.rb), 還有在routes.rb新增路徑divise_for :users

step 5. 更新資料庫

% rails db:migrate

step 6. 確認路徑

% rails routes

找出user的路徑

% rails routes | grep user

可以看到各路徑對照的行為，比如:

1
2
3


new_user_session (sign_in)
destroy_user_session (sign_out)
new_user_registration (sign_up)

step 7. sign_up
在終端機輸入rails s
開啟http://localhost:3000/users/sign_up 就可以看到註冊頁面了

step 8. 清掉cookies
註冊之後，因為目前的頁面還沒有做sign_out的連結，所以再輸入一次http://localhost:3000/users/sign_up會看到訊息:You are already signed in. 這時候的你，可以打開開發者工具中的Application的Cookies，把該檔案名稱對應的值刪掉，就可以清掉記錄進入到sign_up頁面

step 9. Bulma
參考https://bulma.io/documentation/overview/ 下載Bulma，把樣式表插入app/views/laywout資料夾中的application.html.erb

1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

接著還要在同個檔案新增meta tag

1

<meta name="viewport" content="width=device-width, initial-scale=1">

step 10. 新增navbar
在 app/views 新增shared資料夾，並在裡面新增_navbar.html.erb檔，接著回到laywout的application.html.erb，在body的地方把剛剛的檔案渲染。

1

 <%= render 'shared/navbar' %>

step 11. 編輯navbar
回到_navbar.html.erb檔，把BULMA的Basic Navbar樣式貼上去，再按照自己的需求編輯:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  (過長省略，程式碼在: https://bulma.io/documentation/components/navbar/)

step 12. 新增sign_up、sign_out、sign_in連結在_navbar.html.erb檔

1
2
3
4
5
6
7
8
9


<% if  user_signed_in? %>
        <%= link_to 'Sign out', destroy_user_session_path, method: :delete, class: "button is-primary" %>
            
    <% else  %>
        <%= link_to 'Sign up', new_user_registration_path, class: "button is-primary" %>
        
        <%= link_to 'Log in', new_user_session_path, class: "button is-light" %>
            
<% end %>

step 13. 在首頁印出登入者資料

1
2
3


<% name  = current_user.present? ? current_user.email : '訪客' %>

<h1>Welcome, <%= name %></h1>

到這邊為止，就可以看到一個基本的登入頁面了。

參考資料:https://youtu.be/jd1gOhpETIA

Ruby on Rails devise

在 rails 上使用 devise 套件