NEU: Helius übernimmt Light Protocol
Token-Gating auf Solana – ein Solana-Mobile-Tutorial
Blog/Entwicklung

Token-Gating auf Solana – ein Solana-Mobile-Tutorial

Integration Engineer0xSolanaGirl auf X
8 Min. Lesezeit
Inhaltsverzeichnis

Einführung

Anfang 2023 brachte Solana Mobile ein Blockchain-basiertes Smartphone auf den Markt. Inzwischen wurde das Solana Saga mehr als 15.000-mal aktiviert. Das speziell entwickelte Android-Gerät verbessert die Onchain-Sicherheit durch einen auf Chipebene integrierten Seed Vault für das Wallet-Erlebnis. Das mobile Wallet-Erlebnis ist jedoch nicht auf das Saga beschränkt. Derselbe Mobile Wallet Adapter bietet einen standardisierten Ablauf, der die plattformübergreifende Veröffentlichung für Entwickler vereinfacht. Was unterscheidet das Saga also von anderen Geräten?

Als Teil des Einstiegs in die Saga-Community prägen Nutzer den Saga Genesis Token – einen Soulbound NFT-Token. Die Token-Sammlung liefert eine präzise Liste der primären Adressen von Solana-Saga-Nutzern und ermöglicht Aktionen innerhalb der Community. Mit dem Saga Genesis Token ist es einfacher denn je, Airdrops an eine Community zu verteilen. Da sich die Wallets der Nutzer jedoch schnell wie ein Secondhandladen füllen, ist es vielleicht an der Zeit, maßgeschneiderte Lösungen für die Saga-Holder-Community zu entwickeln. Eine Möglichkeit sind Token-Gated dApps, die Nutzern individuelle und exklusive Erlebnisse bieten. 

Token-Gating zeigt clientseitige Informationen abhängig davon an, welche Token das verbundene Wallet besitzt. Es legt fest, ob eine Person auf Informationen zugreifen kann, und ermöglicht exklusiven Zugang zu Communities wie Saga DAO. In diesem Tutorial erstellst du mit der Helius DAS API und React Native eine Token-Gated dApp auf Solana. Als zugangsbeschränkende Sammlung dient der Saga Genesis Token. Du kannst das Tutorial und die Demo für jede beliebige Token-Gruppe anpassen, indem du die Token-Adressen und Bedingungen änderst. Das GitHub-Repository findest du hier: @helius_labs/saga-token-gating-tutorial.

Umgebung einrichten

Für dieses Tutorial wird ein PC über ein USB-C-Kabel mit dem Solana Saga verbunden. Wenn kein Saga verfügbar ist, kannst du auch einen Android-Emulator oder ein anderes Android-Gerät verwenden. Du kannst diese Schritte überspringen, wenn du auf einem Saga mit aktiviertem Entwicklermodus testest und auf dem PC die Android-SDK-Tools sowie die neueste Version von NodeJS installiert sind.

Um ein Saga für die mobile Entwicklung zu konfigurieren, öffne die Einstellungen und suche nach Build-Nummer. Tippe siebenmal auf die Option, bis das Pop-up „Du bist jetzt Entwickler!“ erscheint. Suche nach Entwickleroptionen, aktiviere sie und aktiviere im selben Drop-down-Menü auch USB-Debugging.

Stelle sicher, dass NodeJS auf dem Computer installiert und auf v20.9.0 aktualisiert ist. Installiere das Tool Android SDK und lege die Variable ANDROID_HOME fest.

Klone mit Git Bash das Demo-Repository vom Helius-GitHub und öffne es in einem Code-Editor. Wechsle über die Git-Bash-Eingabeaufforderung mit cd in den Ordner app und führe yarn aus, um die App zu installieren. Gib den folgenden Befehl ein, um die App bei verbundenem Gerät oder laufendem Android-Emulator zu starten.

Code
yarn react-native run-android

Token-Gating für Solana Saga

Ein allgemeiner Überblick über den Token-Gating-Ablauf:

  1. Ein Nutzer autorisiert eine Sitzung mit seinem Wallet und stellt der dApp seinen öffentlichen Schlüssel bereit.
  2. Die dApp ruft Daten vom DAS-API-Endpunkt searchAssets ab.
  3. Das JSON der Antwort wird destrukturiert, um auf die Ergebnisse zuzugreifen.
  4. Die Ergebnisse werden validiert und der Token-Besitz wird ermittelt.
  5. Der Verifizierungsstatus wird gesetzt und der Client entsprechend gerendert.

