带 @fingerprintjs/fingerprintjs 的角度 ssr答案

【问题标题】：angular ssr with @fingerprintjs/fingerprintjs带 @fingerprintjs/fingerprintjs 的角度 ssr
【发布时间】：2021-08-29 20:09:03
【问题描述】：

我使用 Angular SSR 并且我想获取签名浏览器或 macAddress 来指定用户浏览器，当我使用 @fingerprintjs/fingerprintjs 包并构建我的项目 ssr 和服务器 ssr 时，页面未加载到 web {head and body empty tag}

<html>
<head></head>
<body></body>
</html>

【问题讨论】：

你的JS控制台/服务器有错误吗？
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： javascript server-side-rendering angular-universal

【解决方案1】：

我试过了，它与FingerprintJS npm package 配合得很好。

此外，对于某些配置，您可能会遇到document.location API 不可用的错误。因此，我建议使用 Angular 的 isPlatformBrowser 函数在客户端显式渲染它。

import { Component } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import FingerprintJS from '@fingerprintjs/fingerprintjs'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title: string = 'fpjs-angular';

  constructor(@Inject(PLATFORM_ID) platformId: Object) {
    if (isPlatformBrowser(platformId)) {
      const fpPromise = FingerprintJS.load()
        ; (async () => {
          // Get the visitor identifier when you need it.
          const fp = await fpPromise
          const result = await fp.get()
          console.log(result.visitorId)
        })()
    }
  }
}

【讨论】：