crypto esta desactualizada, tendran que usar https://www.npmjs.com/package/crypto-js
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
You don't have access to this class
Keep learning! Join and start boosting your career
In this video we learn how to save our username and password to be able to log in with cloud app.
Inside our form we have 2 text fields, one for password and one for email inside this preferences-frontend.js file we have to import the electron settings so that in case the information is valid we can store the information provided.
Finally we have to make sure to validate the information of the form, encrypt the data provided by the user so that they travel securely and with that finish the user and password entry form.
To perform the encryption we must import Node's "crypto" module and use the instruction
const cipher = crypto.createCipher('aes192', 'Platzi')
And we create the variable where we will store the encrypted content:
let encrypted = cipher.update()
Contributions 9
Questions 1
crypto esta desactualizada, tendran que usar https://www.npmjs.com/package/crypto-js
o pueden crear un archivo de utilerias con esto que encontre…
he implementarlo asi en el archivo de preferencias…
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>
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();
});
}
Que diferencia hay entre usar document.getElementById(’…’).innerHTML vs document.getElementById(’…’).value ??
En uno de los videos anteriores, para editar el footer, uso innerHTML.
//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
}
Encriptación
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
Want to see more contributions, questions and answers from the community?