Usuario y contraseña

Clase 32 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

En este video aprendemos a guardar nuestro usuario y password para poder iniciar sesión con cloud app.

Dentro de nuestro formulario tenemos 2 campos de texto, uno de password y otro de email dentro de este archivo de preferences-frontend.js tenemos que importar los settings de electron para que en caso de que la información sea válida podamos almacenar la información proporcionada.

Por último tenemos que asegurarnos de validar la información del formulario, encriptar los datos proporcionados por el usuario para que viajen de forma segura y con eso terminar el formulario de ingreso de usuario y contraseña.

Para llevar a cabo la encriptación debemos importar el módulo “crypto” de Node y utilizamos la instrucción

const cipher = crypto.createCipher(´aes192´, ´Platzi´)
Y creamos la variable en donde guardaremos el contenido cifrado:

let encrypted = cipher.update()

Gino Lorenzini Barrios

student•

crypto esta desactualizada, tendran que usar https://www.npmjs.com/package/crypto-js

Miguel Ángel Guerrero Medina

student•

Con crypto-js lo hice de la siguiente manera

Encriptar

const encrypted = CryptoJS.AES.encrypt(
          	  document.getElementById(
							"cloudup-passwd").value,
            	"Platzipics"
        		).toString();

Desencriptar

const decipher = CryptoJS.AES.decrypt(
            settings.getSync("cloudup.passwd"),
            "Platzipics"
        );
let decrypted = decipher.toString(CryptoJS.enc.Utf8);
document.getElementById("cloudup-passwd").value = decrypted;

Alonso Alejandro Zúñiga Beltrán

student•

Una forma mas fácil de guardar los datos de cloudup es:

settings.set('cloudup', {
    user: document.getElementById('cloudup-user').value,
    passwd: document.getElementById('cloudup-passwd').value
})

Usuario anónimo

user•

o pueden crear un archivo de utilerias con esto que encontre..

he implementarlo asi en el archivo de preferencias..

Erick Navarro

student•

En 2020, para setear los datos:

// Obtiene usuario y contraseña
const credential = {
  user: document.getElementById('cloudup-user').value,
  password: document.getElementById('cloudup-password').value,
};

// Asigna a settings
settings.set('cloudup', credential);

Para obtener los datos hay que hacerlo en una función asincrona.

async function initForm() {
  if (settings.has('cloudup')) {
    // Obtiene credencial
    const credential = await settings.get('cloudup');

    // Asigna credenciales en formulario
    document.getElementById('cloudup-user').value = credential.user;
    document.getElementById('cloudup-password').value = credential.password;
  }
}

<code>

Octavio Villavicencio Cruz

student•

en 2022 uso de 'electron-store' para remplazar 'electron-settings'

Derek Samuel Paúl Peña

student•

Si no quieren colocar document.getElement... para seleccionar el valor de los inputs de CloudUp pueden usar el API nativa de FormData de esta forma:

Colocar el atributo name a sus inputs.
Traer los datos de la instancia de FormData así:

const $form = document.getElementById("form");

  $form.addEventListener("submit", function (event) {
    event.preventDefault();
    const formData = new FormData(this),
     { user, password } = {
      user: formData.get("email"),
      password: formData.get("password"),
    };

      localStorage.setItem("cloudUpInformation", JSON.stringify({ user,
        password }));

    showDialog({
      type: "info",
      message: "Guardado con éxito",
      title: "Pics",
    });
    closeWindow();
  });
}

Damian Spizzirri

student•

Que diferencia hay entre usar document.getElementById(’…’).innerHTML vs document.getElementById(’…’).value ??

En uno de los videos anteriores, para editar el footer, uso innerHTML.

Esdras Benjamín Pavón

student•

El value suele usarse normalmente para elementos input de formularios. Y innerHTML se usa para div, span y elementos similares.

Andrus Diaz

student•

El value normalmente se utiliza para valores de algún tipo de input. Y innerHTML para obtener o inyectar directamente HTML en el elemento seleccionado

GUIFOR PAUL PLAZA AGUIRRE

student•

//guardar en settings const encypted = crypto.AES.encrypt(document.getElementById('cloudup-passwd').value, 'Pruebas').toString() await settings.set('cloudup', { user: document.getElementById('cloudup-user').value, passwd: encypted })

//recuperar await settings.has('cloudup.user') && (document.getElementById('cloudup-user').value = await settings.get('cloudup.user'))

