Creando un login con Angular y WEB 3

Publicado el 05.02.2022 a las 12:23

Creando un login con Angular y WEB 3

Creando un login con Angular y WEB 3

Aprenderás a crear un login con Angular y WEB 3


Si quieres saber lo que es la WEB3 lo puedes aprender aquí 🧐, es un artículo que escribí hace unas semanas.


Vamos a crear un login usando una wallet descentralizada, y usaremos la red principal de Ethereum.

Para hacer este proyecto no necesitarás gastar dinero, no necesitas tener criptomonedas ni nada por el estilo.


Vamos al turrón 🚀

1. Creando una wallet gratis con MetaMask

No voy a pararme en explicar que es una wallet, ni lo tipos de wallet que hay, asumo que sabes lo que es.

En cualquier caso, si no lo sabes decirte que tal y como lo voy a explicar el ejemplo lo puedes hacer completamente gratis.

  1. Ve al sitio oficial de MetaMask que es https://metamask.io/. MetaMask es un recurso que nos permite crear una wallet gratuitamente y puede usar distintas redes.

    🚨 Presta atención a la URL, hay mucho phising con esto.

  2. Instala MetaMask 🦊 pulsando en el botón de download y haciendo clic aquí.

    Si lo estás haciendo desde un ordenador instalarás MetaMask como un complemento de tu navegador

  3. Una vez instalado, crea una nueva cuenta.

    🚨 Asegúrate de guardar en un lugar seguro las 11 palabras semillas. Si metes criptomonedas en esta wallet y alguien se hace con tu contraseña y tus 11 palabras semillas perderás tus criptomonedas. Sin solución.

    🤓 De todas formas, para hacer este ejemplo no te preocupes por el tema de las criptomonedas, ya que como he dicho no nos hacen falta para este ejemplo.

  4. Una vez que tengas creada la cuenta verás algo como lo siguiente:

    Te marco con una flecha la llave pública de tu wallet, viene a ser como tu número de cuenta del banco. Con esa llave pública te podrán enviar criptomonedas. No pasa nada porque los otros usuarios lo vean. Pero recuerda, 🚩 las palabras semillas sólo las tienes que saber tú y no perderlas.

Enlazando nuestro proyecto de Angular con MetaMask

  1. Ahora creamos un proyecto de Angular 🅰

    ng new miPrimerProyectoWeb3
  2. Instalamos el paquete de dependencia de web3; es una librería que usaremos a modo de API para poder acceder a la red de Ethereum

    npm install web3 --save
  3. En el fichero app.component.ts, en el constructor escribe console.log(window.ethereum)

  4. Dentro de la carpeta del proyecto ejecutamos ng serve -o para que nos abra el proyecto en nuestro localhost

  5. Abrimos las herramientas de depuración y deberíamos ver algo así:

    🤯 tenemos en el objeto global window una nueva propiedad ethereum y con ello podremos realizar la magia.

  6. Seguimos picando código en el constructor del app.component.ts, vamos a realizar una petición a window.ethereum para firmar el objeto window y asignarle permisos. Escribe:

      window.ethereum.request({method: 'eth_requestAccounts'}).then(console.log);
      

    Guardamos cambios y cuando el proyecto de Angular vuelva a cargar nos saldrá una notificación de MetaMask como la siguiente:

    Al aceptar la petición de la notificación obtendremos nuestra llave pública, algo así:

  7. Hasta aquí con tan poquito código hemos podido conectar nuestra aplicación Angular con nuestra wallet de MetaMask 💣

    De esta forma podemos tener nuestro login sin necesidad de administrar en un servidor credenciales ni usar nuestras redes como Google o Facebook para identificarnos.


Seguro que ya estás viendo todo el potencial que tiene esto, sigue explorando 🚀

Hasta luego 😉

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.2.2