FingerprintJS Demo

fingerprintjs-demo.markdown

FingerprintJS Demo

A Pen by Mike Klem on CodePen.

License.

index.html

"<div id='app' class='col-md-6 col-md-offset-3'>
  <h1>FingerprintJS2</h1>
  <p>
    <button @click='fetchFingerprint' class='btn btn-xs btn-default'>Refresh</button>
    Your fp: <b>{{ fingerprint }}</b>
  </p>
  <table class='table'>
    <tbody>
      <tr v-for='component in fpComponents'>
        <td>{{ component.key }}</td>
        <td>{{ component.value }}</td>
      </tr>
    </tbody>
  </table>
</div>

script.babel

new Vue({
  el: '#app',
  data: {
    fingerprint: '',
    fpComponents: [],
    fpOptions: {
      excludeAdBlock: true
    }
  },
  methods: {
    fetchFingerprint(){
      var options = {excludes:{ fonts: true, fontsFlash: true, enumerateDevices: true, pixelRatio: true, doNotTrack: true}};
      Fingerprint2().get((result, components) => {
        this.fingerprint = result;
        this.fpComponents = components;
        console.log(components); // an array of FP components
      })
    }
  },
  created(){ 
    this.fetchFingerprint();
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/1.8.0/fingerprint2.min.js"></script>

style.css

table {
      table-layout: fixed;
    word-wrap: break-word;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />