- Aniol Carbó
Inicio de sesión en Web3 Ethereum con las API de Vottun
Web3 Ethereum Sign-In permite a los usuarios iniciar sesión en un sitio web utilizando su billetera Ethereum. Esto es posible mediante el uso de firmas digitales en la cadena de bloques Ethereum. En este tutorial, le mostraremos cómo implementar un inicio de sesión Web3 Ethereum en un sitio web basado en el estándar ERC-4361.
Para este tutorial, usaremos la billetera Metamask y la API Vottun Web3.
Requisitos previos
Antes de comenzar a desarrollar, es necesario tener lo siguiente:
- Cartera Ethereum (por ejemplo, Metamask )
- Biblioteca “ Éteres ”
- Credenciales API de Vottun
Los pasos necesarios para lograr la implementación del Web3 Login son:
- Implemente un botón «Conectar billetera» para conectar una billetera Metamask .
- Una vez que el usuario conecta la billetera, realice una llamada API a la API Vottun Web3 para obtener el mensaje de inicio de sesión.
- Active la ventana «Firmar» en Metamask para que el usuario firme el mensaje con su billetera.
- Una vez que el usuario haya firmado el mensaje, recupere la firma y realice una llamada API a la API Vottun Web3 para verificar la validez de la firma.
Como obtener mis credenciales
Obtener credenciales es muy fácil. Tienes la opción de obtener una prueba de 30 días en la URL. https://apis.vottun.tech/trial . Complete el formulario y recibirá un correo electrónico como el siguiente con sus credenciales listas para usar.
Además de las credenciales, también recibirás la clave pública de una billetera que podrás utilizar en tus pruebas (por razones de seguridad, la clave privada siempre se guarda en nuestros servidores).
Este correo electrónico le proporcionará el token JWT (utilizado como autenticación de portador) y el ID de la aplicación, que se pasa en otro encabezado. La explicación detallada de esta configuración se explica con más detalle.
Encontrará más información sobre las API en https://developers.vottun.tech .
Profundicemos en la implementación de cada paso:
Paso 1: implementar un botón "Conectar billetera"
El primer paso es implementar un botón «Conectar billetera» que permitirá a los usuarios conectar su billetera Metamask a su sitio web. Como Metamask es una extensión del navegador, la interacción con sus métodos se realiza a través del objeto ` window.ethereum` . Si está utilizando un marco javascript /typescript, aquí está el fragmento del método «Connect Wallet»:
Paso 2: Obtenga el mensaje de inicio de sesión
El estándar ERC-4361 define un mensaje de texto plano estructurado que está firmado por la billetera del usuario, el cual genera una firma que se puede validar para saber si el usuario realmente es propietario de la billetera conectada. Como se proporciona en el sitio web oficial de Ethereum, aquí hay un ejemplo de este mensaje:
vottun.tech quiere que inicies sesión con tu cuenta Ethereum:
0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2
Acepto los Términos de servicio de Vottun : https://vottun.tech/tos
URI: https://vottun.tech/login
Versión: 1
ID de cadena: 1
Nonce: 32891756
Emitido en: 2021-09-30T16:25:24Z
Recursos:
- ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/
- https://ejemplo.com/my-web2-claim.json
Para obtener este mensaje, la API de Vottun proporciona una llamada POST que lo genera con el formato correcto. Este llamar espera dos encabezados:
- Un encabezado de autenticación, que debe contener el token de portador.
- Un encabezado “x-application- vk ”, que debe contener el ID de la aplicación.
Estos dos valores se obtienen en https://apis.vottun.tech/trial , siguiendo los pasos descritos al principio. Esta convocatoria también espera un cuerpo con los siguientes atributos:
Estos son los campos obligatorios requeridos por el ERC-4361, y su significado se puede encontrar en la documentación oficial ( https://eips.ethereum.org/EIPS/eip-4361 ). El fragmento de CURL de esta llamada API es:
Este punto final devuelve un JSON con dos atributos:
- Nonce: un identificador de este mensaje, para validarlo posteriormente
- Mensaje: el mensaje de texto plano estructurado que se firmará
Paso 3: firma el mensaje
Después de recibir el mensaje, la billetera debe mostrar una «solicitud de firma» para que el usuario firme el mensaje. Esto se puede lograr a través de la biblioteca “Ethers”, utilizando el objeto “proveedor” que almacenamos al conectar la billetera. Si está utilizando un marco javascript /typescript, aquí está el fragmento del método «Firmar mensaje»:
Este método activará la ventana «Solicitud de firma» de la billetera instalada. Una vez que el usuario acepta la firma, este método devolverá el hash que representa la firma realizada.
Paso 4: verificar la firma
El último paso es verificar que la firma realizada sea válida, lo que significa que el usuario realmente posee la dirección de billetera proporcionada. La API de Vottun proporciona una llamada GET que realiza esta verificación:
Los únicos dos parámetros (pasados como parámetros de consulta) necesarios para esta verificación son:
- Nonce: El cual fue proporcionado por la propia API en la generación del mensaje, utilizado como identificador
- Firma: Que es el hash de firma que devuelve el método ` signMessage ()`.
El resultado de esta llamada API es un código de estado 200 OK si la firma es válida o un 403 Código de estado prohibido si la firma no es válida.
Conclusiones
En conclusión, implementar un inicio de sesión Web3 Ethereum en un sitio web basado en el estándar ERC-4361 puede mejorar la experiencia del usuario al permitirles iniciar sesión en el sitio web utilizando su billetera Ethereum. Este tutorial ha mostrado a los desarrolladores cómo implementar un inicio de sesión Web3 Ethereum utilizando la billetera Metamask y la API Vottun Web3. Siguiendo los pasos descritos en este tutorial, los desarrolladores pueden permitir que su sitio web autentique a los usuarios utilizando firmas digitales de Ethereum, que son seguras y transparentes. Esto también permite a los desarrolladores crear aplicaciones descentralizadas que aprovechan todo el potencial de la cadena de bloques Ethereum sin la necesidad de un proveedor de autenticación externo.