Cómo construir un inicio de sesión Web3 con la biblioteca Web3.js

Cómo construir un inicio de sesión Web3 con la biblioteca Web3.js

Índice de contenido

1. Introducción


2. Requisitos previos


3. ¿Qué es Web3.js?


4. Paso 1 - Instalación de la biblioteca Web3.js


5. Paso 2 - Configuración de la cartera de Ethereum


6. Paso 3 - Lo que vamos a construir - El proceso de reflexión


7. Paso 4 - Creación de la interfaz de inicio de sesión y del panel de control


8. Paso 5 - Comprobar si el usuario tiene una cartera de Ethereum instalada


9. Paso 6 - Añadir la función de inicio de sesión de Web3


10. Paso 7 - Manejo de la redirección


11. Paso 8 - Visualización de la dirección de la cartera Ethereum del usuario


12. Paso 9 - Visualización del saldo de Ethereum del usuario


13. Paso 10 - Añadir la función de cierre de sesión de Web3


14. Conclusión


Introducción

Internet ha evolucionado a lo largo de los años desde la primera versión de la web (web1), que requiere un nombre de usuario y una contraseña para la autenticación de un usuario.


De la web1 pasamos a la segunda versión de la web, la web2, en la que las redes sociales se utilizan como medio de identificación y autentificación en otras plataformas, eliminando la necesidad de rellenar manualmente un nombre de usuario y una contraseña.


El principal problema de la web2 es que las personas no tienen ningún control sobre sus datos personales; en su lugar, organismos centrales como los gobiernos y la mayoría de las grandes empresas con las que has firmado, tienen y gestionan los datos de sus usuarios de la manera que les parece.


Ahora, la tercera versión de la web, a menudo denominada web3, es una versión descentralizada de internet en la que cada usuario tiene un control total sobre sus datos personales, a diferencia de las generaciones anteriores de internet en las que el usuario tenía poco o ningún control.


La autenticación de un usuario en web3 sólo requiere que el usuario se conecte a su cartera de criptomonedas en plataformas web3, como OpenSea.


Este artículo muestra cómo añadir la autenticación de inicio de sesión web3 a su sitio web utilizando la biblioteca Web3.js.


Requisitos previos

Antes de continuar con esta guía, debes tener un conocimiento básico de JavaScript y tener un monedero basado en Ethereum instalado (visto en el paso 2).


¿Qué es Web3.js?

Según la Fundación Ethereum, Web3.js es una colección de bibliotecas que permiten interactuar con un nodo local o remoto de Ethereum utilizando HTTP, IPC o WebSocket.


Web3.js se puede utilizar en el frontend o en el backend de una aplicación para leer datos de la blockchain, realizar transacciones y desplegar contratos inteligentes en la blockchain. 


Paso 1 - Instalación de la biblioteca Web3.js

La forma más rápida de añadir Web3.js a tu proyecto es incluyendo el CDN de Web3.js en el archivo HTML de tu proyecto.


Puedes obtenerlo de CDNJS aquí, o copiar la etiqueta de script de abajo en tu archivo HTML.


Otra forma de instalar la biblioteca Web3.js en tu aplicación frontend o backend es a través de un gestor de paquetes utilizando yarn add web3 o npm install web3. Estos comandos instalarán la biblioteca Web3.js en tu aplicación. En este tutorial utilizaremos el CDN de Web3.js.


En el directorio de tu proyecto, crea un nuevo archivo index.html y pega el código HTML de abajo:


Hemos añadido con éxito la biblioteca Web3.js a nuestro proyecto.


Paso 2 - Configuración de la cartera de Ethereum

Para que los usuarios puedan conectarse a su cuenta de Ethereum desde nuestra aplicación, deben tener un monedero basado en Ethereum configurado en su dispositivo.


El monedero de Ethereum actuará como la aplicación bancaria que le permite acceder a su cuenta bancaria. Los monederos de Ethereum pueden tener la forma de un monedero de hardware físico, un monedero de escritorio, una aplicación de monedero móvil o una extensión de monedero de navegador web como Metamask.


En este tutorial, utilizaremos Metamask, que nos permitirá interactuar con nuestra cuenta a través de un navegador web. Sigue este enlace para instalar un monedero Metamask en tu navegador.


Paso 3 - Lo que vamos a construir - El proceso de reflexión

Vamos a construir un sistema de autenticación de inicio de sesión, donde los usuarios pueden iniciar sesión en nuestra aplicación utilizando su cartera Ethereum. Nuestra aplicación tendrá lo siguiente:


1. Una sección de inicio de sesión donde el usuario puede conectarse a su cartera.


