如何在Angular 5中获取计算机和浏览器的设备ID？

Question

我正在使用 Angular 5 的 WEB 银行应用程序工作。任务是我想找出计算机的设备 ID 和浏览器名称。

我尝试了这个 NPM 模块：

npm install ngx-device-detector --save

import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
      this.epicFunction();
    }
    ...
    epicFunction() {
      console.log('hello `Home` component');
      this.deviceInfo = this.deviceService.getDeviceInfo();
      console.log(this.deviceInfo);
    }
    ...
  }

输出：

{  
   "userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36",
   "os":"windows",
   "browser":"chrome",
   "device":"unknown",
   "os_version":"windows-10",
   "browser_version":"66.0.3359.139"
}

我获取了浏览器名称，但没有获取设备 ID。看看 JSON。该设备 是设备：未知。

如果有其他选项或 NPM 模块，请推荐我来完成此任务。

请帮助我。

Answer 1

我认为只有本机应用程序才能做到这一点。因此，您需要将您的 Web 应用程序包装在本机应用程序 shell 中。

对于Android，它称为WebView。所以基本上它是一个包装网站 (html) 的原生 Android 应用程序。

Answer 2

查看 ngx-device- detector 的演示 github 项目

export class AppComponent {
  propsToShow = ['userAgent', 'os', 'browser', 'device', 'os_version', 'browser_version'];
  deviceInfo = null;
  constructor(private deviceService: DeviceDetectorService) {
    this.deviceInfo = deviceService.getDeviceInfo();
    console.log(this.deviceInfo);
  }

  get isMobile() {
    return this.deviceService.isMobile();
  }

  get isTablet() {
    return this.deviceService.isTablet();
  }

  get isDesktop() {
    return this.deviceService.isDesktop();
  }

参考：https://github.com/KoderLabs/ngx-device- detector/blob/master/demo/src/app/app.component.ts

我希望这能解决您的问题。

Answer 3

你找到答案了吗？因为我需要同样的？