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 hướng dẫn. đường ray Node.js: Cài đặt để quản lý đường ống nội dung và chạy mã JavaScript. Node.js 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à trong thư mục . Mở thư mục này trong trình soạn thảo văn bản ưa thích của bạn. authApp authApp Đ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ở trong trình duyệt của bạn để truy cập trang chào mừng của Rails. http://127.0.0.1:3000/ 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 trong thư mục 'config' bằng cách thêm dòng sau: routes.rb root 'home#index' Trong thư mục , bạn sẽ tìm thấy một tệp mới có tên . Chế độ xem này sẽ chứa mã HTML cho trang đích của bạn. app/views/home index.html.erb Khởi động lại máy chủ và kiểm tra trong trình duyệt web của bạn để xem trang đích mới tạo của bạn. máy chủ cục bộ Bước 3: Cài đặt và cấu hình Bootstrap Trong phần này, chúng ta sẽ sử dụng để 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 . Nếu không, hãy chạy bản đồ nhập khẩu cat config/importmap.rb rails importmap:install Tiếp theo, thêm Bootstrap 5 JS vào Rails thông qua bản đồ nhập: . Điều này thêm JS, bootstrap và popperjs vào . $ bin/importmap pin bootstrap config/importmap.rb Nhập Bootstrap vào bằng cách sử dụng . app/javascript/application.js import 'bootstrap'; Thêm vào Gemfile của bạn và chạy . gem 'bootstrap', '~> 5.1.3' bundle install Trong , nhập Bootstrap bằng cách sử dụng và đổi tên tệp thành . app/assets/stylesheets/application.css @import "bootstrap"; application.scss Đảm bảo tệp của bạn chứa: app/views/layouts/application.html.erb <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> Thêm các kiểu ưa thích trong tệp của bạn. app/views/home/index.html.rb 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 để cài đặt Devise. bundle install Chạy để 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. rails g devise:install Bỏ ghi chú dòng trong tệp . 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 . config.navigational_formats = ['*/*', :html, :turbo_stream] devise.rb undefined method user_url Mở và thêm các dòng sau để thông báo và cảnh báo: app/layouts/applications.html.erb <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 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. rails g devise user 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 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. http://localhost:3000/users/sign_up Điều hướng đến tệp và thêm các dòng mã sau: index.html.erb <% 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. 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. user_signed_in 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.
