Angular 5中如何获取电脑设备ID及浏览器信息？

嘿，我来帮你搞定Angular 5银行应用里获取设备ID和浏览器名称的需求！你选ngx-device-detector这个包思路是对的，我帮你把完整的实现流程理清楚，还补充了设备ID的解决方案——因为这个包本身不直接提供唯一设备ID哦：

1. 安装适配Angular 5的依赖包 #

因为你用的是Angular 5，要安装对应版本的ngx-device-detector（最新版本可能不兼容），执行以下命令：

npm install ngx-device-detector@1.3.5 --save

2. 在模块中配置导入 #

在你的功能模块（比如包含登录、注册组件的模块）里导入DeviceDetectorModule，注意要调用forRoot()方法完成初始化：

import { NgModule } from '@angular/core';
import { DeviceDetectorModule } from 'ngx-device-detector';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';
import { SignupComponent } from './signup.component';
import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    LoginComponent,
    SignupComponent
    // 其他需要声明的组件
  ],
  imports: [
    CommonModule,
    FormsModule,
    DeviceDetectorModule.forRoot()
  ],
  providers: [
    AuthService
    // 其他服务
  ]
})
export class AuthModule { }

3. 在组件中获取浏览器信息 #

在需要的组件（比如LoginComponent）里注入DeviceDetectorService，然后调用它的属性获取浏览器名称和完整设备信息：

import { Component, OnInit } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  browserName: string;
  fullDeviceInfo: any;

  constructor(private deviceDetector: DeviceDetectorService) { }

  ngOnInit() {
    // 获取浏览器名称（比如Chrome、Firefox）
    this.browserName = this.deviceDetector.browser;
    // 获取完整设备信息，包含操作系统、设备类型等
    this.fullDeviceInfo = this.deviceDetector.deviceInfo;

    // 可以打印出来验证结果
    console.log('当前浏览器:', this.browserName);
    console.log('完整设备详情:', this.fullDeviceInfo);
  }
}

关于设备ID的实现方案 #

ngx-device-detector没有提供唯一设备ID的功能（浏览器本身也没有直接暴露这个API），你可以通过以下方式实现一个可用的设备标识：

• 生成一个UUID，存储在浏览器的localStorage中，用户再次访问时直接读取，这样就能保持同一设备的标识一致性
• 结合浏览器信息、屏幕分辨率、操作系统等参数生成哈希值作为标识（这种方式不是绝对唯一，但大部分场景够用）

这里给你提供UUID方案的示例代码：

// 在组件中添加生成设备ID的方法
private generateDeviceId(): string {
  let deviceId = localStorage.getItem('bank_app_device_id');
  if (!deviceId) {
    // 生成标准UUID格式的字符串
    deviceId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
    // 存储到localStorage，持久化保存
    localStorage.setItem('bank_app_device_id', deviceId);
  }
  return deviceId;
}

// 在ngOnInit中调用获取设备ID
ngOnInit() {
  // ...之前的浏览器信息代码
  const deviceId = this.generateDeviceId();
  console.log('当前设备ID:', deviceId);
  // 可以把deviceId传递给后端接口使用
}

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