Page Login Menggunakan Biometrik Dengan Vue.js

Dalam artikel ini, Anda akan mempelajari cara menggunakan Passage untuk membuat aplikasi Vue 3 sederhana dan menambahkan biometrik.

Pengguna masuk ke aplikasi menggunakan biometrik yang ada di dalam perangkat (Face ID, Windows Hello, dll.) atau menggunakan tautan ajaib yang dikirim ke email. Aplikasi ini dibuat sehingga hanya pengguna yang diautentikasi yang dapat melihat dashboard sederhana dan akan memblokir pengguna yang tidak diautentikasi. Panduan ini menjelaskan cara membuat aplikasi Vue3 menggunakan VueCLI, membuat component dasar, dan menambahkan autentikasi ke aplikasi Anda menggunakan Passage.

Jika Anda sudah terbiasa dengan Vue, Anda dapat mengakses aplikasi sampel GitHub lengkap secara langsung atau melompat ke bagian ini untuk mempelajari cara mengintegrasikan biometrik ke dalam aplikasi Anda yang sudah ada.

Setting

Untuk memulai, instal VueCLI terlebih dahulu. Vue CLI memungkinkan Anda untuk meluncurkan dan menjalankan dengan cepat dengan pengaturan build yang telah dikonfigurasi sebelumnya.

npm install -g @vue/cli

Kemudian gunakan VueCLI untuk membuat aplikasi baru. Alat ini memberi Anda opsi untuk memilih versi dan fitur yang Anda butuhkan secara manual. Dalam tutorial ini, gunakan opsi Pilih fitur secara manual untuk memilih fitur Router. Pastikan untuk memilih Vue3. Cukup tekan Enter dari fitur lainnya.

vue create example-app 
cd example-app

Anda dapat menguji aplikasi Anda dengan menjalankan perintah berikut dan kemudian mengakses http://localhost:8080.

npm run serve

Anda dapat tetap menjalankannya sepanjang tutorial untuk melihat kemajuannya.

Bangun component aplikasi Anda

Atur routes untuk halaman beranda dan halaman dashboard Anda

Aplikasi ini memiliki dua halaman, halaman beranda dengan layar masuk dan halaman dashboard yang diautentikasi. Pertama, buat struktur direktori dan root untuk halaman tersebut. Buat direktori dan file berikut dan konfigurasikan untuk router Anda dan dua component utama.

cd src/
mkdir views
touch views/Dashboard.vue
touch views/Home.vue

Sekarang mari kita mulai mengetik file-file ini. Salin kode berikut ke dalam file router/index.js untuk menggantikan router default.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
  }
]

const router = createRouter({
  history: createWebHistory(),
  mode: 'history',
  routes
})

export default router

Buat component banner

Buat component banner yang akan digunakan di halaman beranda dan halaman dashboard Anda. Salin kode berikut ke dalam component/ Banner.vue.

<template>
  <div class="mainHeader">
    <a href="https://passage.id/"><div class="passageLogo"></div></a>
    <div class="header-text">Passage + Vue.js 3 Example App</div>
    <div class="spacer"></div>
    <a class="link" href="https://passage.id/">Go to Passage</a>
  </div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Banner',
})
</script>
<style scoped>
.mainHeader{
  width: 100%;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  background-color: #27417E;
  color: white;
}

.header-text {
  font-size: 24px;
  margin-left: 10px;
}

.passageLogo {
  background-image: url('https://storage.googleapis.com/passage-docs/passage-logo.svg');
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.spacer {
  flex-grow: 1;
}

.link {
  margin-left: 20px;
  color: white;
  text-decoration-color: white;
}
</style>

Ganti template dan tag skrip di App.vue dengan router dan tambahkan gaya sederhana.

<template>
<div>
  <Banner />
  <div class="main-container">
    <router-view/>
  </div>
  <div className="footer">
    Learn more with our 
    <a href="https://docs.passage.id">Documentation</a> and
    <a href="https://github.com/passageidentity">Github</a>.
    <br>       
  </div>
</div>
</template>
<style>
body {
  margin: 0px;
  height: 100vh;
  font-family: sans-serif;
  background-color: #E5E5E5;
}

.main-container {
  background: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  width: 310px;
  min-height: 310px;
  margin: 30px auto;
}

.footer {
  text-align: center;
  font-size: 18px;
}
</style>

Tambahkan router dan banner ke main.js.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Banner from './components/Banner.vue'

createApp(App)
  .use(router)
  .component('Banner', Banner)
  .mount('#app')

Artinya setelah component dibuat, halaman beranda akan dapat diakses di http://localhost:8080/ dan dashboard akan dapat diakses di http://localhost:8080/dashboard.

Bangun component Home

Tambahkan kode berikut ke views/Home.vue untuk membuat halaman home Anda.

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
})
</script>

Bangun component dashboard

Tambahkan kode berikut ke views/Dashboard.vue untuk membuat halaman dashboard sederhana.

<template>
  <div class="dashboard">
        <div class="title">Welcome!</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Dashboard',
})
</script>

