API de MetaMask: cree una aplicación web Registro de usuario e inicio de sesión
Este artículo explica brevemente cómo permitir que los nuevos usuarios se registren para obtener una cuenta en su aplicación web utilizando la API de Metamask.
La billetera de criptomonedas es el principal punto de contacto que conecta a clientes potenciales y clientes en la aplicación Web3. Además, es un enfoque de moda para atraer nuevos registros y generar más ventas.
En este artículo, explicaré brevemente cómo permitir que nuevos usuarios se registren para obtener una cuenta en su aplicación web utilizando la API de Metamask. Al final de este artículo, sus visitantes pueden registrarse usando la billetera MetaMask y usted puede identificar a los usuarios usando la clave pública de la billetera.
Tabla de contenido: Registro de nuevo usuario en la aplicación web, inicio de sesión mediante Metamask API, Javascript
- Código Javascript MetaMask en Frontend
- Código de ruta del matraz en el backend para almacenar la clave pública
- Script completo de Javascript y Python del sistema de registro e inicio de sesión de usuarios
Código Javascript MetaMask en Frontend
Lo primero es lo primero, requiere que los desarrolladores agreguen el script detector de proveedores de Ethereum entre el encabezado
< script src = "https://cdn.jsdelivr.net/npm/@metamask/detect-provider" ></ script >
Luego, necesitamos escribir un Javascript para activar la solicitud de acceso a la cuenta Metamask cuando el usuario hace clic en el botón de registro o inicio de sesión.
< section >
< form action = "/login" method = "GET" onsubmit = " return false ;" >
< button id = "connect-button" type = "button" > Connect with MetaMask </ button >
</ form >
</ section >
< script >
const connectButton = document . querySelector ( '#connect-button' );
En este caso, hay dos escenarios. La extensión MetaMask se ha instalado o no en el navegador. Por lo tanto, necesitamos agregar una condición if en este evento de clic.
connectButton . addEventListener ( 'click' , async () => {
// Check if MetaMask is installed
if ( typeof window . ethereum === 'undefined' ) {
alert ( 'Please install MetaMask to continue.' );
Return ;
}
El siguiente paso requiere que llamemos a MetaMask y obtengamos la dirección de la cuenta para crear una nueva ID de usuario en una base de datos o identificar a quién cuando el usuario inicia sesión.
const accounts = await window . ethereum . request ({ method: 'eth_requestAccounts' });
const metamaskAddress = accounts [ 0 ];
Por último, pero no menos importante, enviaremos la clave pública de la cuenta a la base de datos de la aplicación web. Como MetaMask usa el parámetro args.get. Así que aquí está el ejemplo de código de la siguiente manera:
window . location . href = '/login?metamask_address=' + metamaskAddress ;
} catch ( error ) {
console . error ( error );
Código de ruta del matraz en el backend para almacenar la clave pública
Una vez que el usuario confirma conectarse con su aplicación web, la clave pública de su billetera responderá al servidor de su aplicación. Aquí está el ejemplo de código para capturar la clave para la autenticación del usuario de ahora en adelante.
@ app .route ( '/login' , methods =[ 'GET' , 'POST' ])
def login ():
metamask_address = request . args . get ( 'metamask_address' )
return render_template ( 'masklogin.html' , metamask_address = metamask_address )
Con respecto a la configuración de la base de datos de nuevos usuarios, aquí hay dos artículos en los que uno explica el uso de SQL y el otro explica MongoDB. Para obtener más detalles, consulte.
https://www.easy2digital.com/automation/data/python-tutorial-66-flask-application-database-using-mongodb-atlas-and-python-to-better-big-data-management/
Script completo de Javascript y Python del sistema de registro e inicio de sesión de usuarios
Si está interesado en el tutorial 9 de Web3.0: API de MetaMask: creación de un registro e inicio de sesión de usuario de la aplicación webAPI de MetaMask: creación de un registro e inicio de sesión de usuario de la aplicación web, suscríbase a nuestro boletín agregando el mensaje "Web3.0 tutorial 9" . Le enviaremos el script inmediatamente a su buzón de correo.
Espero que disfrute leyendo el tutorial 8 de Web3.0: Creación de métodos de pago de criptomonedas utilizando Infura, Metamask y Web3. Si lo hizo, apóyenos haciendo una de las cosas que se enumeran a continuación, porque siempre ayuda a nuestro canal.
- Apoye y done a mi canal a través de PayPal ( paypal.me/Easy2digital )
- Suscríbete a mi canal y activa la campana de notificaciones del canal de Youtube Easy2Digital .
- Sigue y dale me gusta a mi página Página de Facebook de Easy2Digital
- Comparte el artículo en tu red social con el hashtag #easy2digital
- Te registras en nuestro boletín semanal para recibir los últimos artículos, vídeos y códigos de descuento de Easy2Digital.
- Suscríbase a nuestra membresía mensual a través de Patreon para disfrutar de beneficios exclusivos ( www.patreon.com/louisludigital )