Sehen wir uns den Code genauer an. Zuerst erstellen wir die Anfrage an die Helius DAS API, um Informationen über den Nutzer und seinen Besitz des Solana Genesis Token abzurufen.

Um Informationen zum Saga Genesis Token abzurufen, wird die Variable SagaGenesisToken auf die Token-Adresse der Sammlung gesetzt. Ersetze diese Variable durch eine andere Token-Adresse, um Token-Gating für andere Sammlungen einzurichten.

Für die Anfrage ist ein Helius API Key erforderlich, der im Tutorial absichtlich leer bleibt. Am sichersten schützt du den Schlüssel, indem du die Anfragen über einen Proxyserver weiterleitest. Das Repository @helius_labs/helius_rpc_proxy enthält einen Cloudflare Worker, den du mit einem Klick bereitstellen und als RPC URL verwenden kannst, während der API-Schlüssel verborgen bleibt.

Code
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)
};

Die Funktion findSagaGenesisToken übernimmt die Wallet-Adresse des Nutzers als Argument und verwendet sie in den Parametern der POST-Anfrage, die an die Helius RPC URL gesendet wird.

Diese Anfrage verwendet die Methode searchAssets, um nach Assets zu suchen, die ownerAddress gehören und nach einer bestimmten collection gruppiert sind. Anschließend wird die API-Antwort als JSON strukturiert und destrukturiert, um auf das Ergebnis zuzugreifen.

Die folgende Antwort zeigt den Besitz des Saga Genesis Token:

Code
{
   "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
}

Dies ist die Antwort für ein Wallet ohne Saga Genesis Token:

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

Um diese Funktion zu verwenden, navigiere zum Ordner „screens“ und suche nach MainScreen.tsx. Die App rendert diese funktionale Komponente als Hauptbildschirm. Dort kannst du zusätzliche Komponenten wie die Funktion importieren und in der Benutzeroberfläche verwenden.

Um die Token-Gating-Funktion aufzurufen, importiere die Funktion findSagaGenesisToken und füge sie in eine Callback-Funktion ein. Hier heißt die Funktion handleConnectPress(), da die Callback-Funktion aufgerufen wird, wenn Nutzer auf die Schaltfläche zum Verbinden tippen.

Code
// 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]);

Rufe innerhalb der asynchronen Callback-Funktion die transact-Funktion aus @solana-mobile/mobile-wallet-adapter auf, um das Objekt Web3MobileWallet bereitzustellen. Damit kannst du eine Sitzung autorisieren.

Das Protokoll öffnet die verfügbaren Wallets – standardmäßig Phantom – und startet eine Sitzung. Der Nutzer muss die Anwendung in seiner Wallet-Oberfläche autorisieren, bevor er zurück zur App geleitet wird. Außerdem muss er eine Nachricht signieren, um nachzuweisen, dass ihm das Wallet gehört.

Für dieses Tutorial erfolgt die Verifizierung serverseitig. In produktiven Apps muss die Nachricht jedoch im Backend über eine API verifiziert werden, um den rechtmäßigen Besitz des Accounts sicherzustellen.

Sobald das Wallet des Nutzers autorisiert ist, kannst du dessen öffentlichen Schlüssel abrufen, indem du die autorisierten Ergebnisse destrukturierst. Mit dem publicKey kannst du nun prüfen, ob der Nutzer den Saga Genesis Token besitzt.

Der Aufruf von findSagaGenesisToken mit dem öffentlichen Schlüssel des Nutzers sendet eine Anfrage an die DAS API und gibt die gefundenen Token als Array zurück. Besitzt der Nutzer genau einen Saga Genesis Token, setze den Verifizierungsstatus auf true. Andernfalls wird der Verifizierungsstatus auf false gesetzt. 

Rendere Bildschirme und Komponenten abhängig vom Verifizierungsstatus. In diesem Tutorial gibt es drei Status: Verbindung ausstehend, verifiziert und nicht verifiziert.

