Hello my quasar friends. I hope you all are safe with the current situation (11/2/2020). However, I came up with a very valuable tutorial which is a necessary feature for cordova applications. When I was searching for fingerprint for quasar, I really found out a repo of patrickmonteiro (A great solution provider) and I had some issues with the steps. That’s why I wanted t teach you how to implement his code on your working project or a new project.

Let’s get started and create your new quasar project or open your current project. I suggest your to check my repo for Quasar Clean Template with the drawer and high level configurations.

Create a Boot file called fingerprint.js inside the src/boot folder.

Paste the following code on fingeprint.js file.

export default async ({ Vue }) => {
Vue.prototype.$fingerPrint = (text) => {
return new Promise((resolve, reject) => {
window.Fingerprint.isAvailable((suc) => {
window.Fingerprint.show({
clientId: 'fingerprintId',
clientSecret: 'o7aoOMYUbyxaD23oFAnJ',
disableBackup: true
}, (suc) => {
resolve(suc)
}, (err) => {
reject(err)
})
}, () => {
reject(false)
})
})
}
}

Load it on quasar.conf.js

 boot: [
'fingerprint',
],

Run the following command to ready src-cordova. Read the quasar cordova doc section for more information.

quasar mode add cordova

Step into the src-cordova direcotry

cd src-cordova

Run the following command to add the fingerprint plugin.

cordova plugin add cordova-plugin-fingerprint-aio --save

Now, add the android platform or run the following code line to run your app on android device or emulator. Don’t forget to install an emulator or connect your device to the computer with developer mode enabled.

quasar dev -m cordova -T android

Step 08: as the final step, go to your index file which is in the src/pages/index and paste the following code..

<template>
<q-page class="flex flex-center background-custom">
<img alt="Quasar logo" class="block" width="350px" src="statics/fingerprint.png" @click="readFingerPrint()">
</q-page>
</template>

<script>
export default {
name: 'PageIndex',
methods: {
readFingerPrint () {
this.$fingerPrint()
.then((suc) => {
console.log('Success', suc)
this.alert('Fingerprint Success!')
})
.catch((err) => {
console.log('Error', err)
this.alert('Fingerprint Failed')
})
},
alert (msg) {
this.$q.dialog({
title: 'FINGERPRINT',
message: msg,
color: 'white',
class: 'bg-deep-purple-6 text-white'
})
}
}
}
</script>

<style scoped>
.background-custom {
background: #F4F4F4;
}
</style>

Congrtz. It should definitely work. Let me know if something is missing or if you got an issue.

** Please add the Dialog plugin to quasar.conf.js to get the same output as the code.

Actually you can get an issue about your cordova android version and fingerprint plugin requires 9.0.0. The solution was to remove the added android platform, uninstall the installed cordova version and re-install the latest cordova version. You can add the cordova platform and enjoy your code without any issues.

Never giveup on trying something new. As the next tutorial, I will come with indexedDB (Local Database) solution for quasar. I hope you will support me to continue this blog forever. Thank you very much.

Write A Comment