Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
En las aplicaciones web modernas, es crucial garantizar la seguridad y la privacidad de los datos. Una forma eficaz de proteger información confidencial, como ID de bases de datos o URL, es utilizarHashidsnode js es una biblioteca de cifrado de JavaScript que transforma datos numéricos en hashes únicos, reversibles y cifrados. Este artículo explora cómo puedes integrar perfectamente Hashids en tu aplicación React para ofuscar y decodificar identificadores.
Hashids es una pequeña pero potente biblioteca que convierte datos numéricos en una cadena hash. El objetivo principal es ocultar los identificadores numéricos para evitar la exposición de información sensible. Esta transformación es reversible, lo que permite recuperar los datos numéricos originales cuando sea necesario. Hashids es una librería JavaScript para generar IDs tipo YouTube a partir de números, codificar datos sensibles o exponer los IDs de tu base de datos al usuario de forma segura o simplemente ofuscar IDs a partir de números.
Para integrar Hashids en tu aplicación React, sigue estos pasos:
En primer lugar, instala Hashids a través de npm en tu proyecto React:
npm install hashids
or
yarn add hashids
En su componente React o archivo de utilidad, inicialice una nueva instancia Hashids con una sal y, opcionalmente, una longitud hash mínima:
import { useState, useEffect } from 'react';
import Hashids from 'hashids';
const MyComponent = () => {
const [hashids, setHashids] = useState(null);
useEffect(() => {
const initHashids = new Hashids('your_salt_here', 8); // Replace 'your_salt_here' with your actual salt or configure custom alphabet
setHashids(initHashids);
}, []);
// Other component logic here
return (
<div>
{/* Your JSX content */}
</div>
);
};
export default MyComponent;
Sustituya "su sal de aquí" por una cadena única(sal) que se utiliza para personalizar la salida hash.
Una vez inicializado, puede utilizar Hashids para codificar y descodificar datos numéricos. Por ejemplo, la codificación del ID de una base de datos:
const encodedId = hashids.encode(12345); // Example: 'B0zGbvA9' non sequential ids
Y decodificarlo de nuevo al ID original:
const decodedIds = hashids.decode('B0zGbvA9'); // Example: [12345]
Integra Hashids en tus componentes React cuando sea necesario. Por ejemplo, pasar identificadores hash como props:
const MyComponent = ({ id }) => {
const encodedId = hashids ? hashids.encode(id) : '';
return (
<div>
<p>Encoded ID: {encodedId}</p>
{/* Other JSX content */}
</div>
);
};
IronPDF for Node.js es una potente biblioteca PDF Node.js de Iron Software que permite a los desarrolladores generar y editar archivos PDF en sus proyectos .NET. Tanto si necesita crear archivos PDF a partir de HTML, manipular archivos PDF existentes o convertir páginas web a formato PDF, IronPDF tiene todo lo que necesita.
Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.
Genere archivos PDF directamente a partir de URL, lo que le permitirá capturar el contenido de páginas web y guardarlo como archivos PDF mediante programación.
Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funciones como añadir páginas, dividir documentos, etc.
Proteja sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.
Produzca documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.
IronPDFes compatible con varias plataformas, incluidas Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.
Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de funciones de generación de PDF a sus proyectos.
Para instalar elIronPDF Paquete NPM, utilice el siguiente comando:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
Instalar dependencias: Primero, crea un nuevo proyecto Next.js(si aún no lo ha hecho) utilizando el siguiente comando: Consulteaquí
npx create-next-app@latest hashids-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
A continuación, vaya al directorio de su proyecto:
cd hashids-pdf
Instale los paquetes necesarios:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add hashids
Ahora, vamos a crear un ejemplo sencillo de cómo generar un PDF usando IronPDF. En tu componente de Next.js(por ejemplo, páginas/index.tsx)añade el siguiente código:
API de generación de PDF: El primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF sólo se ejecuta en el servidor, necesitamos crear una API a la que llamar cuando un usuario quiera generar un PDF. Crea un archivo en la ruta pages/api/pdf.js y añade el siguiente contenido.
IronPDF requiere una clave de licencia, que puede obtener en la páginapágina de licencia y colócalo en el siguiente código.
// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
try {
const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
const f = req.query.f;
const l = initHashids.encode(f);
let content = "<h1>Demo Hashids and Generate PDF Using IronPDF</h1>"
content+="<p>Input:"+f+"</p>";
content+="<p>HashID:"+l+"</p>";
const pdf = await PdfDocument.fromHtml(content);
const data = await pdf.saveAsBuffer();
console.error("data PDF:", data);
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf",
);
res.send(data);
} catch (error) {
console.error("Error generating PDF:", error);
res.status(500).end();
}
}
Ahora modifique el código index.js como se indica a continuación para utilizar el hashID y IronPDF
import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import Hashids from 'hashids';
export default function Home() {
const [text, setText] = useState("");
const [etext, seteText] = useState("");
const [hashids, setHashids] = useState(null);
useEffect(() => {
const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
setHashids(initHashids);
}, []);
const generatePdf = async () => {
try {
const response = await fetch("/api/pdf-hash?f=" + text);
const blob = await response.blob();
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "awesomeIron.pdf");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
seteText(hashids.encode(event.target.value));
setText(event.target.value);
};
return (
<div className={styles.container}>
<Head>
<title>Generate PDF Using IronPDF</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Demo Hashids and Generate PDF Using IronPDF</h1>
<p>
<span>Enter Url To get Hashids and Convert to PDF:</span>{" "}
</p>
<p>
HashID of input: {etext}
</p>
<button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
Generate PDF
</button>
</main>
<style jsx>{`
main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
margin-left: 0.5rem;
}
footer a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
}
code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
);
}
Toma de números de entrada del usuario a través del cuadro de texto de entrada.
Codificar el número de entrada utilizando HashID y mostrarlo.
Coloque aquí la clave de licencia:
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
Integrar Hashids en tu aplicación React es un enfoque práctico para salvaguardar datos confidenciales como ID de bases de datos o URL. El uso de Hashids garantiza la seguridad de los identificadores y permite recuperar los datos originales cuando sea necesario.
Tanto si estás construyendo una pequeña aplicación como un complejo sistema empresarial, Hashids ofrece una solución fiable para mejorar la privacidad y la seguridad de los datos en tus proyectos React y destaca en la codificación de números incrementados en hashes únicos. Hashids garantiza que incluso los patrones repetitivos en los números de entrada den como resultado hashes distintos y no repetitivos, manteniendo la integridad de los datos y la seguridad en las aplicaciones.
IronPDF destaca como una biblioteca robusta y versátil para los desarrolladores de node.js que buscan capacidades completas de generación, manipulación y gestión de PDF dentro de sus aplicaciones. Tanto si está creando aplicaciones web, software de escritorio o integrando la funcionalidad PDF en soluciones empresariales.
10 productos API de .NET para sus documentos de oficina