Die Logik für das bedingte Rendering findest du in Mainscreen.tsx. Sie zeigt vereinfacht, wie sich Informationen abhängig vom Verifizierungsstatus darstellen lassen. Du kannst das GitHub-Repository anpassen oder als Referenz für weitere Personalisierungen verwenden. Eine mögliche Implementierung wäre, das Token-Gating mit React Native Navigation zu verbinden, um abhängig vom Status zwischen Bildschirmen zu navigieren.

Anwendungsfälle für Token-Gating

Token-Gating ist ein mit Web3 eingeführtes Konzept, bei dem der Besitz von Assets Zugriffsrechte auf Inhalte gewährt. Diese Logik lässt sich auf Bereiche wie Sicherheit, Konsumgüter, Veröffentlichungen und Vertrieb anwenden.

Sicherheitstools für Discord nutzen Token-Gating, um den Zugang zu Communities anhand des Token-Besitzes und der Anzahl der gehaltenen Token zu beschränken.

Bei Konsumgütern und Dienstleistungen können Händler Communities mithilfe von Token-Gating Gutscheine, Rabatte und Verkaufsangebote bereitstellen.

Dadurch erhält der Besitz von Assets einen größeren Nutzen und digitale Assets lassen sich greifbarer für reale Funktionen einsetzen.

Der Besitz von Assets stärkt Medien- und Inhaltsbereiche, indem er Besitz monetarisiert und individuelle Erlebnisse ermöglicht.

Mit Token-Gating kannst du zum Beispiel Folgendes entwickeln:

  • Exklusive Empfehlungscodes und Gutscheine
  • Blog im Stil von Substack
  • Airdrop-Claims 
  • Private Dashboards 
  • dApps für spielerisches Storytelling
  • Geheime Gruppenchats 
  • Onchain-Umfrage
  • Individuelle Gaming-Vorteile und Events

Der Vorteil von Token-Gating mit der DAS API: Du kannst jeden beliebigen Token verwenden. Eine DeFi-App könnte voraussetzen, dass Nutzer eine Mindestmenge an Solana besitzen. Ähnlich könnte ein NFT-Gruppenchat von seinen Mitgliedern verlangen, den Besitz einer Mindestanzahl von Token nachzuweisen. Mit derselben Logik und der DAS API kannst du den Zugang zu deiner dApp anhand von SPL-Token, NFTs, SFTs, SBTs oder cNFTs beschränken.

Fazit

Dieses Tutorial bietet einen vereinfachten Überblick darüber, wie du mit der DAS API Token-Gating für React-Native-dApps einrichtest. Du kannst die Logik auf beliebige Sammlungen oder Token anwenden und an konkrete Anwendungsfälle anpassen. Token-Gating-Erlebnisse schaffen Exklusivität und Mehrwert für Communities. Der Saga Genesis Token ermöglicht Airdrops an eine starke Community und eröffnet Creatorn und Nutzern zahlreiche Möglichkeiten. Web3 führt selbstverwaltetes Eigentum an digitalen Gütern ein. Dadurch entstehen Communities, die der gemeinsame Besitz von Assets verbindet. Das Solana Saga vereint physische und digitale Technologie zu einem nativen Solana-Erlebnis. Anwendungen müssen dieses Erlebnis verbessern und belohnen. Über finanzielle Vorteile hinaus fördert Token-Gating die Nutzung digitaler Assets in der neuen Ära des Internets.

Möchtest du mehr über die Entwicklung mobiler dApps für Saga erfahren? Schließe dich den mehr als 15.000 Saga-Besitzern bei Saga DAO an und erfahre als Erster von neuen dApp-Veröffentlichungen, Vorteilen und Belohnungen. Wenn dich dieses Token-Gating-Tutorial zu eigenen Implementierungsstrategien inspiriert hat, tausche dich im Helius Discord mit der Entwickler-Community aus und bleibe mit den Helius-Blogbeiträgen auf dem Laufenden. Beschleunige die Blockchain-Adoption und entwickle mit Helius auf der leistungsstärksten Technologie.

Weitere Ressourcen

Ähnliche Artikel

Helius abonnieren

Bleib bei der Solana-Entwicklung auf dem Laufenden und erhalte Updates, wenn wir neue Beiträge veröffentlichen

Vergrößertes Bild