BARU: Helius mengakuisisi Light Protocol
Pembatasan Akses Berbasis Token di Solana - Tutorial Solana Mobile
Blog/Pengembangan

Pembatasan Akses Berbasis Token di Solana - Tutorial Solana Mobile

Engineer Integrasi0xSolanaGirl di X
Bacaan 8 menit
Daftar Isi

Pendahuluan

Pada awal 2023, Solana Mobile meluncurkan smartphone yang didukung blockchain. Kini, dengan lebih dari 15.000 aktivasi, Solana Saga merupakan perangkat Android khusus yang meningkatkan keamanan on-chain melalui seed vault tingkat chip yang terintegrasi ke dalam pengalaman dompet. Namun, pengalaman dompet seluler tidak hanya tersedia di Saga. Adaptor dompet seluler yang sama menyediakan alur standar untuk mengurangi kompleksitas bagi developer yang merilis aplikasi lintas platform. Jadi, apa yang membedakan Saga?

Sebagai ritus peralihan untuk memiliki Saga, pengguna mencetak Saga Genesis Token – token NFT soulbound. Koleksi token ini menyediakan daftar akurat alamat utama pengguna Solana Saga dan memungkinkan berbagai aktivasi di komunitas. Saga Genesis Token membuat distribusi airdrop kepada komunitas lebih mudah dari sebelumnya. Namun, karena dompet pengguna dengan cepat dipenuhi berbagai aset layaknya toko barang bekas, mungkin sudah waktunya menjajaki solusi khusus untuk melibatkan komunitas pemegang Saga. Salah satu kemungkinannya adalah mengembangkan dApp dengan akses berbasis token yang memberikan pengalaman khusus dan eksklusif kepada pengguna. 

Pembatasan akses berbasis token merupakan cara untuk menampilkan informasi di sisi klien berdasarkan kepemilikan token dalam dompet yang terhubung. Pembatasan ini menentukan apakah seseorang dapat mengakses informasi dan bisa digunakan untuk memberikan akses eksklusif ke komunitas seperti Saga DAO. Tutorial ini membahas pembuatan dApp Solana dengan akses berbasis token menggunakan DAS API dari Helius dan React Native, dengan Saga Genesis Token sebagai contoh koleksi pembatas akses. Tutorial dan demo ini dapat dimodifikasi untuk membatasi akses berdasarkan kelompok token apa pun dengan mengubah alamat dan ketentuan token. Repositori GitHub dapat ditemukan di sini: @helius_labs/saga-token-gating-tutorial.

Penyiapan Lingkungan

Tutorial ini menggunakan PC yang terhubung ke Solana Saga melalui kabel USBC. Jika Saga tidak tersedia, emulator Android atau perangkat Android juga dapat digunakan. Langkah-langkah ini dapat dilewati jika pengujian dilakukan di Saga dengan mode developer aktif, serta Android SDK dan NodeJS versi terbaru telah terinstal di PC.

Untuk mengonfigurasi Saga bagi pengembangan seluler, buka pengaturan dan cari Nomor Build. Ketuk opsi tersebut 7 kali hingga pop-up ‘Anda sekarang adalah developer!’ muncul. Cari dan aktifkan Opsi Developer, lalu aktifkan Debugging USB di menu dropdown yang sama.

Di komputer, pastikan NodeJS telah terinstal dan diperbarui ke v20.9.0. Instal alat Android SDK dan tetapkan variabel ANDROID_HOME.

Dengan menggunakan Git Bash, kloning repositori demo dari GitHub Helius dan buka di editor kode. Gunakan command prompt Git Bash untuk menjalankan cd ke folder app, lalu jalankan yarn untuk menginstal aplikasi. Untuk menjalankan aplikasi, masukkan perintah berikut saat perangkat terhubung atau emulator Android sedang berjalan.

Kode
yarn react-native run-android

Pembatasan Akses Berbasis Token untuk Solana Saga

Gambaran umum tingkat tinggi tentang alur kerja pembatasan akses berbasis token:

  1. Pengguna mengotorisasi sesi dengan dompet mereka dan memberikan public key kepada dApp.
  2. dApp mengambil data dari endpoint searchAssets DAS API.
  3. JSON dalam respons didestrukturisasi untuk mengakses hasilnya.
  4. Hasil divalidasi dan kepemilikan token ditentukan.
  5. Status verifikasi ditetapkan dan klien dirender sesuai status tersebut.

Mari kita pelajari kodenya. Pertama, kita akan membuat permintaan ke Helius DAS API untuk menerima informasi tentang pengguna dan kepemilikan Saga Genesis Token mereka.

Untuk menerima informasi tentang Saga Genesis Token, variabel SagaGenesisToken ditetapkan ke alamat token koleksi tersebut. Ganti variabel ini dengan alamat token lain untuk membatasi akses berdasarkan koleksi lain.

