Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js

Xác thực trang web trong Node.js: Đăng ký người dùng

by
Difficulty:BeginnerLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Vy Cam Nguyen (you can also view the original English article)

Giới thiệu

Xác thực cũng quan trọng trong API, đây cũng là một tính năng quan trọng trong các ứng dụng web nhất định — những ứng dụng có trang và thông tin bí mật chỉ cho phép người dùng đã đăng ký và được xác thực truy cập.

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng web đơn giản trong khi học cách tạo ra đăng ký người dùng.

Thiết lập ứng dụng

Tạo một thư mục mới mà bạn sẽ làm việc. Với mục đích của hướng dẫn này, tôi gọi ứng dụng của tôi là site-auth. Khởi tạo npm trong thư mục mới bạn vừa tạo. Đây là cách khởi tạo npm.

Flag -y cho phép npm sử dụng các tùy chọn mặc định.

Chỉnh sửa dependency (package phụ thuộc) của file package.json của bạn để trông giống với file của tôi.

Khi hoàn thành, chạy câu lệnh để cài đặt dependency.

Tạo file mới trong thư mục làm việc của bạn có tên app.js.

Bắt đầu bằng cách yêu cầu dependency bạn đã cài đặt và các file cần thiết.

Những dependency này đã được cài đặt khi chạy lệnh npm install. Để sử dụng chúng trong ứng dụng của bạn, bạn phải request (yêu cầu) và save (lưu) chúng lại trong các biến tương ứng .

Trong hướng dẫn này, bạn sẽ sử dụng MongoDB làm database của bạn. Bạn sẽ lưu trữ thông tin người dùng trong database. Để làm việc cùng MongoDB, bạn sẽ sử dụng Mongoose - một công cụ mô hình hóa MongoDB cho Node.js. Việc thiết lập Mongoose thật dễ dàng, giống như sau:

Ngay lúc này, chúng ta hãy thiết lập middle.

  1. Express được khởi tạo và gán vào app.
  2. Middleware dùng xử lý các view được thiết lập. Đối với các view, bạn sẽ sử dụng handlebars.
  3. Bạn thiết lập middleware cho bodyparser, cookie, sessionpassport. Passport sẽ được sử dụng khi người dùng muốn đăng nhập.
  4. Tại một số điểm, bạn sẽ hiển thị các thông điệp nhanh (flash). Vì vậy, bạn cần phải thiết lập middleware cho việc này, và cũng tạo ra các kiểu thông điệp flash mà bạn muốn.
  5. Routes middleware sẽ xử lý mọi yêu cầu đến đường dẫn URL. Đường dẫn URL được chỉ định ở đây dùng cho index và đường dẫn người dùng.
  6. Middleware dùng xử lý lỗi 404. Middleware này khởi động khi có một yêu cầu không tham chiếu đến bất kỳ middleware nào được tạo ra ở bên trên.
  7. Máy chủ được thiết lập ở cổng 5000.

Thiết lập các View

Tạo một thư mục mới có tên là views. Bên trong thư mục views, tạo hai thư mục khác là layoutspartials. Bạn muốn đạt được một cấu trúc cây như thế này trong view của bạn, vậy hãy tạo các file cần thiết trong các thư mục tương ứng của chúng.

Khi hoàn thành, giờ là lúc viết code.

Đây là trang dashboard (tổng quan) chỉ hiển thị với người dùng đã đăng ký. Trong với hướng dẫn này, nó sẽ là trang bí mật của bạn.

Bây giờ trang index cho ứng dụng sẽ trông thế này.

Ứng dụng cần một bố cục sẽ để sử dụng và đây là bố cục bạn sẽ sử dụng.

Bạn sẽ cần một trang login (đăng nhập) cho người dùng đã đăng ký.

File notFound.handlebars sẽ được sử dụng làm trang lỗi của bạn.

Trang đăng ký của bạn được sẽ như thế này.

Cuối cùng cho các view của bạn, đây là thanh điều hướng của bạn.

Đã xong phần đó, bạn có thể tiếp tục các phần khó hơn.

Xác nhận dữ liệu

Bạn sẽ cần một model User. Từ code của view ở trên, bạn có thể suy ra rằng các thuộc tính cần thiết cho model User là email, username và password. Tạo một thư mục models và một file trong đó với tên gọi là user.js.

  1. Import các dependency và lưu chúng trong các biến.
  2. Schema mới được tạo ra. Đối với mỗi người dùng, bạn muốn lưu email, usernamepassword vào database. Schema cho thấy cách model được xây dựng cho mỗi tài liệu. Ở đây bạn muốn email, username và password thuộc kiểu dự liệu String.
  3. Đối với người dùng được lưu vào database, bạn cũng muốn tạo timestamp. Bạn sử dụng Mongoose để lấy createdAtupdatedAt, và sau đó được lưu vào database.
  4. Mô hình được định nghĩa và gán cho một biến được gọi là User, sau đó được export một mô-đun để có thể được tiếp tục sử dụng trong các phần khác của ứng dụng.

