指纹 Pro Vue 3 SDK
指纹 提供99.5%的准确访客身份.
指纹 Pro Vue SDK是方便的集成方式 指纹 Pro 输入您的 Vue 3 应用程序。 它支持指纹JavaScript代理的所有能力,并提供内置的缓存机制.
所需资源
- 对于打字机用户:打字机4.5或以上
- Vue 3.1级或以上
- 对于 Nuxt 用户: Nuxt 3.0 以上
这个软件包与Fingerprint Pro合作,它与源可得到的FingerprintJS不兼容. 看我们的文件 了解更多关于 指纹 Pro 和来源可用的指纹的区别。 。 。 .
我们不再为Vue2提供SDK, 由于支助终止我们建议升级到Vue 3.
安装
要安装插件运行 :
yarn add @fingerprintjs/fingerprintjs-pro-vue-v3
或者说:
npm install @fingerprintjs/fingerprintjs-pro-vue-v3
pnpm add @fingerprintjs/fingerprintjs-pro-vue-v3
开始
要识别访客,你需要指纹 Pro账户(你) 能够 免费报名) (中文(简体) ). 获取您的 API 密钥并启动 指纹 Pro 文档。 。 。 .
在您的 Vue 应用程序中注册我们的插件 .
import { createApp } from 'vue';
import App from './App.vue';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';
const app = createApp(App);
const apiKey = '<public-api-key>'
app
.use(fpjsPlugin, {
loadOptions: {
apiKey: '<your-public-api-key>',
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions)
.mount('#app');
您可以使用配置 API 、 选项 API 或 Mixins 的插件, 无论是否 Nuxt 。 见下文使用实例.
组成 API
插件提供了一个 useVisitorData 用于识别访问者的函数 :
<script setup>
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { watch } from 'vue';
const { data, error, isLoading, getData } = useVisitorData(
{ extendedResult: true },
// Set to true to fetch data on mount
{ immediate: false }
);
watch(data, (currentData) => {
if (currentData) {
// Do something with the data
}
});
</script>
<template>
<button @click='getData'>Get visitor data</button>
</template>
选项 API
插件注入 a $fpjs 用于识别访客的组件中的对象 :
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
async getVisitorData() {
const visitorData = await this.$fpjs.getVisitorData({
extendedResult: true
});
// Do something with visitorData
}
}
});
</script>
<template>
<button @click='getVisitorData'>Get visitor data</button>
</template>
混合
为了方便,我们还提供处理所有查询状态的混音器.
延长的结果:
<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataExtendedMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
export default defineComponent({
// Include our mixin
mixins: [fpjsGetVisitorDataExtendedMixin],
async mounted() {
// You can also fetch data on mount
// await this.$getVisitorDataExtended();
}
});
</script>
<template>
<div>
<button @click='$getVisitorDataExtended'>
Get visitor data
</button>
<span v-if='visitorDataExtended.isLoading'>
Loading...
</span>
<span v-else-if='visitorDataExtended.isError'>
Error: {{ visitorDataExtended.error }}
</span>
<span v-else>
<!--Do something with visitorData here-->
</span>
</div>
</template>
默认结果 :
<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
export default defineComponent({
// Include our mixin
mixins: [fpjsGetVisitorDataMixin],
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.isError'>
Error: {{ visitorData.error }}
</span>
<span v-else>
<!--Do something with visitorData here-->
</span>
</div>
</template>
坚果
插件与 Nuxt 在框外工作, 然而, 您只需要在客户端注册它 .
// plugins/fingerprintjs.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#app';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig();
nuxtApp.vueApp.use(fpjsPlugin, {
loadOptions: {
apiKey: config.public.API_KEY,
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);
});
//nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
import path from 'path';
export default defineNuxtConfig({
runtimeConfig: {
public: {
// Inject Fingerprint Pro API key
API_KEY: process.env.API_KEY,
},
}
});
见 实例 Nuxt 应用程序 更多细节.
链接和标记信息
这个 visitorId 由指纹识别提供,与您已经了解的用户信息相结合,例如账户ID,订单ID等,尤其有用. 更多地了解《公约》的各种应用 linkedId 财务报告和审定财务报表 tag,参见 链接和标记信息。 。 。 .
将你的数据与访问者身份相连接 linkedId 或者说 tag 选项对象的参数 useVisitorData() 钩子或 getData 函数 :
<script setup>
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
const { data, error, isLoading, getData } = useVisitorData({
linkedId: 'user_1234',
tag: {
userAction: 'login',
analyticsId: 'UA-5555-1111-1',
},
})
</script>
<template>
<!--...-->
</template>
文档
详细文档可在 API 参考。 。 。 .
藏匿战略
指纹 Pro使用费按API呼叫计费. 为了避免不必要的API呼叫 缓存识别结果。默认情况下, SDK 使用 sessionStorage 到缓存结果.
- 指定
cacheLocation内FpjsVueOptions将结果存储到memory或者说localStorage启用none完全禁用缓存. - 指定
cache内FpjsVueOptions来使用您的自定义缓存执行。 详情见 创建自定义缓存 在指纹 Pro SPA 寄存器中(这个 SDK 使用的下等指纹库). - 过
{ignoreCache: true}页:1getData()编号 :getVisitorData()编号 :getVisitorDataExtended()函数以忽略特定 API 调用时的缓存结果.
[注] 如果您使用来自
extendedResult注意你的隐蔽策略. 一些领域,例如,ip或者说lastSeenAt,可能会随着时间而改变 同一访客。 使用getData({ ignoreCache: true })以获取最新的识别结果.
支助和反馈
提问或提供反馈,使用 问题如果您需要私人支援,请发电子邮件至 [email protected]如果你想有一个类似的 Vue 包装器 开源指纹JS,考虑在主要方面创建一个问题 指纹JS仓库。 。 。 .
实例
您可以在 实例 目录 :
许可证
本项目根据以下规定获得许可证: 麻省理工学院许可证。 。 。 .