Kunci Helius API diperlukan untuk permintaan ini dan sengaja dikosongkan dalam tutorial. Praktik keamanan kunci yang optimal adalah menggunakan server proxy untuk meneruskan permintaan. Repositori @helius_labs/helius_rpc_proxy berisi worker Cloudflare yang dapat diterapkan dengan sekali klik untuk digunakan sebagai URL RPC sekaligus menyembunyikan kunci API.

Kode
import { PublicKey } from "@solana/web3.js";

export default async function findSagaGenesisToken(address: PublicKey) {
  // Replace this with the token address you want to gate for
  const SagaGenesisToken = '46pcSL5gmjBrPqGKFaLbbCmR6iVuLJbnQy13hAe7s6CC';

  // Populate your Helius API key
  const HELIUS_APIKEY = '';
  const url = `https://mainnet.helius-rpc.com/?api-key=${HELIUS_APIKEY}`

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      id: 'my-id',
      method: 'searchAssets',
      params: {
        ownerAddress: address.toString(),
        grouping: ["collection", SagaGenesisToken],
        page: 1,
        limit: 10
      },
    }),
  });

  const { result } = await response.json();
  return (result.items)
};

Fungsi findSagaGenesisToken menerima alamat dompet pengguna sebagai argumen dan menggunakannya dalam parameter permintaan POST yang dikirim ke URL RPC Helius.

Permintaan ini menggunakan metode searchAssets untuk mencari aset yang dimiliki oleh ownerAddress dan dikelompokkan berdasarkan collection tertentu. Respons API kemudian disusun menjadi JSON dan didestrukturisasi untuk mengakses hasilnya.

Berikut adalah respons yang menunjukkan kepemilikan Saga Genesis Token:

Kode
{
   "items":[
      {
         "authorities":[Array],
         "burnt":false,
         "compression":[Object],
         "content":[Object],
         "creators":[Array],
         "grouping":[Array],
         "id":[Token_Address],
         "interface":"V1_NFT",
         "mutable":true,
         "ownership":[Object],
         "royalty":[Object],
         "supply":[Object]
      }
   ],
   "limit":10,
   "page":1,
   "total":1
}

Berikut adalah respons untuk dompet tanpa Saga Genesis Token:

Kode
{
   "items":[],
   "limit":10,
   "page":1,
   "total":0
}

Untuk menggunakan fungsi ini, buka folder screens untuk menemukan MainScreen.tsx. Aplikasi merender komponen fungsional ini sebagai layar utama, tempat komponen tambahan seperti fungsi tersebut dapat diimpor dan digunakan dalam antarmuka pengguna.

Untuk memanggil fungsi pembatasan akses berbasis token, impor dan tempatkan fungsi findSagaGenesisToken di dalam fungsi callback. Di sini, fungsi tersebut diberi nama handleConnectPress() karena fungsi callback dipanggil saat pengguna menekan tombol hubungkan.

Kode
// Checks if the user's wallet has a Saga Genesis Token
const handleConnectPress = useCallback(async () => {
  return await transact(async (wallet: Web3MobileWallet) => {
    const authorizationResult = await authorizeSession(wallet);

    const message = "Confirm that you own this wallet.";
    const messageBuffer = new Uint8Array(
      message.split("").map((c) => c.charCodeAt(0))
    );

    const signedMessages = await wallet.signMessages({
      addresses: [authorizationResult.address],
      payloads: [messageBuffer],
    });

    const verified = sign.detached.verify(
      messageBuffer,
      signedMessages[0],
      authorizationResult.publicKey.toBytes()
    );

    if (verified) {
      const result = await findSagaGenesisToken(authorizationResult.publicKey);

      // Checks that user has exactly 1 Saga Genesis Token
      if (result.length === 1) {
        setVerified(true);
      } else {
        setVerified(false);
      }
    } else {
      setVerified(false);
    }
  });
}, [authorizeSession]);

Di dalam fungsi callback asinkron, panggil fungsi transact dari @solana-mobile/mobile-wallet-adapter untuk mengekspos objek Web3MobileWallet, yang dapat digunakan untuk mengotorisasi sesi.

Protokol akan menavigasi dompet yang tersedia (secara default menggunakan Phantom) dan memulai sesi. Pengguna harus mengotorisasi aplikasi di antarmuka dompet sebelum diarahkan kembali ke aplikasi. Pengguna harus menandatangani pesan untuk memvalidasi kepemilikan dompet.

Untuk keperluan tutorial ini, verifikasi dilakukan di sisi server. Namun, dalam aplikasi produksi, verifikasi pesan harus dilakukan di backend melalui API untuk memastikan keabsahan kepemilikan akun.

Setelah dompet pengguna diotorisasi, public key mereka dapat diambil dengan mendestrukturisasi hasil otorisasi. publicKey tersebut kini dapat digunakan untuk mencari kepemilikan Saga Genesis Token.