Salting và Hashing mật khẩu

Bạn không muốn lưu trữ mật khẩu của người dùng dưới dạng văn bản thuần túy. Dưới đây là điều bạn muốn làm khi người dùng nhập mật khẩu thuần văn bản khi đăng ký. Mật khẩu văn bản thuần túy sẽ được hash bằng cách sử dụng một salt được tạo ra từ ứng dụng của bạn (sử dụng bcryptjs). Mật khẩu hash này sau đó được lưu trữ trong database.

Nghe thật hay, phải không? Hãy thực hiện điều đó trong file user.js.

Bạn vừa tạo một phương thức sẽ được gọi trong các sự kiện đăng ký người dùng. Phương thức này sẽ nhận mật khẩu văn bản thuần túy mà người dùng đã nhập. Như tôi đã đề cập trước đó, mật khẩu thuần văn bản sẽ được băm bằng cách sử dụng một muối được tạo ra. Mật khẩu băm sẽ được trả về như mật khẩu cho người dùng.

Index và Route cho người dùng

Tạo một thư mục mới được gọi là routes. Trong thư mục mới này, tạo hai file mới: index.js users.js.

File index.js rất đơn giản. Nó sẽ tham chiếu tới index của ứng dụng của bạn. Hãy nhớ rằng bạn thiết lập middleware cho các route trong file app.js của mình khi bạn làm điều này.

Vì vậy, các route cho index của bạn đơn giản là hiển thị trang index, sẽ trông như sau.

Bây giờ đến route cho user (người dùng). Hiện tại, file route này sẽ làm 4 nhiệm vụ.

  1. Yêu cầu các dependency. Bạn sẽ cần phải yêu cầu dependency bạn đã cài đặt bằng cách sử dụng NPM.
  2. Xác thực input (dữ liệu nhập) của người dùng. Bạn muốn đảm bảo rằng người dùng không gửi biểu mẫu trống. Tất cả input là bắt buộc và tất cả phải là kiểu String. Email có xác nhận đặc biệt có tên gọi là .email(), đảm bảo rằng nội dung được nhập phù hợp với định dạng email, trong khi password được xác thực bằng cách sử dụng regular expression. Đối với pasword đã xác nhận, bạn muốn nó giống như mật khẩu đã được nhập. Joi sẽ xử lý các xác nhận này.
  3. Thiết lập router của bạn. Yêu cầu GET hiển thị trang đăng ký, trong khi yêu cầu POST khởi động khi người dùng nhấn nút để submit của form.
  4. Router được export dưới dạng mô-đun.

Code trông giống thế này.

Hãy nhìn kỹ hơn điều gì đang xảy ra trong yêu cầu POST.

Các giá trị được nhập trong form đăng ký có thể truy cập qua req.body và các giá trị trông giống thế này.

Điều này được xác thực bằng cách sử dụng userSchema mà bạn đã tạo ở trên và các giá trị được người dùng nhập vào được gán cho một biến được gọi là result.

Nếu gặp lỗi do xác thực, một thông báo lỗi được hiển thị tới người dùng và xuất hiện sự chuyển hướng đến trang đăng ký.

Mặt khác, chúng tôi cố gắng tìm xem liệu người dùng với cùng email có đang tồn tại hay không, vì bạn không muốn có hai hoặc nhiều người dùng có cùng địa chỉ email. Nếu người dùng được tìm thấy, họ được thông báo rằng địa chỉ email đã được sử dụng.

Trong trường hợp chưa có người dùng đã đăng ký có địa chỉ email đó, tiếp theo là hash mật khẩu. Đây là lúc bạn gọi phương thức hashPassword được tạo trong file user.js của bạn. Mật khẩu vừa hash được gán cho một biến được gọi là hash.

Không cần phải lưu trữ các confirmationPassword trong database. Vì vậy, nó sẽ bị xóa. Mật khẩu có sẵn từ kết quả vẫn là mật khẩu thuần tuý. Vì bạn không muốn lưu trữ mật khẩu thuần tuý trong database của mình, nên điều quan trọng là gán lại giá trị mật khẩu cho hash được tạo ra. Điều này được thực hiện bằng một dòng code.

Đối tượng người dùng mới được lưu vào database. Hiển thị thông báo nhanh cho biết đã đăng ký thành công và người dùng được chuyển hướng đến trang login.

Khởi động server bằng terminal bằng cách chạy:

Mở trình duyệt của bạn với địa chỉ http://localhost:5000 và bạn sẽ thấy ứng dụng mới của mình.

Tổng kết

Bây giờ bạn đã biết làm sao để triển khai tính năng đăng ký trong ứng dụng web Node. Bạn đã biết được tầm quan trọng của việc xác thực dữ liệu đầu vào của người dùng và cách thực hiện điều đó bằng Joi. Bạn cũng đã sử dụng bcryptjs để salt và hash mật khẩu của bạn.

Tiếp theo, bạn sẽ thấy làm thế nào để triển khai tính năng đăng nhập cho người dùng đã đăng ký. Tôi tin rằng bạn rất thích!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.