Control de acceso con tokens en Solana: tutorial de Solana Mobile

Introducción

A principios de 2023, Solana Mobile lanzó un smartphone basado en blockchain. Con más de 15,000 activaciones, Solana Saga es un dispositivo Android personalizado que mejora la seguridad on-chain mediante una bóveda de semillas a nivel de chip integrada en la experiencia de la billetera. Sin embargo, la experiencia de billetera móvil no es exclusiva de Saga. El mismo adaptador de billetera móvil ofrece un flujo estándar que reduce la complejidad para los desarrolladores que publican en varias plataformas. Entonces, ¿qué distingue a Saga?

Como rito de iniciación para ser propietario de Saga, los usuarios acuñan el Saga Genesis Token, un token NFT soulbound. La colección de tokens ofrece una lista precisa de las direcciones principales de los usuarios de Solana Saga y permite realizar activaciones en la comunidad. Saga Genesis Token ha facilitado más que nunca los airdrops para una comunidad. Aun así, como las billeteras de los usuarios se llenan rápidamente como una tienda de segunda mano, podría ser el momento de explorar soluciones personalizadas para interactuar con la comunidad de propietarios de Saga. Una posibilidad es desarrollar dApps con control de acceso mediante tokens que brinden a los usuarios experiencias personalizadas y exclusivas. 

El control de acceso con tokens permite mostrar información del lado del cliente según los tokens que posee la billetera conectada. Este control determina si una persona puede acceder a la información y puede usarse para ofrecer acceso exclusivo a comunidades como Saga DAO. Este tutorial explica cómo crear una dApp de Solana con control de acceso mediante tokens usando la API DAS de Helius y React Native, con Saga Genesis Token como colección de control de ejemplo. Puedes modificar este tutorial y la demostración para controlar el acceso mediante cualquier grupo de tokens al cambiar sus direcciones y condiciones. Puedes encontrar el repositorio de GitHub aquí: @helius_labs/saga-token-gating-tutorial.

Configuración del entorno

Este tutorial utiliza una PC conectada a Solana Saga mediante un cable USBC. Si no tienes una Saga disponible, también puedes usar un emulador de Android o dispositivos Android. Puedes omitir estos pasos si haces las pruebas en una Saga con el modo de desarrollador habilitado y tienes instaladas en la PC las herramientas del SDK de Android y la versión más reciente de NodeJS.

Para configurar una Saga para el desarrollo móvil, ve a la configuración y busca Número de compilación. Toca la opción 7 veces hasta que aparezca el mensaje emergente «¡Ahora eres desarrollador!». Busca y habilita Opciones para desarrolladores y activa Depuración por USB en el mismo menú desplegable.

En la computadora, asegúrate de tener NodeJS instalado y actualizado a la versión v20.9.0. Instala la herramienta Android SDK y configura la variable ANDROID_HOME.

Con Git Bash, clona el repositorio de demostración desde el GitHub de Helius y ábrelo en un editor de código. Usa la línea de comandos de Git Bash para acceder con cd a la carpeta app y ejecuta yarn para instalar la aplicación. Para ejecutar la aplicación, ingresa el siguiente comando mientras haya un dispositivo conectado o el emulador de Android esté en ejecución.

yarn react-native run-android

Control de acceso con tokens para Solana Saga

Descripción general del flujo de trabajo del control de acceso con tokens:

1. Un usuario autoriza una sesión con su billetera y proporciona su clave pública a la dApp.
2. La dApp obtiene datos del endpoint searchAssets de la API DAS.
3. Se desestructura el JSON de la respuesta para acceder a los resultados.
4. Se validan los resultados y se determina la propiedad de los tokens.
5. Se establece el estado de verificación y se renderiza el cliente según corresponda.

Veamos el código. Primero, construiremos la solicitud a la API DAS de Helius para recibir información sobre el usuario y si posee Saga Genesis Token.

Para recibir información sobre Saga Genesis Token, se asigna la dirección del token de la colección a la variable SagaGenesisToken. Reemplaza esta variable por la dirección de otro token para controlar el acceso mediante otras colecciones.

La solicitud requiere una clave de la API de Helius, que se dejó vacía intencionalmente en el tutorial. La práctica óptima para proteger la clave es usar un servidor proxy que reenvíe las solicitudes. El repositorio @helius_labs/helius_rpc_proxy contiene un worker de Cloudflare que puedes implementar con un clic para usarlo como URL RPC mientras ocultas la clave de la API.

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

La función findSagaGenesisToken recibe como argumento la dirección de la billetera del usuario y la usa en los parámetros de la solicitud POST enviada a la URL RPC de Helius.

Esta solicitud usa el método searchAssets para consultar los activos que posee ownerAddress y que están agrupados por un collection específico. Después, la respuesta de la API se estructura como JSON y se desestructura para acceder al resultado.

La siguiente respuesta muestra la propiedad de Saga Genesis Token:

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

Esta es la respuesta para una billetera que no tiene Saga Genesis Token:

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

Para usar esta función, ve a la carpeta screens y busca MainScreen.tsx. La aplicación renderiza este componente funcional como la pantalla principal, donde puedes importar y usar componentes adicionales, como la función, en la interfaz de usuario.

Para llamar a la función de control de acceso con tokens, importa y coloca la función findSagaGenesisToken dentro de una función callback. Aquí, la función se llama handleConnectPress() porque el callback se invoca cuando los usuarios presionan el botón de conexión.

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

