登录场景下网页端如何获取唯一设备ID关联FCM令牌？

由于浏览器出于隐私保护限制，无法提供原生的永久唯一设备ID，以下是几种可行的折中方案，可根据业务需求选择：

方案1：持久化本地存储UUID #

这是最常用的实现方式，通过浏览器本地存储生成并保存一个唯一标识，替代设备ID：

• 实现逻辑：用户首次访问时，检查localStorage中是否存在预生成的UUID；若不存在则用浏览器原生crypto API生成安全UUID，存入localStorage持久化保存。登录时将该UUID与FCM令牌绑定存储到后端，登出时通过UUID匹配删除对应令牌。
• 代码示例：

function getWebDeviceId() {
  let deviceId = localStorage.getItem('web_device_unique_id');
  if (!deviceId) {
    // 生成符合RFC 4122标准的UUID
    deviceId = crypto.randomUUID();
    localStorage.setItem('web_device_unique_id', deviceId);
  }
  return deviceId;
}

• 优缺点：实现简单无依赖，满足大部分场景需求；但用户清除浏览器缓存、更换浏览器/设备时，UUID会重置，无法识别为同一设备。

方案2：设备特征指纹+会话ID绑定 #

通过收集浏览器特征生成近似唯一的指纹，结合用户登录会话ID实现关联：

• 实现逻辑：收集浏览器UA、屏幕分辨率、时区、系统语言等特征，通过哈希算法生成指纹；登录时将指纹、会话ID与FCM令牌绑定，登出时通过会话ID+指纹匹配删除令牌。
• 代码示例：

async function generateDeviceFingerprint() {
  const deviceFeatures = [
    navigator.userAgent,
    `${window.screen.width}x${window.screen.height}`,
    Intl.DateTimeFormat().resolvedOptions().timeZone,
    navigator.language
  ];
  // 生成SHA-256哈希作为指纹
  const encoder = new TextEncoder();
  const hashBuffer = await crypto.subtle.digest('SHA-256', encoder.encode(deviceFeatures.join('|')));
  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

• 优缺点：比单纯UUID更稳定，同一设备同一浏览器下指纹不易变化；但无法做到绝对唯一（不同设备可能生成相同指纹，概率极低），用户修改浏览器设置会导致指纹变更。

方案3：直接绑定登录会话ID #

跳过设备标识，直接将FCM令牌与当前登录会话关联：

• 实现逻辑：用户登录时，将FCM令牌与后端生成的会话ID（如JWT中的会话标识）绑定存储；登出时，根据当前会话ID找到对应的FCM令牌删除。若用户在多设备登录，每个设备会话ID独立，登出仅清除当前设备的令牌。
• 优缺点：无需依赖任何设备标识，逻辑简单符合会话管理流程；但同一设备多次登录（会话ID更新）时，旧令牌需额外过期清理机制。

注：网页端受限于隐私规范，不存在完美的设备唯一标识方案，需根据业务对设备识别的严格程度选择对应方案。

内容的提问来源于stack exchange，提问作者Raja Luqman Sarwar