2. Una sección del panel de control para mostrar la dirección del monedero del usuario conectado y el saldo de su cuenta de Ethereum.


La sección de inicio de sesión se mostrará por defecto si no hay ningún usuario conectado, mientras que la sección del panel de control se mostrará una vez que el usuario esté conectado con su cuenta de Ethereum. Cambiaremos las dos secciones utilizando la propiedad CSS display y JavaScript.


Paso 4 - Creación de la interfaz de inicio de sesión y del panel de control

Ahora que tenemos Web3.js y un monedero de Ethereum instalado, vamos a construir la interfaz donde el usuario puede conectarse a su monedero y un tablero donde será redirigido después de iniciar la sesión.


Actualice su archivo index.html con las siguientes líneas de código:


A continuación, crea un nuevo archivo index.js, aquí es donde escribiremos nuestras funcionalidades más adelante.


Por último, crea un nuevo archivo index.css y pega las siguientes líneas de código CSS:


Cuando abres tu archivo index.html en tu navegador (estoy usando liveserver), deberías tener la siguiente interfaz.


La sección de inicio de sesión se muestra por defecto ya que no hay ningún usuario conectado. También estamos alertando al usuario de que debe tener un monedero de Ethereum instalado en su dispositivo (ver por qué en el paso 2).


Copie y pegue el siguiente código en su archivo index.css para ocultar la sección de inicio de sesión y mostrar la sección del panel de control:


Tu panel de control debería tener este aspecto:


Se trata de un simple panel de control que muestra la dirección de la cartera del usuario conectado y el saldo de su cartera de Ethereum.


En lugar de actualizar manualmente la propiedad de visualización de CSS, procederemos a implementar las funcionalidades de inicio de sesión en el siguiente paso, donde usaremos JavaScript para manejar la alternancia entre la sección de inicio de sesión y el tablero (basado en el estado de autenticación de la aplicación).


NOTA: Asegúrese de eliminar los estilos CSS de prueba.


Paso 5 - Comprobar si el usuario tiene una cartera de Ethereum instalada

Queremos asegurarnos de que el usuario tiene un monedero de Ethereum instalado en su navegador. También queremos avisar a los usuarios que no tengan un monedero instalado justo después de que se cargue la página.


Seguiremos el proceso de reflexión a continuación:


1. Crea una variable de ámbito global userWalletAddress, aquí es donde almacenaremos la dirección del monedero del usuario.


2. Al cargar la página, comprueba si el usuario tiene un monedero de Ethereum instalado.


3. Si el usuario tiene un monedero instalado, cree una nueva instancia de web3.


4. Si no, se le pedirá al usuario que instale un monedero.


5. Entonces comprobaremos si la dirección del monedero de un usuario ya existe en el localStorage del navegador, y la actualizaremos en la variable userWalletAddress.


6. Finalmente, llamaremos a la función showUserDashboard.


El proceso anterior se puede traducir en las siguientes líneas de código:


Copie el siguiente código en su archivo index.js:


Vamos a probar nuestra implementación con los siguientes casos de prueba:


CASO 1 - Usuario sin cartera de Ethereum instalada

Utilizaremos una ventana de incógnito para probar qué sucede cuando un usuario sin una cartera de Ethereum instalada intenta utilizar nuestra aplicación. Abra una ventana de incógnito en su navegador y visite la URL del proyecto:


Te aparecerá este mensaje: Por favor, instale MetaMask o cualquier cartera de extensión de Ethereum.


Caso 1 aprobado ✅


CASO 2 - Usuario con una cartera de Ethereum instalada

Lanza tu proyecto en una ventana normal del navegador donde tengas tu cartera de Ethereum instalada, así que ahora, no deberías recibir el mensaje de aviso.


Caso 2 aprobado ✅


Pero la función showUserDashboard del paso 6 no está definida todavía, la crearemos más tarde.


Paso 6 - Añadir la función de inicio de sesión de Web3

Para la función de inicio de sesión, nuestro principal interés es la dirección del monedero del usuario, que obtendremos de la cuenta seleccionada por el usuario en el monedero de Ethereum. Sólo nos interesa la dirección del monedero de Ethereum seleccionado, ya que es posible que un usuario tenga varias cuentas de Ethereum en su monedero.


Seguiremos el siguiente proceso para implementar nuestra función de inicio de sesión en Ethereum:


1. Primero, crea una función async loginWithEth y comprueba si la instancia web3 está habilitada.


2. Si la instancia web3 está habilitada, utilizaremos el método window.ethereum para activar el monedero Metamask para que el usuario seleccione una cuenta de Ethereum.


3. Después de seleccionar una cuenta, actualizaremos la variable global userWalletAddress con la dirección del monedero seleccionado por el usuario.


