Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

  1611 Lượt xem

Laravel JetStream và Authentication trong Laravel 8

Laravel 8Jetstream

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ì

  1. Mang ý nghĩa là xác thực (Ahthentication) và ủy quyền (Ahthorization).
  2. 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ì

  1. 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:auth của Laravel 5 đến laravel/ui của Laravel 6,7.
  2. 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/jetstream

Lư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 sampleBlog

Lư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 --teams

Trong đó 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 --teams

Bướ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 migrate

Bướ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/profile

Tuy 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-views

Khi đó, 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.php

Cò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

login.6dbbf666.png

Đă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.

Registration Jetstream

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.

Profile Management Jetstream

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ọ.
Password Update Jetstream

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.
Password Confirmation Jetstream

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ọ.
Two Factor Authentication Jetstream

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.

kiyoshi
Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic