指纹 Vue 3 SDK

指纹 是一个能提供行业领导精确度的设备智能平台.

指纹 Vue SDK 是方便的整合方式 指纹 输入您的 Vue 3 应用程序。 它支持指纹JavaScript代理的所有能力.

所需资源

• 对于打字机用户:打字机4.5或以上
• Vue 3.1级或以上
• 对于 Nuxt 用户: Nuxt 3.0 以上

这个软件包是商业的 指纹平台。它与可用源不相容 指纹JS库。学习更多关于 指纹和指纹之间的区别。 。 。 .

安装

要安装插件运行 :

yarn add @fingerprint/vue

或者说:

npm install @fingerprint/vue

pnpm add @fingerprint/vue

开始

为了识别访客,你需要一个指纹账户(你) 能够 免费报名) (中文(简体) ). 获取您的 API 密钥并启动 指纹文件。 。 。 .

在您的 Vue 应用程序中注册插件 .

• 设置 a 区域 如果您在注册时选择了非全球区域.
• 设定 endpoints 如果你使用我们的代理集成 提高准确性和有效性 游客身份证明.

import { createApp } from 'vue';
import App from './App.vue';
import { FingerprintPlugin } from '@fingerprint/vue';

const app = createApp(App);

app
  .use(FingerprintPlugin, {
    apiKey: '<your-public-api-key>',
    endpoints: "https://metrics.yourwebsite.com",
    region: 'eu',
  })
  .mount('#app');

您可以使用配置 API 、 选项 API 或 Mixins 的插件, 无论是否 Nuxt 。 见下文使用实例.

组成 API

插件提供了一个 useVisitorData 用于识别访客的可混杂性 :

<script setup>
import { useVisitorData } from '@fingerprint/vue';
import { watch } from 'vue';

const { data, error, isLoading, isFetched, getData } = useVisitorData(
  // Set to false to prevent fetching data on mount
  { immediate: false }
);

watch(data, (currentData) => {
  if (currentData) {
    // Do something with the data
    console.log(currentData.visitor_id);
  }
});
</script>

<template>
  <button @click='getData()'>Get visitor data</button>
</template>

这个 getData() 函数丢入出错。 您可以使用尝试/ 捕获或检查 error 参考:

<script setup>
import { useVisitorData } from '@fingerprint/vue';

const { data, error, isLoading, isFetched, getData } = useVisitorData();

async function handleClick() {
  try {
    const result = await getData();
    console.log(result.visitor_id);
  } catch (err) {
    console.error('Identification failed:', err);
  }
}
</script>

选项 API

插件注入 a $fingerprint 用于识别访客的组件中的对象 :

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    async getVisitorData() {
      const result = await this.$fingerprint.getVisitorData();
      // Do something with result
      console.log(result.visitor_id);
    }
  }
});
</script>

<template>
  <button @click='getVisitorData'>Get visitor data</button>
</template>

混合

为方便起见,我们还提供一种组合,处理所有查询状态:

<script lang='ts'>
import { defineComponent } from 'vue';
import { fingerprintGetVisitorDataMixin } from '@fingerprint/vue';

export default defineComponent({
  mixins: [fingerprintGetVisitorDataMixin],
  async mounted() {
    // You can also fetch data on mount
    // await this.$getVisitorData();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorData'>
      Get visitor data
    </button>
    <span v-if='visitorData.isLoading'>
      Loading...
    </span>
    <span v-else-if='visitorData.error'>
      Error: {{ visitorData.error }}
    </span>
    <span v-else-if='visitorData.isFetched'>
      Visitor ID: {{ visitorData.data.visitor_id }}
    </span>
  </div>
</template>

坚果

插件与 Nuxt 在框外工作, 然而, 您只需要在客户端注册它 .

// plugins/fingerprint.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#app';
import { FingerprintPlugin } from '@fingerprint/vue';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  nuxtApp.vueApp.use(FingerprintPlugin, {
    apiKey: config.public.API_KEY,
    endpoints: "https://metrics.yourwebsite.com",
    region: 'eu',
  });
});

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // Inject Fingerprint API key
      API_KEY: process.env.API_KEY,
    },
  }
});

见 实例 Nuxt 应用程序 更多细节.

链接和标记信息

这个 visitor_id 由指纹识别提供,与您已经了解的用户信息相结合,例如账户ID,订单ID等,尤其有用. 更多地了解《公约》的各种应用 linkedId 财务报告和审定财务报表 tags,参见 链接和标记信息。 。 。 .

将你的数据与访问者身份相连接 linkedId 或者说 tags 参数 useVisitorData() 可堆叠或 getData() 函数 :

<script setup>
import { useVisitorData } from '@fingerprint/vue';

const { data, error, isLoading, getData } = useVisitorData({
  linkedId: 'user_1234',
  tags: {
    userAction: 'login',
    analyticsId: 'UA-5555-1111-1',
  },
})
</script>

<template>
<!--...-->
</template>

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

直接代理准入

对于高级用户,您可以访问全部 @fingerprint/agent 使用 Fingerprint 名称空间导出 :

import { Fingerprint } from '@fingerprint/vue';

// Use agent types
type Result = Fingerprint.GetResult;
type Options = Fingerprint.GetOptions;

// Or call start() directly
const agent = Fingerprint.start({ apiKey: '...' });
const result = await agent.get();

缓存

指纹使用费按API呼叫计费. 为了避免不必要的API呼叫 缓存识别结果。 。 。 .

缓存默认已禁用, 与基础对齐 JavaScript 代理 v4 默认。为了允许缓存,通过 cache 开始选项数字 :

app.use(FingerprintPlugin, {
  apiKey: '<your-public-api-key>',
  cache: {
    storage: 'sessionStorage', // or 'localStorage' or 'agent'
    duration: 'optimize-cost', // or 'aggressive' or a number in seconds
  },
});

V1.x的迁移

2.0版本将基础指纹代理从v3升级到v4,并引入了多处断裂变化. 见 移徙指南 详细指示和 JavaScript 代理 v3 到 v4 迁移指南 基础剂改变.

文档

详细文档可在 API 参考。 。 。 .

版本支持

支助和反馈

提问或提供反馈,使用 问题如果您需要私人支援,请发电子邮件至 [email protected]如果你想有一个类似的 Vue 包装器 来源可用指纹JS,考虑在主要方面创建一个问题 指纹JS仓库。 。 。 .

实例

您可以在 实例 目录 :

• SPA 应用程序
• Nuxt 应用程序

许可证

本项目根据以下规定获得许可证: 麻省理工学院许可证。 。 。 .