4. A continuación, almacenaremos la cuenta seleccionada en localStorage.


5. A continuación, redirigiremos al usuario a su panel de control.


6. Por último, enlazaremos la función loginWithEth con el botón de inicio de sesión utilizando el receptor de eventos de clic.


El proceso  anterior se puede traducir en las siguientes líneas de código:


Actualice su archivo index.js con el siguiente código:


NOTA: En una aplicación lista para la producción, es posible que desee almacenar la dirección de la cartera de Ethereum del usuario en su base de datos para que sirva como identificador único del usuario.


Antes de proceder a probar nuestra implementación, vamos a crear la función showUserDashboard en el siguiente paso.


Paso 7 - Manejo de la redirección

En este paso, vamos a implementar la redirección (toggle) entre la sección de inicio de sesión y la sección del panel de control del usuario.


Para manejar la redirección, comprobaremos si un usuario está conectado con su dirección de cartera. Si no está conectado, mostraremos la sección de inicio de sesión y, una vez conectado, redirigiremos al usuario a la sección del panel de control. También queremos actualizar el título de la página para mostrar al usuario el estado del sitio web.


Actualice su archivo index.js con las siguientes líneas de código:


Si actualizas tu aplicación después de aplicar la función showUserDashboard, deberías poder conectarte a tu monedero Metamask y ser redirigido a la sección del tablero. ¡Fíjate también en la barra de título! 


En el siguiente paso, crearemos la función showUserWalletAddress para mostrar la dirección del monedero del usuario en el tablero.


Paso 8 - Visualización de la dirección de la cartera Ethereum del usuario

En este paso, crearemos la función showUserWalletAddress que se encarga de mostrar la dirección del monedero del usuario en el panel de control. La dirección del monedero del usuario conectado ya está disponible en la variable global userWalletAddress.


Descomenta el showUserWalletAddress(); y actualiza tu index.js con el siguiente trozo de código:


Interfaz:


Ahora, la dirección de tu monedero de Ethereum se mostrará en tu panel de control después de actualizar la página.


Paso 9 - Visualización del saldo de Ethereum del usuario

En este paso, vamos a crear la función getWalletBalance(). Esta función obtendrá el saldo del usuario y también lo mostrará en el tablero. Utilizaremos el método window.web3.eth.getBalance(ethWalletAddress); para consultar el saldo de la cuenta Ethereum del usuario conectado.


Descomenta la función getWalletBalance(); y aplica el código de abajo en tu archivo index.js.


Desde la función getWalletBalance anterior, estamos comprobando si hay un usuario conectado ya que se requiere una dirección de cartera de Ethereum para obtener el saldo de la cuenta de Ethereum. Entonces, consultamos el saldo del usuario pasando la dirección de la cartera conectada desde nuestra variable global window.userWalletAddress como argumento al método getBalance.


Por último, convertimos el saldo "Wei" devuelto en "ether" y lo mostramos en el tablero.


NOTA: La unidad más pequeña de ether (Eth) es "Wei". El método fromWei es un método de utilidad en web3 que convierte cualquier valor "Wei" en ether.


Tu saldo de Ethereum debería aparecer después de actualizar tu página web, como se muestra a continuación:


Paso 10 - Añadir la función de cierre de sesión de Web3

El último paso de este tutorial es implementar una función de cierre de sesión en nuestra aplicación. ¿Cómo cerramos la sesión de una aplicación web3? No es tan complejo, todo lo que tenemos que hacer es establecer la variable global window.userWalletAddress a null y eliminar el userWalletAddress del localStorage del navegador.


Este proceso es similar al cierre de sesión del token JWT de web2.


Las siguientes líneas de código manejarán la función de cierre de sesión de web3:


Y ya está. Para probar la función de cierre de sesión, haga clic en el botón "Cerrar sesión". Debería ser redirigido a la sección de inicio de sesión como se demuestra a continuación.


¡EXCELENTE!


Has aprendido con éxito cómo añadir un inicio de sesión en Web3.js a tu aplicación. Aquí está nuestra demostración final de la aplicación:


Conclusión

En este tutorial, hemos utilizado la biblioteca Web3.js para crear un sistema de autenticación de inicio de sesión que permite a los usuarios conectarse a su sitio web utilizando su cartera Ethereum. Aprendiste cómo obtener el saldo de la cuenta de Ethereum de un usuario, convertirlo en ether (Eth) y mostrarlo al usuario.


¡Gracias por llegar hasta aquí!


Reactions

7

0

0

0

Access hereTo be able to comment

TheWhiteCode.com is not the creator or owner of the images shown, references are: