Fingerprint JS V3 save other variables alongside with the visitor ID WEB

Question

I have searched through similar questions, but non seems to be answering what I am looking for

So basically I have this website, where an emoji (lets use emoji for it to be easy) is generated randomly was saved in local storage. As you know, it is not effective, since a user can simply clear his/her history and that random value was deleting. Example of the code

<script>

    var res = localStorage.getItem('img');
        if(res == null){
                const myList = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
                res  = myList[Math.floor(Math.random() * myList.length)];
                localStorage.setItem('img', res);
            }
    console.log(res);
       
    document.querySelectorAll('.emoji').forEach(span => span.textContent = res)

</script>

Then I found out about the fingerprint JS and was very happy about it, since the user's ID doesnt delete even if the history has been deleted.

However, I don't seem to understand of how to do exact same emoji generation with the fingerprint JS

<script>
    // Initialize the agent at application startup.
    const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
      .then(FingerprintJS => FingerprintJS.load())
  
    // Get the visitor identifier when you need it.
    fpPromise
      .then(fp => fp.get())
      .then(result => {
        // This is the visitor identifier:
        const visitorId = result.visitorId
        console.log(visitorId)
        alert(visitorId)
      })
  </script>

I understand that I have to add a const, however, all the time I tried to implement the code for random emoji generation to the fingerprint js, everything failed

Could you give me some advice or an example of the working alike code/idea?

So that at the end the stored values would be like:

ID : 12312312313123

Emoji :

Thanks in advance!

do you have a link to a docs page which says you can store arbitrary values against the user, are you sure the service implements it? If you used serverside code you could store the visitorId along with the *emoji* in a db then use it to fetch it again. — Lawrence Cherone, May 04 '22 at 15:56
@LawrenceCherone thank you! Exactly, i couldnt find any documentation. I was thinking about the server side code, but i have limited knowledge of such, however now it seems like the only option. I was hoping that it was possible to do directly client side — Sherminator, May 04 '22 at 16:09

score 0 · Answer 1 · answered May 05 '22 at 08:29

Get the hash number (I used this CRC implementation), modulo length of your emoji list and just pick the given emoji.

<script>
// Initialize the agent at application startup.
const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
  .then(FingerprintJS => FingerprintJS.load())

const crc32=function(r){for(var a,o=[],c=0;c<256;c++){a=c;for(var f=0;f<8;f++)a=1&a?3988292384^a>>>1:a>>>1;o[c]=a}for(var n=-1,t=0;t<r.length;t++)n=n>>>8^o[255&(n^r.charCodeAt(t))];return(-1^n)>>>0};


// Get the visitor identifier when you need it.
fpPromise
  .then(fp => fp.get())
  .then(result => {
    // This is the visitor identifier:
    const visitorId = result.visitorId

    const myList = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
    const listLength = myList.length

    const visitorIdNumber = crc32(visitorId);
    const selectedEmoji = myList[visitorIdNumber % listLength];
    localStorage.setItem('img', selectedEmoji);
  })
</script>

Fingerprint JS V3 save other variables alongside with the visitor ID WEB

1 Answers1