Hướng dẫn javascript keep user logged in - javascript giữ cho người dùng đăng nhập

Tôi đang sử dụng PHP, AJAX và JS cho sự phát triển PWA của tôi. Tôi muốn trạng thái đăng nhập của người dùng vẫn tồn tại khi anh ấy/cô ấy quay lại ứng dụng PWA. Ngay bây giờ tôi đang thực hiện nó thông qua sự trợ giúp của mã thông báo truy cập và lưu nó trong cookie với httponly qua PHP. Xác định nó ở đây -

1. Người dùng nhập chi tiết và đăng nhập vào ứng dụng.
2. Chi tiết đó được gửi đến phụ trợ PHP, thông qua Ajax.
3. Mã đăng nhập phụ trợ Kiểm tra xem chi tiết từ cơ sở dữ liệu và nếu được khớp, thì mã tạo mã thông báo băm ngẫu nhiên.
4. Mã phụ trợ lưu mà băm vào cookie với cờ httponly và an toàn.
5. Sau đó, người dùng được nhắc với một thông báo đăng nhập thành công.
6. Khi lần tiếp theo người dùng quay lại ứng dụng web, mã PHP máy chủ tìm kiếm giá trị băm đăng nhập đó được lưu trong cookie và tìm người dùng có liên quan từ cơ sở dữ liệu.
7. Nếu một trận đấu được tìm thấy, người dùng đã đăng nhập thành công.

Vì vậy, bây giờ mối quan tâm của tôi là -

1. Là toàn bộ quá trình này an toàn và giống như những gì được thực hiện trong ngành.
2. Nếu không, thì những gì có thể là cách tốt nhất để đạt được điều này với bảo mật.

Hỏi ngày 22 tháng 12 năm 2020 lúc 12:45Dec 22, 2020 at 12:45

5

Bạn có thể tìm thấy câu trả lời mà bạn đang tìm kiếm ở đây :]

"Giữ cho tôi đăng nhập" - cách tiếp cận tốt nhất

Điều quan trọng là sử dụng cookie băm.

Về phía khách hàng, bạn nên sử dụng một cookie đại diện cho "ID" của cookie "băm",

Khi lần tiếp theo người dùng quay lại ứng dụng web -> bạn sẽ kiểm tra cookie của anh ấy ["id"] với cookie băm mà bạn đã lưu trên máy chủ và kiểm tra một trận đấu [được thực hiện ở phía máy chủ].

Lưu ý: Hàm băm được thực hiện trên máy chủ của bạn. Một điều nữa: Đừng bao giờ để cookie [băm] rời khỏi máy chủ.
One more thing: never let that cookie[hashed] leaves the server.

Đã trả lời ngày 22 tháng 12 năm 2020 lúc 13:34Dec 22, 2020 at 13:34

LiorliorLIOR

566 huy hiệu đồng6 bronze badges

2

Cách sử dụng LocalStorage để giữ người dùng đăng nhập vào và ra với JavaScript

Trong bài đăng trên blog này- tôi sẽ nói về việc lưu trữ địa phương là gì và làm thế nào nó có lợi khi giữ cho người dùng đăng nhập và ra.

Trong dự án trường học gần đây của tôi, tôi quyết định có một tính năng đăng nhập- để người dùng có thể được đăng nhập cho đến khi họ đăng xuất. Việc cảnh báo lãng phí rằng nhiệm vụ Vanilla JS này bị cấm sử dụng các công cụ xác thực và ủy quyền vì lợi ích của thời gian. Không có bất kỳ công cụ hữu ích nào, bạn có thể viết các dòng dài của mã và có khả năng mất đi sự tỉnh táo của bạn. Vì vậy, hãy hét lên với huấn luyện viên của tôi vì đã cho tôi biết về LocalStorage!

LocalStorage là gì?

LocalStorage là một loại lưu trữ web cho phép các trang web và ứng dụng JavaScript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không có ngày hết hạn. Điều này có nghĩa là dữ liệu được lưu trữ trong trình duyệt sẽ tồn tại ngay cả sau khi cửa sổ trình duyệt đã được đóng.

Cú pháp

LocalStorage.id =

Có nhiều cách hơn để sử dụng LocalStorage, nhưng tôi sẽ tập trung làm thế nào để truy xuất ID.

Vì vậy, làm thế nào chúng ta làm điều đó?

Khi người dùng đăng nhập, ID sẽ được thực hiện và lưu trữ như vậy;

function postFetchForSignUp[] {
  let nameInput = document.querySelector["#name"]
  let usernameInput = document.querySelector["#username"]
  fetch['//localhost:3000/users', { // First, we make a Post fetch request where we want to store our users.
    method: 'POST',
    headers: {
      'Content-Type':'application/json',
      'Accept':'application/json'
    },
    body: JSON.stringify[{
      name: nameInput.value,
      username: usernameInput.value
    }]
  }]
  .then[res=>res.json[]]
  .then[user => {
    localStorage.clear[] // If there was a user signed in, this will                                                            // clear it up
    localStorage.id = user.id  // Then we can store the id we got 
    slapUser[user]
    logOutButton[]
  }]
}

Khi người dùng đăng nhập, ID sẽ được đưa vào và lưu trữ:

signInButton.addEventListener['click', e => {
  signInForm[]
  let form = signDiv.querySelector['.sign-in']
  let usernameInput = document.querySelector["#username"]
  form.addEventListener['submit', e=>{
    e.preventDefault[]
    fetch['//localhost:3000/users'] // We make a get fetch    // request where users are stored
    .then[res=>res.json[]] 
    .then[usersArray => { 
      let user = usersArray.find[function[user]{ 
          return user.username === usernameInput.value // Then we        // check if there is a user with a value given
        }]
      if [user]{
        signDiv.innerHTML = ""
        slapUser[user]
        localStorage.id = user.id // If there is so, we then store // it
        logOutButton[]
        writeReview[]
      }
    }]
  }]
}]

Khi người dùng đăng xuất, trình diễn địa phương sẽ bị xóa như vậy;

function logOutButton[]{
 let logOutButton = document.createElement["button"]
 logOutButton.className = "log-out-button"
 logOutButton.innerText = "Log Out"
 signDiv.append[logOutButton]
 logOutButton.addEventListener['click', e=>{
   localStorage.clear[] // We clear localStorage like so
 }]
}

Dưới đây là bản demo địa phương nhanh trên bảng điều khiển;

Tôi hy vọng blogpost này là hữu ích, và nó sẽ giúp bạn nhiều như nó đã làm cho tôi.

Làm thế nào để các trang web giữ cho người dùng đăng nhập?

Làm cách nào để giữ cho người dùng đăng nhập trên React?

Làm cách nào để giữ cho cookie của tôi đăng nhập?