Ngôn ngữ mình sử dụng chính trong series này sẽ là Ruby và Framework Ruby on Rails. Mình sẽ mặc định là các bạn đã biết về lập trình cơ bản vì vậy sẽ không đi sâu và chi tiết kỹ thuật, và chú trọng vơi vào mặt logic.
Note: Nếu bạn không quen với Ruby thì đừng lo, hãy theo dõi cách mình triển khai về mặt logic và hiểu những gì chúng ta cần làm trong việc triển khai SSO với OpenID Connect và OAuth2.0. Sau đó thực hành trên bất kỳ ngôn ngữ nào mà bạn cảm thấy quen thuộc.
Let's go!!!
Trong bài này chúng ta hãy bắt đầu với các bước để thiết lập dự án Rails mới, định cấu hình Devise để xác thực người dùng.
Initializing the Project
Đầu tiên chúng ta cần tạo một Rails project mới với command: rails new project_name. Và database mình sử dụng trong dự án lần này sẽ là MySQL vì vậy chúng ta sẽ chạy command sau:
rails new stid_web -d mysql # Additional commands to run the project.
rails db:create
rails db:migrate
Sau đó các bạn sử dụng command: rails server để chạy dự án ở môi trường development.
➜ rails server => Booting Puma
=> Rails 7.1.3.4 application starting in development ...
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Truy cập http://localhost:3000 chúng ta sẽ được kết quả!
Như này là ổn rồi, giờ mình sẽ xoá một số code không cần thiết và cài đặt Rubocop cho ứng dụng, bạn có thể xem chi tiết trong các commit mình đính kèm bên dưới.
Note: Rubocop là một trình phân tích mã tĩnh Ruby (còn gọi là linter) và trình định dạng mã. Nó kiểu kiểu giống ESLint, giúp bạn đảm bảo chất lượng mã và thống nhất code style.
Refer: Getting Started with Rails
Basic Configuration and Installing Devise
Chi tiết các commits cũng như thay đổi mình để trong Pull Request này các bạn có thể tham kháo nhá.
Devise là giải pháp xác thực linh hoạt cho Rails dựa trên Warden.
Devise sẽ giúp chúng ta triển khai các chức năng authentication như sign_in, sign_up, sign_out một cách nhanh chóng và không tốn quá nhiều công sức, vì vậy nó sẽ tiết kiệm thời gian để chúng ta tập trung vào logic của SSO.
Đầu tiên chúng ta cần thêm Devise vào Gemfile.
gem 'devise'
Chạy command bundle install.
Basic Configuration
Bây giờ hãy chạy command rails g devise:install, lệnh này sẽ giúp chúng ta tạo các cấu hình cơ bản của Devise.
Tiếp theo là tạo User model thông qua Devise.
rails g devise User
Giờ hãy chạy thử ứng dụng và truy cập vào đường dẫn http://localhost:3000/users/sign_in. Bạn sẽ thấy một giao diện trông như thế này.
Yeah đó là điều chúng ta muốn, các chức năng authentication hoàn chỉnh, mặc dù giao diện hơi cùi bắp nhưng hãy dành một vài phút để tận hưởng và cài thiện giao diện của nó trong các bước tiếp theo!
🥱 ... 2000 Years Later
Customize Devise Views
Được rồi giờ hãy chỉnh sử giao diện authentication của chúng ta lại một chút nào!
- Run
rails g devise:views User: Mặc định thì các views sẽ nằm trong thư viện của Devise, tuy nhiên command này sẽ giúp chúng ta đưa giao diện trong thư viện của Devise ra bên ngoài project của chúng ta để có thể chỉnh sửa chúng. - Run
rails g devise:controllers users & rubocop -A: Giờ thì đưa nốt controllers ra bên ngoài và format lại code một chút. - Giờ chúng ta cần Allow custom devise:views: Cấu hình để cho phép chúng ta chỉnh sửa views của Devise.
- Cuối cùng để đẹp hơn, mình sẽ sử dụng Tailwind để cho phần UI của chúng ta trở nên đẹp hơn một xíu 😂.
Ten ten! khởi động lại server và đây là kết quả!
Ah, phần Root (http://localhost:3000) hiện vẫn đang sử dụng giao diện mặc định khi chúng ta tạo project vì vậy mình sẽ tạo một trang khác gọi là Top page và biến nó thành Root.
- Tạo top page sử dụng
rails g controller Top index: lệnh này giúp chúng ta tạo view, controller và route cho top page. - Tiếp theo là thêm alert component để hiển thị
error/infocho user.
Chi tiếp xem ở Pull Reuqest.
Khởi động lại server và đăng nhập vào chúng ta sẽ thấy giao diện trông như này.
Conclusion
Như vậy là chúng ta đã hoàn thành bước đầu tiên của việc setup một ID Provider và sử dụng Devise để thực hiện việc xác thực. Trong những bài tiếp theo chúng ta hãy cùng nhau tìm hiểu về Doorkeeper để xem việc cấu hình OAuth2.0 và OpenID Connect diễn ra như nào?
Link Github: https://github.com/learnforward2023/stid_web
Tài liệu tham khảo:
- The OAuth 2.0 Authorization Framework: RFC 6749
- OpenID Connect Core
- OAuth2 and OpenID Connect: The Professional Guide
Again, nếu bạn thấy bài viết này hữu ích, hãy cho mình một upvote và follow để mình có thêm động lực viết những bài sau tốt và chất lượng hơn! Thank you!