Cách thêm xác thực người dùng bằng Devise (Bootstrap trong Rails 7)

Xác thực người dùng là một tính năng bảo mật cần thiết cho các ứng dụng web, đặc biệt là những ứng dụng xử lý dữ liệu nhạy cảm của người dùng hoặc cung cấp quyền truy cập hạn chế vào một số chức năng nhất định. Bằng cách yêu cầu người dùng tự xác thực trước khi truy cập ứng dụng, nhà phát triển có thể đảm bảo rằng chỉ những người dùng được ủy quyền mới có thể xem hoặc sửa đổi dữ liệu và chức năng của ứng dụng.

Devise là gì?

Devise là một Ruby Gem cung cấp các tính năng xác thực và ủy quyền người dùng cho các ứng dụng Rails. Nó làm giảm quá trình thêm chức năng đăng ký, đăng nhập và đăng xuất vào ứng dụng của bạn mà không phải viết mọi thứ từ đầu.

Nó có các tính năng tích hợp như đặt lại mật khẩu và xác nhận tài khoản. Nó hỗ trợ các chiến lược xác thực khác nhau như email và mật khẩu, OAuth, OpenID, v.v.

Devise có tài liệu chi tiết bao gồm cả các tính năng cơ bản và nâng cao.

Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng đường ray đơn giản với Devise cho phép người dùng tạo tài khoản, đăng nhập và đăng xuất khỏi tài khoản của họ. Chúng tôi cũng sẽ giới thiệu cách thêm kiểu cho ứng dụng bằng Bootstrap.

điều kiện tiên quyết

Trước khi bắt đầu hướng dẫn này, bạn nên hiểu rõ về những điều cơ bản của Ruby và Rails. Ngoài ra, bạn phải cài đặt phần mềm sau trên máy tính của mình:

• Ruby: Nếu bạn chưa cài đặt Ruby trên máy của mình, bạn có thể tải xuống phiên bản mới nhất từ trang web chính thức trang web hồng ngọc .
• Ruby on Rails: Bạn nên thiết lập môi trường phát triển cục bộ của mình bằng cách làm theo đường ray hướng dẫn.
• Node.js: Cài đặt Node.js để quản lý đường ống nội dung và chạy mã JavaScript.
• sợi
• SQLite3
• Một trình soạn thảo văn bản như Visual Studio Code
• Một trình duyệt như Google Chrome

Chúng tôi cũng sẽ giới thiệu cách sử dụng Bootstrap trong Rails 7 ở phần sau của hướng dẫn.

Bước 1: Tạo ứng dụng Rails mới

• Để tạo một ứng dụng đường ray mới, hãy mở một thiết bị đầu cuối trong thư mục ưa thích của bạn và chạy lệnh:

 rails new authApp

Điều này sẽ tạo ra một ứng dụng Rails mới gọi là authApp trong thư mục authApp . Mở thư mục này trong trình soạn thảo văn bản ưa thích của bạn.

• Điều hướng đến thư mục ứng dụng bằng cách gõ: cd authApp
• Trong thiết bị đầu cuối của bạn, khởi động máy chủ Rails của bạn bằng cách chạy: rails server
• Mở http://127.0.0.1:3000/ trong trình duyệt của bạn để truy cập trang chào mừng của Rails.

Bước 2: Tạo trang đích

• Tạo bộ điều khiển mới sẽ xử lý yêu cầu đến đường dẫn gốc bằng cách sử dụng lệnh: $rails generate controller home index

  Điều này tạo ra một bộ điều khiển mới có tên `Home` với một hành động `index`.

• Thêm đường dẫn gốc vào tệp routes.rb trong thư mục 'config' bằng cách thêm dòng sau: root 'home#index'

• Trong thư mục app/views/home , bạn sẽ tìm thấy một tệp mới có tên index.html.erb . Chế độ xem này sẽ chứa mã HTML cho trang đích của bạn.

• Khởi động lại máy chủ và kiểm tra máy chủ cục bộ trong trình duyệt web của bạn để xem trang đích mới tạo của bạn.

Bước 3: Cài đặt và cấu hình Bootstrap

