前端到底该如何安全的实现“记住密码”？

在 web 应用里，“记住密码”这个小小的功能，可是咱用户的贴心小棉袄啊，用起来超级方便！但话说回来，咱们得怎样做才能既让用户享受这便利，又能牢牢护住他们的数据安全呢？这可得好好琢磨一番哦！接下来，咱们就来聊聊，有哪些靠谱的方法能实现“记住密码”这个功能，而且安全性也是杠杠的！

1. 使用 localStorage

localStorage 是一种持久化存储方式，数据在浏览器关闭后仍然存在。适用于需要长期保存的数据。

示例代码

// 生成对称密钥
async function generateSymmetricKey() {
const key = await crypto.subtle.generateKey(

        {
name: "AES-GCM",
length: 256,

        },
true,

        ["encrypt", "decrypt"]

    );
return key;

}

// 加密数据
async function encryptData(data, key) {
const iv = crypto.getRandomValues(new Uint8Array(12));
const encryptedData = await crypto.subtle.encrypt(

        {
name: "AES-GCM",
iv: iv,

        },

        key,
new TextEncoder().encode(data)

    );
return { iv, encryptedData };

}

// 解密数据
async function decryptData(encryptedData, key, iv) {
const decryptedData = await crypto.subtle.decrypt(

        {
name: "AES-GCM",
iv: iv,

        },

        key,

        encryptedData

    );
return new TextDecoder().decode(decryptedData);

}

// 保存用户信息
async function saveUserInfo(username, password) {
const key = await generateSymmetricKey();
const { iv, encryptedData } = await encryptData(password, key);
localStorage.setItem('username', username);
localStorage.setItem('password', JSON.stringify({ iv, encryptedData }));
// 密钥可以存储在更安全的地方，如服务器端

}

// 获取用户信息
async function getUserInfo() {
const username = localStorage.getItem('username');
const { iv, encryptedData } = JSON.parse(localStorage.getItem('password'));
const key = await generateSymmetricKey(); // 这里应使用同一个密钥
const password = await decryptData(encryptedData, key, iv);
return { username, password };

}

// 示例：用户登录时调用
async function login(username, password, rememberMe) {
if (rememberMe) {
await saveUserInfo(username, password);

    }
// 其他登录逻辑

}

// 示例：页面加载时自动填充
window.onload = async function() {
const userInfo = await getUserInfo();
if (userInfo.username && userInfo.password) {
document.getElementById('username').value = userInfo.username;
document.getElementById('password').value = userInfo.password;

    }

};

2. 使用 sessionStorage

sessionStorage 是一种会话级别的存储方式，数据在浏览器关闭后会被清除。适用于需要临时保存的数据。

示例代码

// 保存用户信息
async function saveUserInfoSession(username, password) {
const key = await generateSymmetricKey();
const { iv, encryptedData } = await encryptData(password, key);

    sessionStorage.setItem('username', username);

    sessionStorage.setItem('password', JSON.stringify({ iv, encryptedData }));
// 密钥可以存储在更安全的地方，如服务器端

}

// 获取用户信息
async function getUserInfoSession() {
const username = sessionStorage.getItem('username');
const { iv, encryptedData } = JSON.parse(sessionStorage.getItem('password'));
const key = await generateSymmetricKey(); // 这里应使用同一个密钥
const password = await decryptData(encryptedData, key, iv);
return { username, password };

}

// 示例：用户登录时调用
async function loginSession(username, password, rememberMe) {
if (rememberMe) {
await saveUserInfoSession(username, password);

    }
// 其他登录逻辑

}

// 示例：页面加载时自动填充
window.onload = async function() {
const userInfo = await getUserInfoSession();
if (userInfo.username && userInfo.password) {
document.getElementById('username').value = userInfo.username;
document.getElementById('password').value = userInfo.password;

    }

};

3. 使用 IndexedDB

IndexedDB 是一种更为复杂和强大的存储方式，适用于需要存储大量数据的场景。

示例代码

// 打开数据库
function openDatabase() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('UserDatabase', 1);

        request.onupgradeneeded = (event) => {
const db = event.target.result;

            db.createObjectStore('users', { keyPath: 'username' });

        };

        request.onsuccess = (event) => {
resolve(event.target.result);

        };

        request.onerror = (event) => {
reject(event.target.error);

        };

    });

}

// 保存用户信息
async function saveUserInfoIndexedDB(username, password) {
const key = await generateSymmetricKey();
const { iv, encryptedData } = await encryptData(password, key);
const db = await openDatabase();
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');

    store.put({ username, iv, encryptedData });
// 密钥可以存储在更安全的地方，如服务器端

}

// 获取用户信息
async function getUserInfoIndexedDB(username) {
const db = await openDatabase();
return new Promise((resolve, reject) => {
const transaction = db.transaction('users', 'readonly');
const store = transaction.objectStore('users');
const request = store.get(username);

        request.onsuccess = async (event) => {
const result = event.target.result;
if (result) {
const key = await generateSymmetricKey(); // 这里应使用同一个密钥
const password = await decryptData(result.encryptedData, key, result.iv);
resolve({ username: result.username, password });

            } else {
resolve(null);

            }

        };

        request.onerror = (event) => {
reject(event.target.error);

        };

    });

}

