reactjs 正确使用FingerprintJS

yshpjwxd  于 2023-06-29  发布在  React
关注(0)|答案(2)|浏览(254)

我不是一个经验仍然在React.js,但我想写一些应用程序使用FingerprintJS。

function App() {
  let app_visitorId = 'Is not defined still';
  (async () => {
    // Get the visitor identifier when you need it.
    const fp = await fpPromise
    const result = await fp.get()
    // This is the visitor identifier:
    const visitorId = result.visitorId;
    const confidence = result.confidence;
    console.log(
        '----------------------------------------------------------\n' +
        'fingerprintjs@ visitorId: ' + visitorId + '\n' +
        'fingerprintjs@ confidence: ' + confidence.score.toPrecision(6) + '\n' +
        '----------------------------------------------------------\n');
  })();
  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.<br/>
            {app_visitorId}
          </p>
          <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
  );
}

我的问题是:如何更改'app_visitorId' let以在render块中呈现其值?谢谢你!

yk9xbfzb

yk9xbfzb1#

useEffect钩子,使用setState将vistitorId存储到状态。在render(返回函数)中,检查状态变量是否已经填充,因为返回值来自异步承诺。如果是,则渲染visitorId
你可以在GitHub上使用Next.js检查更复杂的代码解决方案(但概念与React相同)。或者,可以检查Fingerprint Pro's React library

yjghlzjz

yjghlzjz2#

我下载了fingerprint v3,然后使用它如下:

import fpPromise from "./fingerpintv3";

// Get the visitor identifier when you need it.
    const fp = fpPromise.load();

    fp
      .then((fp: any) => fp.get())
      .then((result: any) => {
        const visitorId = result.visitorId;
        console.log('fingerprint: ', visitorId);
      })
      .catch((error: any) => {
        console.error(error);
      });

相关问题