如何在JavaScript或Angular 2/4中获取客户端系统唯一ID？

Hey, I get exactly what you're going for here—免登录、免注册的用户体验，不用存储手机号、邮箱这类敏感信息，就能让用户访问个人数据，完全对标移动端APP用设备ID实现的逻辑。既然你用Angular 2/4开发，我来拆解几个实用方案，专门解决你提到的FingerprintJS标识不唯一的问题。

核心思路 #

核心逻辑是把浏览器/设备指纹和本地持久化存储结合，打造一个稳定的用户唯一标识。哪怕指纹本身偶尔有变化，本地存储的ID会作为你的核心用户密钥，指纹则作为 fallback 或验证层。

可行方案与代码实现 #

1. 优化FingerprintJS配合本地存储（最推荐） #

FingerprintJS的访客ID可能在不同浏览器或浏览器更新后变化，但你可以生成自己的UUID存在本地，再把它和指纹关联到后端。下面是Angular服务的实现示例：

import { Injectable } from '@angular/core';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DeviceIdentityService {
  private readonly STORAGE_KEY = 'my_app_unique_device_id';

  constructor(private http: HttpClient) {}

  async getUniqueUserId(): Promise<string> {
    // 先从本地存储读取已有的ID
    const storedId = localStorage.getItem(this.STORAGE_KEY);
    if (storedId) {
      // 可选：和后端验证指纹，防止ID被篡改
      await this.verifyStoredId(storedId);
      return storedId;
    }

    // 没有ID的话生成新的
    const fp = await FingerprintJS.load();
    const fingerprintResult = await fp.get();
    
    // 生成安全UUID（生产环境可以用`uuid`库提升随机性）
    const newUserId = this.generateUUID();
    
    // 把ID存到本地
    localStorage.setItem(this.STORAGE_KEY, newUserId);
    
    // 同步到后端，关联UUID和指纹
    await this.http.post('/api/user-identity', {
      userId: newUserId,
      fingerprint: fingerprintResult.visitorId
    }).toPromise();

    return newUserId;
  }

  private generateUUID(): string {
    // 基础UUID v4生成器（生产建议替换为成熟库）
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  private async verifyStoredId(storedId: string): Promise<void> {
    // 可选：验证存储的ID是否和当前指纹匹配
    const fp = await FingerprintJS.load();
    const currentFingerprint = (await fp.get()).visitorId;
    
    const response = await this.http.get(`/api/verify-identity/${storedId}`).toPromise();
    // 处理指纹不匹配的情况（比如用户换了浏览器）
  }
}

2. 自定义浏览器特征组合（备用方案） #

如果你不想依赖FingerprintJS，也可以自己组合多个浏览器/设备属性生成自定义指纹，再配合本地存储使用：

private createCustomFingerprint(): string {
  const features = [
    navigator.userAgent,
    navigator.hardwareConcurrency,
    screen.width + 'x' + screen.height,
    screen.colorDepth,
    navigator.language,
    navigator.platform
  ];
  // 把组合后的特征哈希成字符串（生产建议用`crypto-js`这类安全哈希库）
  return features.join('|');
}

这个自定义指纹可以和本地UUID配合做额外验证，但要注意：这些特征可能变化（比如用户调整屏幕分辨率），所以本地UUID永远是你的核心标识。

3. 更持久的存储：IndexedDB #

如果担心localStorage被意外清除，可以用IndexedDB存储UUID。Angular有dexie.js这类库简化IndexedDB操作，能确保用户ID在localStorage被清空后依然保留。

后端配合要点 #

• 后端需要把前端生成的UUID和用户的个人数据做映射。
• 前端发起请求（比如获取用户信息）时，把UUID放在请求头或请求体里。
• 可选验证：如果传入的指纹和UUID关联的指纹不匹配，可以提示用户“重新关联”数据（根据你的业务场景决定是否需要）。

重要注意事项 #

• 局限性：如果用户清除浏览器存储、换浏览器或换设备，会丢失原有数据——这是不绑定用户真实身份的必然结果。
• 隐私合规：务必在隐私政策里说明这个身份识别方式，确保你不会用这个标识跨网站追踪用户，符合GDPR等法规要求。

内容的提问来源于stack exchange，提问作者unknown