<style scoped>
.dashboard{
  padding: 30px 30px 20px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.message {
  overflow-wrap: anywhere;
}

.link {
  color: black;
  text-decoration-color: black;
}
</style>

Penambahan otentikasi berdasarkan bagian

Kemudian gunakan Passage untuk menambahkan otentikasi ke aplikasi Anda. Pertama, instal Passage dari direktori root aplikasi sampel.

npm install --save @passageidentity/passage-auth

Kemudian impor paket ke modul yang menggunakan elemen khusus (tampilan Home.vue dalam kasus ini).

import '@passageidentity/passage-auth'

Mengimport skrip ini membuat elemen custom Passage untuk digunakan dengan component Vue. Lihat dokumentasi online untuk informasi lebih lanjut tentang elemen custom.

Buat aplikasi di Passage Console dengan pengaturan berikut:

• Sumber otentikasi: http://localhost:8080
• URL pengalihan: /dashboard

Setelah membuat aplikasi, salin ID aplikasi dari console ke file .env di root repositori sampel.

# .env
VUE_APP_PASSAGE_APP_ID=

Di component Beranda, import Passage dan tambahkan elemen khusus ke template.

<template>
  <passage-auth :app-id="appId"></passage-auth>
</template>

<script>
import { defineComponent } from 'vue'
import '@passageidentity/passage-auth'

export default defineComponent({
  name: 'Home',
  setup() {
    const appId = process.env.VUE_APP_PASSAGE_APP_ID
    return {
      appId,
    }
  },
})
</script>

Ini akan memberi aplikasi Anda pengalaman login dan registrasi yang lengkap.

Peringatan tentang elemen khusus mungkin muncul di konsol. Vue menangani elemen custom di luar kotak, tetapi secara default ia mencatat peringatan ke konsol bahwa component elemen custom tidak dapat diselesaikan. Untuk mengonfigurasi Vue dengan informasi bahwa tag <passage-auth> adalah elemen khusus dan menekan peringatan ini, Anda perlu menambahkan konfigurasi ini ke file vue.config.js Anda. Buat file ini di direktori tingkat atas repositori.

module.exports = {
  publicPath: '/',
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with passage- as custom elements
          isCustomElement: (tag) => tag.startsWith('passage-'),
        },
      }))
  },
}

Setelah menambahkan ini, Anda harus memulai ulang server agar perubahan diterapkan.

Konfirmasi otentikasi pengguna

Terakhir, tetapi tidak kalah penting, aplikasi harus mencegah pengguna yang tidak diautentikasi mengakses halaman dashboard. Saya mengatur perlindungan untuk menampilkan pesan kesalahan kepada pengguna yang tidak diautentikasi yang mencoba mengakses dashboard, tetapi semua data disimpan dalam file JavaScript, yang mencegah pembacaan kemungkinan data di dashboard.

Untuk kesederhanaan, tidak ada server backend dalam contoh ini. Pemeriksaan otentikasi sederhana menggunakan kelas PassageUser diterapkan untuk melindungi halaman dashboard dari akses yang tidak sah.

Harap perhatikan bahwa perlindungan dashboard ini tidak melindungi titik akhir API yang sensitif. Server harus selalu menggunakan salah satu library backend Passage untuk mengotorisasi pengguna sebelum mengembalikan data sensitif.

Pemeriksaan ini diimplementasikan dengan menggunakan Passage untuk membuat komposisi untuk memeriksa status otentikasi pengguna saat ini. Buat file bernama useAuthStatus.js di direktori composables.

mkdir composables/
touch composables/useAuthStatus.js

Salin kode berikut ke dalam file itu. Kode ini menggunakan Passage untuk memeriksa apakah pengguna saat ini diautentikasi.

import { ref } from 'vue'
import { PassageUser } from '@passageidentity/passage-auth/passage-user'

export function useAuthStatus(){
  const isLoading = ref(true)
  const isAuthorized = ref(false)
  const username = ref('')

  new PassageUser().userInfo().then(userInfo => {
      if(userInfo === undefined){
          isLoading.value = false
          return
      }
      username.value = userInfo.email ? userInfo.email : userInfo.phone
      isAuthorized.value = true
      isLoading.value = false
  })

  return {
    isLoading,
    isAuthorized,
    username,
  }
}

Selanjutnya, kami akan menyertakan pemeriksaan ini di component dashboard karena kami perlu mengautentikasi sebelum dapat melihat dashboard. dashboard menampilkan dua pesan berbeda berdasarkan hasil pemeriksaan autentikasi. Dashboard.vue terakhir terlihat seperti ini:

<template>
  <div class="dashboard">
    <div v-if="isLoading"/>
      <div v-else-if="isAuthorized">
        <div class="title">Welcome!</div>
        <div class="message">
          You successfully signed in with Passage.
          <br/><br/>
          Your Passage User ID is: <b>{{username}}</b>
        </div>
      </div>
    <div v-else>
      <div class="title">Unauthorized</div>
      <div class="message">
        You have not logged in and cannot view the dashboard.
        <br/><br/>
        <a href="/" class="link">Login to continue.</a>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useAuthStatus } from '../composables/useAuthStatus'

export default defineComponent({
  name: 'Dashboard',
  setup() {
    const {isLoading, isAuthorized, username} = useAuthStatus()
    return {
      isLoading,
      isAuthorized,
      username,
    }
  },
})
</script>

<style scoped>
.dashboard{
  padding: 30px 30px 20px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.message {
  overflow-wrap: anywhere;
}

.link {
  color: black;
  text-decoration-color: black;
}
</style>

Pengguna yang tidak diautentikasi yang mencoba mengakses /dashboard akan melihat pesan "Tidak Diotorisasi", dan pengguna yang diautentikasi akan melihat dashboard dengan ID Pengguna Passage.

Kesimpulan

Sekarang Anda dapat mencoba biometrik di aplikasi yang baru saja Anda buat. Aplikasinya terlihat seperti ini, dan Anda dapat melihat pengalaman login seperti pengguna.

Artikel Lainnya :

• Menggunakan Redis Untuk Meng-Cache Data Di Server NodeJS Dan ExpressJS
• Mengoptimalkan Query Sequelize
• Mencegah Node API Dari Serangan Hacking

Share this post