Vietnam

    Nodejs.vn

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    • Groups
    • Search
    1. Home
    2. dou.jakhen
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 6
    • Best 0
    • Controversial 0
    • Groups 0

    Đỗ Gia Khánh

    @dou.jakhen

    0
    Reputation
    1
    Profile views
    6
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website www.facebook.com/dou.jakhen/ Age 20

    dou.jakhen Unfollow Follow

    Latest posts made by dou.jakhen

    • Node JS - Tạo server Authentication và Authorization đơn giản với JWT , bcrypt trong chưa đầy 10 phút

      Chức năng đăng nhập đăng kí gần như ứng dụng nào cũng có ,trong đó bảo mật thông tin , xác thực người dùng vẫn luôn là vấn đề thiết yếu , vậy sau đây hãy cùng tôi sử dụng JWT , Bcrypt để làm Authentication xác thực cho ứng dụng NodeJS nhé

      Authentication và Authorization

      Mình sẽ có một bài viết riêng về 2 khái niệm này và so sánh chúng , theo dõi để cập nhật sớm nhất nhé ^^

      Trước hết hãy cùng nhắc lại JWT là gì

      JWT là một cơ chế bảo mật để 2 phía client và server có thể chia sẻ thông tin với nhau . Các thông tin trong một chuỗi JWT được lưu dưới dạng JSON . Trong đó chuỗi được chia làm 3 phần là header , payload , signature được ngăn cách bởi dấu "."

      Một ví dụ về JWT

      Mã hóa

      const jwt = require('jsonwebtoken'); 
      var token = jwt.sign({
         userId: userData._id
      }, 'secretKey' , { expiresIn: 15 * 60 * 1000})
      

      Đối số đầu tiên truyền vào có thể là string hoặc object , mình sử dụng object vì trong thực tế cần mã hóa nhiều thông tin của người dùng hơn là chỉ mỗi id .
      secretKey là một đoạn string bất kỳ mà bạn phải giữ bảo mật về nó , không nên để lộ . expiresIn là thời gian sống của token này , đơn vị là ms , ở đây mình đặt exprire time là 15 phút

      Kết quả

      eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbiI6IjYyMDA4ZGM1YWQ1ZjM4MzkzNDhiYjkzOSIsImlhdCI6MTY0NDIwNTE4NywiZXhwIjoxNjQ0MjA4Nzg3fQ.OwnkztlOIcowHPGyVkfFAzvo1rzWis43JOt6WhSQUUg
      

      JWT sẽ dùng để làm gì trong ứng dụng này ?

      Đối với Authorization , sau khi đăng nhập , ta có token token hay accessToken để xác định được người dùng và quyền truy cập của họ . Ta sẽ sử dụng JWT để mã hóa và trao đổi giữa sever với client . Thường thì chuỗi được mã hóa sẽ là object chứa id của user được lưu trong DB , và một số dữ liệu cần thiết .

      Vậy còn Bcrypt là cái chi ?

      Bcrypt là một thuật toán mã hóa mật khẩu được thiết kế bởi Niels Provos and David Mazières.

      Tại sao ứng dụng của mình cần Bcrypt ?

      Sử dụng Bcrypt cho Authentication , mã hóa mật khẩu của người dùng

      Trong nodejs , node module Bcrypt rất dễ để cài đặt và sử dụng cùng với đó là tính bảo mật cao . Mỗi lần mã hóa lại cho ra một kết quả khác nhau vì vậy rất khó để dò được mật khẩu .

      Ví dụ sử dụng bcrypt

      var passwordHash = await bcrypt.hash(userdata.password , 10)
      // Lưu passwordHash vào DB
      

      Đối số đầu tiên là password của người dùng khi đăng ký tài khoản , đối số thứ 2 là saltRound . Hãy dùng await để trong trường hợp hash tốn thời gian thì vẫn ra được kết quả trong DB nhé .

      Kết quả

      $2b$10$ljxxJLlduwm5r.mMycMWhO2kg9tqCD/FxbHYzWAwk3O.oyNo0zScS
      

      Mình sẽ demo services và routes của chức năng đăng kí và đăng nhập nhé , full code server mình sẽ để dưới cùng để các bạn tham khảo

      /services/accounts

      const Account = require('../models/Account');
      const bcrypt = require('bcrypt')
      
      async function getUser(userdata) {
          const data = await Account.findOne({ 
              user: userdata.user, 
          });
          const match = await bcrypt.compare(userdata.password, data.password); 
          //hàm so sánh password user nhập vào với password mã hóa trong DB 
          if(match){
              return data
          }else{
              return null
          }
      }
        
      async function createUser(userdata) {
          var passwordHash = await bcrypt.hash(userdata.password , 10)
          const newUSer = await new Account({
              user: userdata.user,
              password: passwordHash,
          });
          return newUSer.save()
      }
        
      module.exports = {
          getUser: getUser,
          createUser: createUser,
      };
      

      /routes/signup

      const express = require('express');
      const router = express.Router();
      const accountServices = require('../services/account');
      const jwt = require('jsonwebtoken');
      
      router.get('/', (req,res,next)=>{
          res.render('signup');
      })
      
      router.post('/',async (req,res,next)=>{
          try {
              const userData = await accountServices.createUser(req.body);
              res.status(200).json({
                  statusCode: 200,
                  mess: 'Signup success'
      
              }
          } catch (error) {
              res.status(500).json({
                  statusCode: 500,
                  mess: 'Sever error'
              })
          }
      
      });
      
      module.exports = router;
      

      /routes/login

      const express = require('express');
      const router = express.Router();
      const accountServices = require('../services/account');
      const jwt = require('jsonwebtoken');
      
      router.get('/', (req,res,next)=>{
          res.render('login');
      })
      
      router.post('/',async (req,res,next)=>{
          try {
              const userData = await accountServices.getUser(req.body);
              if(!userData){
                  res.status(400).json({
                      statusCode: 400,
                      mess : 'User or password was wrong'
                  })
              }else{
                  res.status(200).json({
                      statusCode: 200,
                      mess: 'Login success',
                      token : jwt.sign({token: userData._id},'id',{expiresIn: '1h'})
                  })
              }
          } catch (error) {
              res.status(500).json({
                  statusCode: 500,
                  mess: 'Sever error'
              })
          }
      
      });
      
      
      
      module.exports = router;
      

      Full code server : https://github.com/nsutgkhanhv1/basic-authen
      Tham khảo thêm tại :
      https://www.npmjs.com/package/bcrypt
      https://www.npmjs.com/package/jsonwebtoken

      posted in Node.JS
      dou.jakhen
      dou.jakhen
    • Tạo Notification Desktop Alert cho Facebook hiển thị trên desktop bằng JavaScript như thế nào ? ( How to show Facebook notification on your desktop using JavaScript ? )

      *Có những thông báo quan trọng mà không ai muốn bỏ lỡ , thế nhưng khi thực hiện các tác vụ khác người dùng có thể vô tình bỏ qua thông báo từ trình duyệt , vậy có một cách nào đó khác để gửi thông báo cho người dùng từ trình duyệt không ? Hẳn các bạn không còn lạ lẫm j với Notification hiển thị trên desktop mỗi lần facebook gửi thông báo có tin nhắn mới cho bạn . Làm cách nào để code một Notification thông báo từ browser cho người dùng của bạn ? Hãy cùng tôi tìm hiểu qua bài viết này nhé ! *

      Notification Desktop là gì ?

      Nó là một dạng lời nhắn cảnh báo từ desktop ( desktop alert ) chứ không phải từ browser của bạn , tuy nhiên vẫn có thể điều khiển nó từ browser

      Có nhiều cách làm Notification Desktop cho facebook hay các ứng dụng gửi thông báo tương tự ,nhưng đây là cách đơn giản nhất mình biết để hiển thị thông báo tới desktop - desktop alert nhé ^^

      Cùng tạo một desktop notification app nào

      Trước hết phải kiểm tra xem trình duyệt của bạn có hỗ trợ desktop notification không đã ^^

      if (!window.Notification) {
              console.log('Trình duyệt không hỗ trợ Desktop Notification - Browser does not support notifications.');
          }
      

      Nếu trình duyệt có hỗ trợ , kế đến phải kiểm tra xem liệu người dùng đã cho phép hiển thị desktop notification hay chưa . Để kiểm tra ta có method Notification.permission

      Method này có 3 kết quả như sau :

      Default : Mặc định là không cho phép khi người dùng không trả lời yêu cầu
      Granted : Người dùng đã cho phép
      Denied : Người dùng từ chối hiển thị thông báo desktop

      Tiếp đó , nếu người dùng đã cho phép , ta cài đặt luôn Notification và hiển thị

      if (Notification.permission === 'granted') {
                  // show desktop notification here
                  var notify = new Notification('Xin chào !', {
                      body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                      icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                  });
           // Khi nhấn vào Notification này browser sẽ mở một tab mới với đường dẫn đã được cài
                  notify.onclick = (e) =>{ 
                      window.open('https://nodejs.vn/')
                  }
              }
      

      Vậy nếu người dùng chưa duyệt chặn hay cho phép thì sao ? Đương nhiên rồi , yêu cầu người dùng cho phép desktop notification :v

      else {
                  // request permission from user
                  Notification.requestPermission().then(function (p) {
                      if (p === 'granted') {
                          // show notification here
                          var notify = new Notification('Xin chào !', {
                              body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                              icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                          });
                          notify.onclick = (e) =>{
                              window.open('https://nodejs.vn/')
                          }
                      } else {
                          console.log('User blocked notifications.');
                      }
                  }).catch(function (err) {
                      console.error(err);
                  });
              }
      

      Full code

      Javascript

      <script>
          function notification() {
          if (!window.Notification) {
              console.log('Browser does not support notifications.');
          } else {
              // check if permission is already granted
              if (Notification.permission === 'granted') {
                  // show notification here
                  var notify = new Notification('Xin chào !', {
                      body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                      icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                  });
                  notify.onclick = (e) =>{
                      window.open('https://nodejs.vn/')
                  }
              } else {
                  // request permission from user
                  Notification.requestPermission().then(function (p) {
                      if (p === 'granted') {
                          // show notification here
                          var notify = new Notification('Xin chào !', {
                              body: 'Bạn có thông báo mới từ NodeJS Việt Nam',
                              icon: 'http://103.170.123.165:4567/assets/uploads/system/site-logo.png',
                          });
                          notify.onclick = (e) =>{
                              window.open('https://nodejs.vn/')
                          }
                      } else {
                          console.log('User blocked notifications.');
                      }
                  }).catch(function (err) {
                      console.error(err);
                  });
              }
          }
      }
       </script>
      

      Để đơn giản mình sẽ cho hàm notification thực thi ngay khi trang được load nhé

      HTML

      <body onload="notification()"></body>
      

      Như vậy , chỉ với vài bước đơn giản , chúng ta đã tạo được một desktop notification app thật tiện lợi . Hãy áp dụng ngay Desktop Notification trên chính ứng dụng của bạn nhé

      posted in Javacsript
      dou.jakhen
      dou.jakhen
    • Recognition là gì ? Sử dụng Speech Recognition API như thế nào ? Nhận diện giọng nói chuyển thành văn bản với JavaScript

      Tìm kiếm bằng giọng nói là một chức năng khá phổ biến ở các ứng dụng , phần mềm nhận diện giọng nói hiện nay vì tính tiện dùng của nó , chức năng thú vị này đang dần phổ biến hơn trên web browser , vậy ta có thể thực hiện điều đó như nào với JavaScript , cùng tìm hiểu nhé .

      Vậy Speech Recognition là gì

      Recognition là nhận diện, nhận thức , speech là giọng nói , lời nói . Nghe có j đó cao siêu nhưng dịch ra nó lại đơn giản là nhận diện giọng nói ~ recognition voice vậy thôi :v

      Nhận diện giọng nói - sử dụng SpeechRecognition API có khó không

      Chức năng nhận diện giọng nói sẽ không còn xa tầm với chúng ta kể cả những bạn mới học nếu bạn biết đến SpeechRecognition . API

      SpeechRecognition - Nhận diện giọng nói , đây là một API trong HTML5 cho phép chúng ta nhận diện giọng nói và chuyển nó thành văn bản. Hãy cùng code một ứng dụng đơn giản nhé !
      Làm một ứng dụng tìm kiếm bằng giọng nói - search by speech với JavaScript
      Trước tiên tạo biến SpeechRecognition lưu web API này từ window

      var SpeechRecognition = window.speechRecognition || window.webkitSpeechRecognition;
      

      Tạo một bản recognition mới

      var recognition = new SpeechRecognition();
      

      Cài đặt tiếp tục nghe hay tắt sau khi nghe âm thanh

      recognition.continuous = true;
      

      Đặt cho phép kết quả tạm thời

      recognition.interimResults = false;
      

      Cài đặt ngôn ngữ

      recognition.lang = 'en-US';
      

      Event xử lý kết quả nhận được sau khi stop

      recognition.onresult = function(event) {
                 var q = document.getElementById('q');
                 if (event.results.length > 0) {
                     q.value = event.results[0][0].transcript;
                     q.form.submit();
                 }
             }
      

      HTML :

      <form action="https://www.example.com/search">
             <input type="search" id="q" name="q" size=60>
             <input type="button" value="Click to Speak" onclick="recognition.start()">
             <input type="button" value="Click to Stop" onclick="recognition.stop()">
         </form>
      

      Với vài bước như vậy ta đã có một chức năng nhận diện giọng nói - tìm kiếm bằng giọng nói rồi , khá là đơn giản phải không nào , hãy thử áp dụng SpeechRocognitionAPI vào web của bạn nhé ^^

      #speech_recognition #nhận_diện_giọng_nói
      Tham khảo thêm tại : https://wicg.github.io/speech-api/

      posted in Frontend
      dou.jakhen
      dou.jakhen
    • Recognition là gì ? Sử dụng Speech Recognition API như thế nào ? Nhận diện giọng nói chuyển thành văn bản với JavaScript

      Tìm kiếm bằng giọng nói là một chức năng khá phổ biến ở các ứng dụng , phần mềm nhận diện giọng nói hiện nay vì tính tiện dùng của nó , chức năng thú vị này đang dần phổ biến hơn trên web browser , vậy ta có thể thực hiện điều đó như nào với JavaScript , cùng tìm hiểu nhé .

      Vậy Speech Recognition là gì

      Recognition là nhận diện, nhận thức , speech là giọng nói , lời nói . Nghe có j đó cao siêu nhưng dịch ra nó lại đơn giản là nhận diện giọng nói ~ recognition voice vậy thôi :v

      Nhận diện giọng nói - sử dụng SpeechRecognition API có khó không

      Chức năng nhận diện giọng nói sẽ không còn xa tầm với chúng ta kể cả những bạn mới học nếu bạn biết đến SpeechRecognition . API

      SpeechRecognition - Nhận diện giọng nói , đây là một API trong HTML5 cho phép chúng ta nhận diện giọng nói và chuyển nó thành văn bản. Hãy cùng code một ứng dụng đơn giản nhé !
      Làm một ứng dụng tìm kiếm bằng giọng nói - search by speech với JavaScript
      Trước tiên tạo biến SpeechRecognition lưu web API này từ window

      var SpeechRecognition = window.speechRecognition || window.webkitSpeechRecognition;
      

      Tạo một bản recognition mới

      var recognition = new SpeechRecognition();
      

      Cài đặt tiếp tục nghe hay tắt sau khi nghe âm thanh

      recognition.continuous = true;
      

      Đặt cho phép kết quả tạm thời

      recognition.interimResults = false;
      

      Cài đặt ngôn ngữ

      recognition.lang = 'en-US';
      

      Event xử lý kết quả nhận được sau khi stop

      recognition.onresult = function(event) {
                 var q = document.getElementById('q');
                 if (event.results.length > 0) {
                     q.value = event.results[0][0].transcript;
                     q.form.submit();
                 }
             }
      

      HTML :

      <form action="https://www.example.com/search">
             <input type="search" id="q" name="q" size=60>
             <input type="button" value="Click to Speak" onclick="recognition.start()">
             <input type="button" value="Click to Stop" onclick="recognition.stop()">
         </form>
      

      Với vài bước như vậy ta đã có một chức năng nhận diện giọng nói - tìm kiếm bằng giọng nói rồi , khá là đơn giản phải không nào , hãy thử áp dụng SpeechRocognitionAPI vào web của bạn nhé ^^

      #speech_recognition #nhận_diện_giọng_nói
      Tham khảo thêm tại : https://wicg.github.io/speech-api/

      posted in Javacsript
      dou.jakhen
      dou.jakhen
    • Trở thành DEV tay to với series 30 days thực chiến Project HTML, CSS, JS

      Hẳn là có rất nhiều các bạn mới học sẽ gặp khó khăn trong việc áp dụng kiến thức đã học vào trong dự án thực chiến , sản phẩm của các bạn đôi khi trở nên thô sơ và thiếu sức sáng tạo . Vậy , giải pháp ở đây là gì ?

      Giải pháp dành cho các bạn mới học để áp dụng kiến thức vào thực chiến

      Trăm hay không bằng tay quen , giải pháp tốt nhất chính là luyện tập thật nhiều , nghĩ ra những bài toán để áp dụng kiến thức đã học vào thực tế , trong series 30 days thực chiến này , chúng ta sẽ làm một dự án thực tế mỗi ngày mà không hề dùng bất kì thư viện hay framework nào . Mình tin rằng sau series này , trình độ các bạn sẽ đi lên một tầm cao mới, có thể tự tạo ra những sản phẩm tuyệt vời , thậm chí có thể đi làm được ngay . Hãy khám phá chúng ta sẽ làm những gì trong 30 days thực chiến nhé .

      Roadmap 30 days thực chiến HTML , CSS, JS:

      • Day 1 : Thiết kế Product Card bắt mắt
      • Day 2 : Profile Card giới thiệu bản thân , member trong vòng 5 phút
      • Day 3 : Bật mí cách tạo Modal Popup vừa đẹp vừa đơn giản
      • Day 4 : Hiệu ứng show ảnh Image Gallery chuyên nghiệp
      • Day 5 : Simple Search Box
      • Day 6 : Cần biết những gì khi bắt sự kiện keydown
      • Day 7 : Search Tags có gì hay ho ?
      • Day 8 : Làm một Validate form có tâm
      • Day 9 : Đi làm phải biết dùng api , cùng call api để làm một Weather App đơn giản .
      • Day 10 : Todo List , bài tập kinh điển ai cũng phải làm qua
      • Day 11 : Cùng tạo Toast Notification để gửi thông báo cho user
      • Day 12 : Custom Range Slider sáng tạo
      • Day 13 : Làm thế nào để Upload và Preview ảnh
      • Day 14 : Thể hiện khả năng trình bày với Slideshow đẹp mắt
      • Day 15 : Chức năng tìm kiếm Filter sản phẩm liệu có khó ?
      • Day 16 : Một vài hiệu ứng Onscroll đẹp mắt cho các bạn áp dụng
      • Day 17 : Hiệu ứng Counter Up
      • Day 18 : Drag and Drop - kéo thả hình ảnh sáng tạo
      • Day 19 : Liệu có thể tự vẽ vời trên chính ứng dụng của bạn ?
      • Day 20 : Hiệu ứng Typing phổ biến mà không phải ai cũng biết
      • Day 21 : Light / Dark Mode
      • Day 22 : Cùng làm Filter Element sịn sò thu hút người xem
      • Day 23 : Tạo một chiếc kính lúp phóng to hình ảnh của bạn
      • Day 24 : Hover Board sáng tạo , đẹp mắt
      • Day 25 : Custom Video Player đơn giản
      • Day 26 : Làm Validator Password như thế nào ?
      • Day 27 : Tooltip - Hiển thị tips cho người xem dễ hiểu
      • Day 28 : Performance như thế nào khi sản phẩm chưa load kịp , hãy cùng tạo Skeleton Loading Effect
      • Day 29 : Tạo một chiếc piano vui nhộn
      • Day 30 : Simple Carousel đơn giản mà thực tế

      Mình sẽ để link từng bài viết dưới đây , hãy theo dõi để cập nhật project sớm nhất nhé ^^

      posted in Frontend
      dou.jakhen
      dou.jakhen
    • Token là gì ? Authentication như thế nào với JWT trong NodeJS ?

      Token không còn là một khái niệm mới mẻ , tuy nhiên không phải ai cũng có thể trả lời suôn sẻ khi được hỏi về nó ? Bài viết này sẽ đề cập tới khái niệm token và xác thực người dùng với JWT trong NodeJS, hy vọng qua bài viết các bạn sẽ hiểu hơn về khái niệm token , JWT này

      Nội dung bài viết

      • Token là gì ?
      • Token bao gồm những gì ?
      • Token thường được lưu ở đâu ?
      • Gửi token từ client tới server như thế nào ?
      • Authentication với JWT trong NodeJS

      Token là gì ?
      token.png
      Thông thường , token được hiểu là một dạng chữ ký số hay chữ ký điện tử đã được mã hóa thành những con số trên những thiết bị chuyên biệt .
      Token được tạo ra thường sẽ hết hạn sau một thời gian bất kể người sử dụng có dùng đến nó hay không .

      Đối với việc bảo mật các giao dịch, thanh toán online , nó được tạo ngẫu nhiên dưới dạng OTP chỉ dùng một lần .

      Thế nhưng trong lập trình website hay bảo mật các ứng dụng , access token hay gọi tắt là token được tạo ra để sever có thể xác định danh tính của người sử dụng mỗi khi client call api từ đó trả về dữ liệu phù hợp , token có thể được sử dụng nhiều lần trong khoảng thời gian nó tồn tại.

      Token bao gồm những gì ?

      Token thường có 3 thành phần chính :

      • Id : Thường là chuỗi ký tự xác định danh tính người sử dụng .
      • Expired Time : Thời gian hết hạn của token
      • Signature : Chữ ký - phần này sẽ được mã hóa qua thuật toán ( Hashing )

      Token thường được lưu ở đâu ?

      Sau khi người dùng đăng nhập , server sẽ trả về token , khi đó 2 nơi phổ biến nhất mà client thường lưu token đó là Cookies và localStorage .

      Gửi token từ client tới server như thế nào ?

      Có 3 cách để client gửi token tới sever

      Cách 1 : Gửi qua header HTTP
      Ví dụ về config header gửi đi dưới dạng json

      Config header gửi đi dưới dạng json

      Cách 2 : Gửi qua phương thức POST , PUT, ... Khi đó token sẽ được đặt trong body .
      Sử dụng axios để gửi token qua phương thức POST
      Cách 3 : Gửi dưới dạng params trong url request ( nhưng mình không khuyến khích dạng này vì giao diện url không thân thiện với người sử dụng , không ai muốn nhìn một đoạn mã rối mắt mà họ không hiểu j cả ^^)
      url quá dài
      Authentication với JWT trong NodeJS

      Để bảo mật thông tin người dùng , lập trình viên có thể tự viết một thuật toán để decode và encode cho ứng dụng của mình , thế nhưng trong NodeJS , JWT thường được nhắc đến để xử lý vấn đề này .

      Authentication với JWT

      JWT là một tiêu chuẩn bảo mật để 2 phía client và server có thể chia sẻ thông tin với nhau .

      Mỗi khi người dùng sử dụng username và password để đăng nhập , thông tin này sẽ được server xác thực và trả về một token đã được mã hóa thông qua JWT cho client .

      Mỗi token chỉ có một thời hạn nhất định , sau khi hết hạn đó , user sẽ phải nhập lại username và password nếu muốn truy cập hệ thống để nhận dữ liệu trả về . Khi đó sẽ sinh ra nhiều bất tiện , khó chịu trong sử dụng khi cứ 10-20p phải lặp lại thao tác đó một lần.

      Và từ đó khái niệm access token và refresh Token ra đời. Chúng ta sẽ tìm hiểu kỹ hơn về JWT , tạo một sever authentication đơn giản để hiểu rõ hơn cách sử dụng JWT và refresh Token trong những bài viết sau .

      posted in Node.JS
      dou.jakhen
      dou.jakhen