Memanggil findSagaGenesisToken dengan public key pengguna akan mengirimkan permintaan ke DAS API dan mengembalikan hasil token yang ditemukan dalam sebuah array. Jika pengguna memiliki tepat satu Saga Genesis Token, tetapkan status verifikasi ke true. Jika tidak, status verifikasi ditetapkan ke false. 

Dengan status verifikasi tersebut, render layar dan komponen secara kondisional. Dalam tutorial ini, statusnya adalah: menunggu koneksi, terverifikasi, dan tidak terverifikasi.

Temukan logika rendering kondisional di Mainscreen.tsx sebagai representasi sederhana tentang cara menampilkan informasi berdasarkan status verifikasi. Repositori GitHub dapat dimodifikasi atau dijadikan referensi untuk personalisasi lebih lanjut. Contoh implementasinya adalah menghubungkan pembatasan akses berbasis token ke Navigasi React Native untuk berpindah antar-layar secara kondisional.

Penerapan Pembatasan Akses Berbasis Token

Pembatasan akses berbasis token merupakan konsep baru yang diperkenalkan bersama Web3, ketika kepemilikan aset memberikan hak untuk mengakses konten. Logika ini berlaku untuk sektor seperti keamanan, barang konsumen, penerbitan, dan distribusi.

Alat keamanan Discord menggunakan pembatasan akses berbasis token untuk memberikan akses terbatas ke komunitas berdasarkan kepemilikan dan jumlah token yang dimiliki.

Dalam sektor barang dan layanan konsumen, penjual dapat memberikan kupon, diskon, dan peluang penjualan kepada komunitas berdasarkan pembatasan akses berbasis token.

Hal ini memberikan lebih banyak kegunaan bagi kepemilikan aset dan menciptakan cara yang lebih nyata untuk menggunakan aset digital dalam fungsi dunia nyata.

Kepemilikan aset memperkuat sektor media dan konten dengan memonetisasi kepemilikan dan menyediakan pengalaman khusus.

Berikut beberapa hal yang dapat dibuat dengan pembatasan akses berbasis token:

  • Kode referal dan kupon eksklusif
  • Blog bergaya Substack
  • Klaim airdrop 
  • Dasbor privat 
  • dApp penceritaan dengan gamifikasi
  • Obrolan grup rahasia 
  • Survei on-chain
  • Keuntungan dan acara gim yang disesuaikan

Keunggulan pembatasan akses berbasis token dengan DAS API adalah token apa pun dapat digunakan. Aplikasi DeFi dapat mewajibkan pengguna memiliki Solana dalam jumlah minimum untuk mendapatkan akses, serupa dengan grup obrolan NFT yang mewajibkan anggotanya memverifikasi bahwa mereka memiliki token dalam jumlah minimum. Seseorang dapat membatasi akses ke dApp mereka berdasarkan token SPL, NFT, SFT, SBT, atau cNFT dengan menggunakan logika DAS API yang sama.

Kesimpulan

Tutorial ini memberikan gambaran umum sederhana tentang penggunaan DAS API untuk membatasi akses ke dApp yang dibuat dengan React Native berdasarkan token. Logika ini dapat diterapkan pada koleksi atau token apa pun dan disesuaikan dengan kasus penggunaan tertentu. Pengalaman dengan akses berbasis token memberikan eksklusivitas dan nilai kepada komunitas. Saga Genesis Token memungkinkan airdrop kepada komunitas yang kuat sekaligus membuka banyak peluang bagi kreator dan pengguna. Web3 memperkenalkan kepemilikan mandiri atas barang digital. Hal ini mendorong munculnya komunitas yang terikat oleh kepemilikan aset mereka. Karena Solana Saga menyatukan teknologi fisik dan digital untuk menghadirkan pengalaman native Solana, aplikasi harus dibuat untuk meningkatkan dan memberikan penghargaan atas pengalaman tersebut. Lebih dari sekadar keuntungan, pembatasan akses berbasis token mendorong pemanfaatan kepemilikan aset digital di era baru internet.

Tertarik dengan lebih banyak konten pengembangan dApp seluler Saga? Bergabunglah dengan lebih dari 15.000 pemilik Saga di Saga DAO dan jadilah yang pertama mengetahui rilis dApp, keuntungan, dan hadiah terbaru. Jika tutorial pembatasan akses berbasis token ini menginspirasi strategi implementasi, berdiskusilah dengan komunitas developer di Discord Helius dan ikuti informasi terbaru dari Blog Helius. Percepat adopsi blockchain dan  bangun di atas teknologi berperforma tertinggi bersama Helius.

Referensi Tambahan

Artikel Terkait

Berlangganan Helius

Ikuti perkembangan terbaru dalam pengembangan Solana dan dapatkan pembaruan saat kami memublikasikan postingan

Gambar diperbesar