指纹反射

指纹是一个设备智能平台,提供行业领先的准确性. 指纹反射 SDK 是方便的集成方式 指纹 输入您的反应应用程序。 也与"Next.js"和"Preact"兼容. 参见应用程序演示 实例 文件夹.

目录

• 指纹反射
  • 目录
  • 所需资源
  • 安装
  • 开始
    • 1. 将应用程序(或组件)包入 <FingerprintProvider>。 。 。 .
    • 2. 使用 useVisitorData() 在组件中勾勾以识别访客
  • 链接和标记信息
  • 处理错误
  • API 参考
  • 版本支持
  • 支助和反馈
  • 许可证

所需资源

• 反应 18 或 19
• 预告用户:预告10.3或以上
• Next.js用户:Next.js 13.1或更高
• 对于类型脚本用户:类型脚本 4.8 或更高

[注] 此软件包假设您有指纹订阅或试用, 它不符合 开源指纹JS。见我们的文件,以便更多地了解 指纹和开源指纹JS之间的差异。 。 。 .

安装

使用 无数字 :

npm install @fingerprint/react

使用 线条数字 :

yarn add @fingerprint/react

使用 小时数字 :

pnpm add @fingerprint/react

开始

为了识别访客,你需要一个指纹账户(你可以) 免费报名) (中文(简体) ). 要得到你的 API 密钥并开始,看看 指纹快速启动指南。 。 。 .

1. 将应用程序(或组件)包入 <FingerprintProvider>。 。 。 .

• 设定 apiKey 切入指纹 公共 API 密钥。 。 。 .
• 设定 region 如果您选择了非全局性 区域 登记期间.
• 设定 endpoints 如果您正在使用 我们的代理集成之一 提高准确性 游客身份认证的有效性.
• 你可以使用所有的东西 启动选项 在 JavaScript 代理服务器中可用 start() 函数.
• 缓存默认已禁用 。 要启用缓存, 请通过 JavaScript 代理 cache 开始选项。 。 。 .

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { FingerprintProvider } from '@fingerprint/react'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

// <FingerprintProvider /> supports the same options as `start()` function.
root.render(
  <FingerprintProvider
    apiKey='PUBLIC_API_KEY'
    cache={{ storage: 'sessionStorage', duration: 3600 }}
  >
    <App />
  </FingerprintProvider>
)

2. 使用 useVisitorData() 在组件中勾勾以识别访客

// src/App.js
import React from 'react'
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, isFetched, data } = useVisitorData()

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  if (isFetched) {
    return <div>Welcome {data.visitor_id}!</div>
  }
  
  return null
}

export default App

这个 useVisitorData 钩子还返回 a getData 用于命令调用 API 的方法.

两者 useVisitorData 财务报告和审定财务报表 getData 接受所有 获取选项 在 JavaScript 代理服务器中可用 get 函数.

返回的 v4 访问者数据在 snake case 中使用原始响应字段名称, 例如 visitor_id 财务报告和审定财务报表 event_id。 。 。 .

// src/App.js
import React, { useState } from 'react'
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, getData } = useVisitorData(
    { immediate: false }
  )
  const [email, setEmail] = useState('')

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          getData()
            .then((data) => {
              // Do something with the visitor data, for example,
              // append visitor data to the form data to send to your server
              console.log(data.visitor_id)
            })
            .catch((error) => {
              // Handle error
            })
        }}
      >
        <label htmlFor='email'>Email:</label>
        <input
          type='email'
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
        />
        <button type='submit'>Subscribe</button>
      </form>
    </div>
  )
}

export default App

• 你可以通过 { immediate: false } 以禁用自动识别和呼叫 getData 手动取而代之.
• 默认( E){ immediate: true }),钩子在挂起后自动识别访问者,只要其请求选项改变。 变化 immediate 从 false 改为 true 还开始一个带有最新选项的识别请求.
• 参见 示例文件夹。 。 。 .
• 看我们的 使用大小写 页面 开源 利用指纹发现欺诈和简化用户经验的现实世界实例.

链接和标记信息

指纹识别提供的访问者身份证明与您已经了解的用户信息,例如账户身份证明,订单身份证明等,特别有用. 更多地了解《公约》的各种应用 linkedId 财务报告和审定财务报表 tags,参见 链接和标记信息。 。 。 .

将访客身份与您的数据联系起来 linkedId 或者说 tags 选项对象的参数 useVisitorData() 钩子或 getData 函数 :

// ...
function App() {
  const { isLoading, error, getData } = useVisitorData({
    linkedId: 'user_1234',
    tags: {
      userAction: 'login',
      analyticsId: 'UA-5555-1111-1',
    },
  })
}
// ...

[注] 这个 tag 选项为偏好 tags。 。 。 . tag 仍然有效,但如果两者都提供, tags 以优先为准.

处理错误

这个 getData 函数直接从 JS 代理中丢出错误而不修改它们。 见 JS 代理处理错误 更多细节.

API 参考

见全 生成 API 引用。 。 。 .

版本支持

支助和反馈

提问或提供反馈,使用 问题如果您需要私人支援,请发电子邮件至 [email protected]。 。 。 .

许可证

这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 需要更多信息的文件.