单设备登录
SDL（Single Device Login）是一种单设备登录的机制，它允许用户在同一时间只能在一个设备上登录，当用户在其他设备上登录时，之前登录的设备会被挤下线。
应用场景
- 视频影音，防止一个账号共享，防止一些账号贩子
- 社交媒体平台：社交媒体平台通常有多种安全措施来保护用户账户，其中之一就是单设备登录。这样可以防止他人在未经授权的情况下访问用户的账户，并保护用户的个人信息和隐私
- 对于在线购物和电子支付平台，用户的支付信息和订单详情是敏感的。通过单设备登录，可以在用户进行支付操作时增加额外的安全层级，确保只有授权设备可以进行支付操作
- 对于电子邮箱和通讯应用，用户的个人和机密信息都存储在其中。通过单设备登录机制，可以确保用户的电子邮箱或通讯应用只能在一个设备上登录，避免账户被他人恶意使用
实现思路
设计数据结构
{id:{socket:ws实例fingerprint:浏览器指纹}
}
- 第一次登录的时候记录用户id，并且记录socket信息，和浏览器指纹
- 当有别的设备登录的时候发现之前已经连接过了，便使用旧的socket发送下线通知，并且关闭旧的socket，更新socket替换成当前新设备的ws连接
浏览器指纹
指纹技术有很多种，这里采用canvas指纹技术
网站将这些颜色数值传递给一个算法，算法会对这些数据进行复杂的计算，生成一个唯一的标识。由于用户使用的操作系统、浏览器、GPU、驱动程序会有差异，在绘制图形的时候会产生差异，这些细微的差异也就导致了生成的标识（哈希值）不一样。因此，每一个用户都可以生成一个唯一的Canvas指纹
实现代码
nodejs端
import express from 'express'
import { WebSocketServer } from 'ws'
import cors from 'cors'
const app = express()
app.use(cors())
app.use(express.json())
//存放数据结构
const connection = {}const server = app.listen(3000)
const wss = new WebSocketServer({ server })wss.on('connection', (ws) => {ws.on('message', (message) => {const data = JSON.parse(message)if (data.action === 'login') {if (connection[data.id] && connection[data.id].fingerprint) {console.log('账号在别处登录')//提示旧设备connection[data.id].socket.send(JSON.stringify({action:'logout',message:`你于${new Date().toLocaleString()}账号在别处登录` }))connection[data.id].socket.close() //断开旧设备连接connection[data.id].socket = ws //更新ws} else {console.log('首次登录')connection[data.id] = {socket: ws, //记录wsfingerprint: data.fingerprint //记录指纹}}}})
})
浏览器端
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>SDL</h1><script src="./md5.js"></script><script>//浏览器指纹const createBrowserFingerprint = () => {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')ctx.fillStyle = 'red'ctx.fillRect(0, 0, 1, 1)return md5(canvas.toDataURL())}//谷歌abf12f62e03d160f7f24144ef1778396//火狐80bea69bfc7cad5832d12e41714cf677//Edge abf12f62e03d160f7f24144ef1778396const ws = new WebSocket('ws://192.168.120.145:3000') //socket本地IP+端口ws.addEventListener('open', () => {ws.send(JSON.stringify({action: 'login', //动作登录id: 1, //用户IDfingerprint: createBrowserFingerprint() //浏览器指纹}))})ws.addEventListener('message', (message) => {const data = JSON.parse(message.data)if (data.action === 'logout') {alert(data.message) //监听到挤下线操作提示弹框}})</script>
</body></html>