// 示例：用户登录时调用
async function loginIndexedDB(username, password, rememberMe) {
if (rememberMe) {
await saveUserInfoIndexedDB(username, password);

    }
// 其他登录逻辑

}

// 示例：页面加载时自动填充
window.onload = async function() {
const username = 'exampleUsername'; // 从某处获取用户名
const userInfo = await getUserInfoIndexedDB(username);
if (userInfo && userInfo.username && userInfo.password) {
document.getElementById('username').value = userInfo.username;
document.getElementById('password').value = userInfo.password;

    }

};

4. 使用 Cookie

Cookie 是一种简单的存储方式，适用于需要在客户端和服务器之间传递少量数据的场景。需要注意的是，Cookie 的安全性较低，建议结合 HTTPS 和 HttpOnly 属性使用。

示例代码

// 设置 Cookie
function setCookie(name, value, days) {
const date = new Date();

    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";

}

// 获取 Cookie
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);

    }
return null;

}

// 保存用户信息
async function saveUserInfoCookie(username, password) {
const key = await generateSymmetricKey();
const { iv, encryptedData } = await encryptData(password, key);
setCookie('username', username, 7);
setCookie('password', JSON.stringify({ iv, encryptedData }), 7);
// 密钥可以存储在更安全的地方，如服务器端

}

// 获取用户信息
async function getUserInfoCookie() {
const username = getCookie('username');
const { iv, encryptedData } = JSON.parse(getCookie('password'));
const key = await generateSymmetricKey(); // 这里应使用同一个密钥
const password = await decryptData(encryptedData, key, iv);
return { username, password };

}

// 示例：用户登录时调用
async function loginCookie(username, password, rememberMe) {
if (rememberMe) {
await saveUserInfoCookie(username, password);

    }
// 其他登录逻辑

}

// 示例：页面加载时自动填充
window.onload = async function() {
const userInfo = await getUserInfoCookie();
if (userInfo.username && userInfo.password) {
document.getElementById('username').value = userInfo.username;
document.getElementById('password').value = userInfo.password;

    }

};

5. 使用 JWT（JSON Web Token）

JWT 是一种常用的身份验证机制，特别适合在前后端分离的应用中使用。JWT 可以安全地传递用户身份信息，并且可以在客户端存储以实现“记住密码”功能。

示例代码

服务器端生成 JWT

假设你使用 Node.js 和 Express 作为服务器端框架，并使用 jsonwebtoken 库来生成和验证 JWT。

const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

const SECRET_KEY = 'your_secret_key';

// 用户登录接口

app.post('/login', (req, res) => {
const { username, password } = req.body;
// 验证用户名和密码
if (username === 'user' && password === 'password') {
// 生成 JWT
const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });

        res.json({ token });

    } else {

        res.status(401).json({ message: 'Invalid credentials' });

    }

});

// 受保护的资源

app.get('/protected', (req, res) => {
const token = req.headers['authorization'];
if (!token) {
return res.status(401).json({ message: 'No token provided' });

    }

    jwt.verify(token, SECRET_KEY, (err, decoded) => {
if (err) {
return res.status(401).json({ message: 'Failed to authenticate token' });

        }

        res.json({ message: 'Protected resource', user: decoded.username });

    });

});


app.listen(3000, () => {
console.log('Server is running on port 3000');

});

客户端存储和使用 JWT

在客户端，可以使用 localStorage 或 sessionStorage 来存储 JWT，并在后续请求中使用。

// 用户登录
async function login(username, password, rememberMe) {
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'

        },
body: JSON.stringify({ username, password })

    });
const data = await response.json();
if (response.ok) {
const token = data.token;
if (rememberMe) {
localStorage.setItem('token', token);

        } else {

            sessionStorage.setItem('token', token);

        }

    } else {
console.error(data.message);

    }

}

// 获取受保护的资源
async function getProtectedResource() {
const token = localStorage.getItem('token') || sessionStorage.getItem('token');
if (!token) {
console.error('No token found');
return;

    }
const response = await fetch('/protected', {
method: 'GET',
headers: {
'Authorization': token

        }

    });
const data = await response.json();
if (response.ok) {
console.log(data);

    } else {
console.error(data.message);

    }

}

// 示例：用户登录时调用
document.getElementById('loginButton').addEventListener('click', async () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const rememberMe = document.getElementById('rememberMe').checked;
await login(username, password, rememberMe);

});

// 示例：页面加载时自动填充
window.onload = async function() {
await getProtectedResource();

};

总结

如上示例，展示了如何使用 localStorage、sessionStorage、IndexedDB、Cookie 和 JWT 来实现“记住密码”功能。每种方式都有其适用场景和安全考虑，大家可以根据具体需求选择合适的实现方式。

欢迎在评论区留言讨论~
Happy coding! 🚀