Dentro de la función callback asíncrona, invoca la función transact de @solana-mobile/mobile-wallet-adapter para exponer el objeto Web3MobileWallet, que puedes usar para autorizar una sesión.

El protocolo recorrerá las billeteras disponibles —usará Phantom de forma predeterminada— e iniciará una sesión en la que el usuario deberá autorizar la aplicación desde la interfaz de su billetera antes de volver a la aplicación. El usuario debe firmar un mensaje para validar la propiedad de la billetera.

Para este tutorial, la verificación ocurre del lado del servidor. Sin embargo, en aplicaciones de producción, la verificación del mensaje debe hacerse en el backend mediante una API para garantizar que la propiedad de la cuenta sea legítima.

Cuando se autoriza la billetera del usuario, puedes obtener su clave pública desestructurando los resultados autorizados. Ahora puedes usar su publicKey para comprobar si posee Saga Genesis Token.

Al llamar a findSagaGenesisToken con la clave pública del usuario, se envía una solicitud a la API DAS y se devuelven en un array los resultados de los tokens encontrados. Si el usuario tiene exactamente un Saga Genesis Token, establece el estado de verificación en true. De lo contrario, establece el estado de verificación en false. 

Usa el estado de verificación para renderizar pantallas y componentes de forma condicional. En este tutorial, los estados son: esperando conexión, verificado y no verificado.

Consulta la lógica de renderizado condicional en Mainscreen.tsx. Es una representación simplificada de cómo mostrar información según el estado de verificación. Puedes modificar el repositorio de GitHub o usarlo como referencia para personalizar aún más la aplicación. Un ejemplo de implementación sería conectar el control de acceso con tokens a React Native Navigation para navegar de forma condicional entre pantallas.

Aplicaciones del control de acceso con tokens

El control de acceso con tokens es un concepto novedoso introducido con Web3, en el que poseer activos concede derechos de acceso al contenido. La lógica se aplica a sectores como la seguridad, los bienes de consumo, la publicación y la distribución.

Las herramientas de seguridad de Discord usan el control de acceso con tokens para ofrecer a las comunidades acceso limitado según la propiedad y la cantidad de tokens que posean.

En el sector de bienes y servicios de consumo, los comerciantes pueden ofrecer cupones, descuentos y oportunidades de compra a las comunidades mediante el control de acceso con tokens.

Esto aporta más utilidad a la propiedad de activos y crea una forma más tangible de usar activos digitales para funciones del mundo real.

La propiedad de activos impulsa los sectores de medios y contenido al monetizar la propiedad y ofrecer experiencias personalizadas.

Estas son algunas cosas que puedes crear con el control de acceso mediante tokens:

• Códigos de referidos y cupones exclusivos
• Blog al estilo Substack
• Solicitudes de airdrops 
• Paneles privados 
• dApps de narrativa gamificada
• Chats grupales secretos 
• Encuesta on-chain
• Ventajas y eventos de videojuegos personalizados

La ventaja del control de acceso con tokens mediante la API DAS es que puedes usar cualquier token. Una aplicación DeFi podría exigir que los usuarios tengan una cantidad mínima de Solana para acceder, de forma similar a un chat grupal de NFT que exige a sus miembros verificar que poseen una cantidad mínima de tokens. Puedes controlar el acceso a tu dApp con tokens SPL, NFT, SFT, SBT y cNFT usando la misma lógica con la API DAS.

Conclusión

Este tutorial ofrece una descripción simplificada del uso de la API DAS para implementar el control de acceso con tokens en dApps creadas con React Native. Puedes aplicar la lógica a cualquier colección o token y adaptarla a casos de uso específicos. Las experiencias con control de acceso mediante tokens aportan exclusividad y valor a las comunidades. Saga Genesis Token permite distribuir airdrops a una comunidad sólida y abre muchas oportunidades tanto para creadores como para usuarios. Web3 introduce la propiedad con autocustodia de bienes digitales. Esto da lugar a comunidades unidas por la propiedad de activos. Dado que Solana Saga combina la tecnología física y digital para ofrecer una experiencia nativa de Solana, deben crearse aplicaciones que mejoren y recompensen esa experiencia. Más allá de las ganancias, el control de acceso con tokens fomenta el uso de la propiedad de activos digitales en la nueva era de internet.

¿Te interesa encontrar más contenido sobre el desarrollo de dApps móviles para Saga? Únete a los más de 15,000 propietarios de Saga en Saga DAO y sé de los primeros en enterarte de los últimos lanzamientos de dApps, ventajas y recompensas. Si este tutorial sobre control de acceso con tokens te inspiró estrategias de implementación, conversa con la comunidad de desarrolladores en el Discord de Helius y mantente al día con el blog de Helius. Acelera la adopción de blockchain y crea con la tecnología de mayor rendimiento junto a Helius.

Recursos adicionales

• Repositorio de demostración – GitHub de Helius
• API Digital Asset Standard (DAS) – API integral de activos desarrollada por Helius
• Taller: desarrollo móvil – Taller virtual de Solana Foundation
• Plantilla de dApp móvil de Solana – Por Mike Sulistio, Solana Mobile 
• Adaptador de billetera móvil – Adaptador de billetera multiplataforma
• Publicación de dApps – Cómo publicar en la DApp Store