• Trong phần này, chúng ta sẽ sử dụng bản đồ nhập khẩu để tải JS. Trước tiên, hãy kiểm tra xem bạn đã cài đặt bản đồ nhập chưa bằng cách chạy cat config/importmap.rb . Nếu không, hãy chạy rails importmap:install
• Tiếp theo, thêm Bootstrap 5 JS vào Rails thông qua bản đồ nhập: $ bin/importmap pin bootstrap . Điều này thêm JS, bootstrap và popperjs vào config/importmap.rb .
• Nhập Bootstrap vào app/javascript/application.js bằng cách sử dụng import 'bootstrap'; .
• Thêm gem 'bootstrap', '~> 5.1.3' vào Gemfile của bạn và chạy bundle install .
• Trong app/assets/stylesheets/application.css , nhập Bootstrap bằng cách sử dụng @import "bootstrap"; và đổi tên tệp thành application.scss .
• Đảm bảo tệp app/views/layouts/application.html.erb của bạn chứa:

 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %>

• Thêm các kiểu ưa thích trong tệp app/views/home/index.html.rb của bạn.
• Tải lại máy chủ và xem các thay đổi.

Bước 4: Cài đặt và cấu hình Devise

• Điều hướng đến Gemfile và thêm đá quý Devise bằng lệnh:

  gem 'devise', github: 'heartcombo/devise', branch: 'main'

• Chạy bundle install để cài đặt Devise.

• Chạy rails g devise:install để thiết lập Devise trong dự án của bạn. Điều này tạo ra một số tệp khởi động cho Devise và cung cấp hướng dẫn trong thiết bị đầu cuối.

• Bỏ ghi chú dòng config.navigational_formats = ['*/*', :html, :turbo_stream] trong tệp devise.rb . Thao tác này thêm turbo_stream dưới dạng định dạng điều hướng, cần thiết để Devise 4.9.2 hoạt động với Rails 7. Không làm được điều này sẽ dẫn đến lỗi undefined method user_url .

• Mở app/layouts/applications.html.erb và thêm các dòng sau để thông báo và cảnh báo:

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

Bước 5: Tạo mô hình người dùng với Devise

• Để tạo mô hình người dùng với Devise, hãy chạy rails g devise user trong terminal. Điều này sẽ tạo ra các tệp và cấu hình cần thiết để triển khai xác thực người dùng.

• Tạo bảng người dùng bằng cách chạy lệnh di chuyển: rails db:migrate .

• Khởi động lại máy chủ để tải tệp khởi tạo Devise mới và thiết lập mọi thứ để xác thực người dùng hoạt động.

• Truy cập http://localhost:3000/users/sign_up trong trình duyệt của bạn để truy cập biểu mẫu đăng ký để tạo tài khoản bằng cách nhập email và mật khẩu.

  
  

• Điều hướng đến tệp index.html.erb và thêm các dòng mã sau:

 <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %>

Những dòng này tạo liên kết đăng ký, đăng nhập và đăng xuất cho ứng dụng của bạn. user_signed_in là một phương thức trợ giúp do Devise cung cấp, phương thức này trả về true nếu người dùng hiện tại đã đăng nhập và trả về false nếu ngược lại.

• Làm mới trang của bạn trong trình duyệt để xem xét các thay đổi.

• Để xem lại các thay đổi, chỉ cần làm mới trang trong trình duyệt của bạn. Nếu bạn chưa đăng nhập, sẽ có một nút đăng nhập hiển thị trên màn hình. Nhấp vào nó và hoàn tất quá trình đăng ký. Khi bạn đã đăng ký thành công, bạn sẽ được chuyển đến trang đích nơi bạn có thể xem địa chỉ email của người dùng hiện đã đăng nhập, thông báo chào mừng và nút đăng xuất.

  
  

Bằng cách làm theo các bước này, bạn đã tích hợp thành công Devise gem và thiết lập xác thực người dùng cho ứng dụng của mình.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã sử dụng Devise để thêm xác thực người dùng vào ứng dụng Rails của mình. Chúng tôi đã phát triển một ứng dụng nơi người dùng có thể tạo tài khoản, đăng ký và đăng xuất. Chúng tôi cũng đã tích hợp Bootstrap để cải thiện giao diện của dự án. Để mở rộng kiến thức của bạn về Devise và khám phá các phương pháp và trình trợ giúp khác, hãy tham khảo tệp README trên kho lưu trữ Devise GitHub.