Trong phiên bản Laravel 8, chúng ta có nhiều lựa chọn để có thể thực hiện authentication (xác thực người dùng), ví dụ như Laravel Breeze、Laravel Jetstream và Laravel Fortify. Nổi bật trong số đó chính là Laravel JetStream, vốn được thiết kế bằng Tailwind CSS với giao diện đẹp mê ly, cùng với các chức năng phong phú như chức năng đăng nhập, đăng ký, xác thực địa chỉ email, xác thực 2 lớp (two-factor authentication), quản lý session, hỗ trợ API thông qua Laravel Sanctum, và tuỳ chọn quản lý team v.v..
Trong bài này Kiyoshi sẽ chia sẻ cách Kiyoshi đã cài đặt Laravel JetStream và sử dụng chức năng Authentication trong Laravel 8 như thế nào.
Auth trong Laravel
Auth trong Laravel là gì
- Mang ý nghĩa là xác thực (Ahthentication) và ủy quyền (Ahthorization).
- Trong Laravel có tích hợp sẵn chức năng Auth và bạn có thể tạo nó bằng các câu lệnh.
Laravel JetStream là gì
- Laravel JetStream là thư viện cung cấp chức năng Auth mặc định của Laravel 8. Đây là bước phát triển và kế thừa từ
make:authcủa Laravel 5 đếnlaravel/uicủa Laravel 6,7. - Jetstream thực hiện những việc như đăng nhập, đăng ký mới, xác minh email, xác minh hai bước, quản lý phiên, hỗ trợ API (Laravel Sanctum), quản lý nhóm và hơn thế nữa.
Cài đặt Laravel JetStream
Bước 1: cài gói Laravel JetStream
Bạn có thể sử dụng Composer để cài đặt gói Jetstream vào dự án Laravel mới của mình:
composer require laravel/jetstreamLưu ý, Jetstream chỉ nên được cài đặt vào các ứng dụng Laravel mới. Cố gắng cài đặt Jetstream vào một ứng dụng Laravel hiện có sẽ dẫn đến các hành vi và sự cố không mong muốn.
Thời điểm cài đặt Jetstream nên là ngay sau khi bạn đã tạo project mới bằng lệnh khởi tạo project dưới đây mà Kiyoshi đã hướng dẫn trong bài Cài đặt Laravel 8.
composer create-project laravel/laravel:^8.0 sampleBlogLưu ý nữa, Jetstream chỉ có thể sử dụng cho Laravel 8 trở đi mà thôi. Nếu bạn muốn phát triển ứng dụng bằng các phiên bản Laravel 7 đổ lại, hãy bỏ qua thư viện này và lựa chọn các gói khác phù hợp.
Bước 2: cài phụ kiện Laravel JetStream
Sau khi cài gói môi trường Jetsteam, bạn có 2 lựa chọn để cài đặt các phụ kiện cho Jetstream, đó là cài Jetstream với Livewire hoặc với Inertia. Với Livewire, bạn có thể tinh chỉnh Jetstream thông qua blade của
Laravel, còn với Inertia, bạn có thể tinh chỉnh Jetstream thông qua Vue.js.
Livewire do tinh chỉnh bằng blade, nên sẽ ưu tiên phần backend hơn khi phát triển app, còn ngược lại với Inertia, do dùng JavaScript để tinh chỉnh nên sẽ ưu tiên xử lý trong phần frontend hơn.
Cả 2 lựa chọn đều có các ưu và nhược điểm, do vậy tùy vào việc bạn thông thạo cái nào thì có thể lựa chọn gói cho phù hợp.
Kiyoshi thì thích blade hơn, do vậy Kiyoshi đã cài Jetstream với Livewire bằng 1 trong 2 lệnh dưới đây:
php artisan jetstream:install livewire
php artisan jetstream:install livewire --teamsTrong đó lệnh thứ 2 được thêm tham số --teams được dùng khi bạn muốn cài thêm chức năng TEAM cho Jetstream.
Tương tự nếu bạn muốn cài Jetstream với Inertia:
php artisan jetstream:install inertia
php artisan jetstream:install inertia --teamsBước 3: Cài nmp và tiến hành migrate
Sau khi hoàn thành 2 bước trên, hãy chạy 3 lệnh sau để cài các phần phụ thuộc trong npm, cũng như tiến hành migrate vào cơ sở dữ liệu.
npm install
npm run dev
php artisan migrateBước 4: hiện các folder ẩn dùng để tinh chỉnh Laravel Jetstream
Sau khi cài đặt Jetstream, phần lớn các file view sẽ được cài đặt trong thư mục resources/views, và bạn có thể trực tiếp thay đổi chúng, ví dụ như:
resources/views/api
resources/views/auth
resources/views/profile
resources/views/profileTuy nhiên về mặc định thì các folder chứa mã nguồn dùng để thay đổi logo của Jetsteam sẽ bị ẩn đi, do vậy để có thể tự do tinh chỉnh Jetstream, chúng ta cần phải làm chúng hiện ra.
Nếu bạn cài Jetstream với Livewire, hãy dùng lệnh sau để publish các file blade tinh chỉnh logo của Livewire.
php artisan vendor:publish --tag=jetstream-viewsKhi đó, các file blade của Livewire sẽ xuất hiện trong folder resources/views/vendor và bạn có thể bắt đầu tinh chỉnh Jetstream bằng cách sửa chúng. Ví dụ như để chỉnh logo bạn có thể thay đổi code ở 3 file sau:
resources/views/vendor/jetstream/components/application-logo.blade.php
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
resources/views/vendor/jetstream/components/application-mark.blade.phpCòn nếu bạn cài Jetstream với Inertia, bạn có thể chỉnh trực tiếp các file ở
resources/js/Jetstream/AuthenticationCardLogo.vue
resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue.Và sau khi tinh chỉnh xong các file vue này, đừng quên chạy lệnh sau để update vào ứng dụng.
npm run devĐiểm nhấn của Jetstream trong Laravel 8
Jetstream trong Laravel 8 tự động xây dựng cho nhà phát triển các tính năng như đăng nhập, đăng nhập hai yếu tố, đăng ký, đặt lại mật khẩu và xác minh email cho dự án của bạn, cho phép bạn bắt đầu xây dựng các tính năng bạn quan tâm thay vì lo lắng về các chi tiết phức tạp của xác thực người dùng. Hãy cùng Kiyoshi điểm qua một vài điểm nhấn đáng chú ý của Jetstream trong Laravel 8 như sau:
Xác thực
Đăng ký
Tất nhiên, trước khi bất kỳ ai có thể sử dụng ứng dụng của bạn, họ cần tạo một tài khoản. Rất may, Jetstream cung cấp chế độ xem đăng ký và hành động tương ứng xử lý đăng ký của người dùng để bạn có thể tập trung vào việc xây dựng ứng dụng của mình.
Quản lý hồ sơ
Người dùng truy cập các tính năng quản lý hồ sơ của Laravel Jetstream bằng menu thả xuống điều hướng hồ sơ người dùng trên cùng bên phải. Jetstream hỗ trợ các lượt xem và hành động cho phép người dùng cập nhật tên, địa chỉ email và ảnh hồ sơ của họ theo tùy chọn.
Cập nhật mật khẩu
Người dùng truy cập các tính năng bảo mật của Laravel Jetstream bằng menu thả xuống điều hướng hồ sơ người dùng trên cùng bên phải. Trong bảng điều khiển này, Jetstream hỗ trợ các chế độ xem cho phép người dùng cập nhật mật khẩu được liên kết với tài khoản của họ.
Xác nhận mật khẩu
Trong khi xây dựng ứng dụng của mình, đôi khi bạn có thể có các hành động yêu cầu người dùng xác nhận mật khẩu của họ trước khi hành động được thực hiện. Ví dụ: chính Jetstream yêu cầu người dùng xác nhận mật khẩu của họ trước khi thay đổi cài đặt xác thực hai yếu tố của họ. Rất may, Jetstream đã tích hợp sẵn chức năng để biến điều này trở nên dễ dàng.
Xác thực hai yếu tố
Laravel Jetstream tự động hỗ trợ xác thực hai yếu tố cho tất cả các ứng dụng Jetstream. Người dùng truy cập các tính năng bảo mật của Laravel Jetstream bằng menu thả xuống điều hướng hồ sơ người dùng trên cùng bên phải. Trong bảng điều khiển này, Jetstream tổng hợp các chế độ xem cho phép người dùng kích hoạt và quản lý xác thực hai yếu tố cho tài khoản của họ.
Tổng kết
Trên đây là cách cài đặt cũng như một số sơ lược về Laravel Jetstream mà Kiyoshi đã tìm hiểu được. Bạn có thể tìm hiểu kỹ hơn cách dùng thư viện này tại homepage của Laravel Jetstream. Hi vọng bài viết có ích cho mọi người.
Bình luận