if (await settings.has('cloudup.passwd')) { const bytes = crypto.AES.decrypt(await settings.get('cloudup.passwd'), 'Pruebas') const decypted = bytes.toString(crypto.enc.Utf8) document.getElementById('cloudup-passwd').value = decypted }

Andrés Felipe Martínez Salazar

student•

Si el archivo de settings se corrompe ya sea por un error o porque fue modificado a mano, ¿no seria mejor meter el código de desencriptar dentro de un try…catch?

¿no seria mejor usar el evento submit del formulario en lugar del evento click en el botón de guardar ya que de todas formas los inputs tienen required?

Hice algunas modificaciones al archivo para tener en cuenta los casos que mencione antes

import { remote, ipcRenderer } from 'electron'
import settings from 'electron-settings'
import crypto from 'crypto'

window.addEventListener('load', () => {
  addEvent('click', 'cancel-button', closeEvent)
  addEvent('submit', 'preferences-form', saveEvent)

  if (settings.has('cloudup.user')) {
    document.getElementById('cloudup-user').value = settings.get('cloudup.user')
  }
  if (settings.has('cloudup.passwd')) {
    try {
      const decipher = crypto.createDecipher('aes192', 'Platzipics')
      let decrypted = decipher.update(settings.get('cloudup.passwd'), 'hex', 'utf8')
      decrypted += decipher.final('utf8')
      document.getElementById('cloudup-passwd').value = decrypted
    } catch (error) {
      ipcRenderer.send('show-dialog', {type: 'error', title: 'Platzipics', message: 'Error al recuperar la contraseña'})
    }
  }
})

const saveEvent = (e) => {
  e.preventDefault()
  const prefsForm = document.getElementById('preferences-form')
  if (prefsForm.reportValidity()) {
    const cipher = crypto.createCipher('aes192', 'Platzipics')
    let encrypted = cipher.update(document.getElementById('cloudup-passwd').value)
    encrypted += cipher.final('hex')
    settings.set('cloudup', {
      user: document.getElementById('cloudup-user').value,
      passwd: encrypted
    })
    closeEvent()
  }
}

const closeEvent = (e) => {
  if (e) { e.preventDefault() }
  remote.getCurrentWindow().close()
}

const addEvent = (event, id, func) => {
  document.getElementById(id).addEventListener(event, func)
}

Cristian Iñiguez

student•

Encriptación

Johan Suarez Largo

student•

como crypto.createCipher y crypto.createDecipher estan depricated. lo hice asi:

import { remote, ipcRenderer } from 'electron'
import settings from 'electron-settings'
import crypto from 'crypto'

const password = 'Platzipics'
const key = crypto.scryptSync(password, 'salt', 24)

window.addEventListener('load', () => {
  cancelButton()
  saveButton()

  if (settings.has('cloudup.user')) {
    document.getElementById('cloudup-user').value = settings.get('cloudup.user')

  }
  if (settings.has('cloudup.passwd')) {
    const iv = Buffer.alloc(16, 0);
    const decipher = crypto.createDecipheriv('aes-192-cbc', key, iv)
    let decrypted = decipher.update(settings.get('cloudup.passwd'), 'hex', 'utf8')
    decrypted += decipher.final('utf8')
    document.getElementById('cloudup-passwd').value = decrypted
  }
})

function cancelButton() {
  const cancelButton = document.getElementById('cancel-button')

  cancelButton.addEventListener('click', () => {
    const prefsWindow = remote.getCurrentWindow()
    prefsWindow.close()
  })
}

function saveButton() {
  const saveButton = document.getElementById('save-button')
  const prefsForm = document.getElementById('preferences-form')

  saveButton.addEventListener('click', () => {
    if (prefsForm.reportValidity()) {
      console.log(document.getElementById('cloudup-passwd').value)
      const iv = Buffer.alloc(16, 0);
      const cipher = crypto.createCipheriv('aes-192-cbc', key, iv)
      let encrypted = cipher.update(document.getElementById('cloudup-passwd').value)
      encrypted += cipher.final('hex')

      settings.set('cloudup.user', document.getElementById('cloudup-user').value)
      settings.set('cloudup.passwd', encrypted)
      const prefsWindow = remote.getCurrentWindow()
      prefsWindow.close()
    } else {
      ipcRenderer.send('show-dialog', {
        type: 'error',
        title: 'Platzi Picts',
        message: 'Please fill all form.'
      })
    }
  })
}

ps : el codígo lo tome de este link

Usuario y contraseña

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros