Hashids NPM (Cómo funciona para desarrolladores)

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.

¿Qué es Hashids?

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.

Integración de Hashids en su aplicación React

Para integrar Hashids en tu aplicación React, sigue estos pasos:

Paso 1: Instalar Hashids npm

En primer lugar, instala Hashids a través de npm en tu proyecto React:

npm install hashids
or 
yarn add hashids

npm install hashids
or 
yarn add hashids

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install hashids @or yarn add hashids

Paso 2: Inicializar la instancia de 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;

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;

import
If True Then
	useState, useEffect
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; import Hashids from 'hashids'; const MyComponent = () => { const [hashids, setHashids] = useState(Nothing); useEffect(() => { const initHashids = New Hashids('your_salt_here', 8); setHashids(initHashids); }, []); Return(<div> {} </div>); }; export default MyComponent;

Sustituya "su sal de aquí" por una cadena única(sal) que se utiliza para personalizar la salida hash.

Paso 3: Codificar y descodificar datos

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

const encodedId = hashids.encode(12345); // Example: 'B0zGbvA9' non sequential ids

const encodedId = hashids.encode(12345) ' Example: 'B0zGbvA9' non sequential ids

Y decodificarlo de nuevo al ID original:

const decodedIds = hashids.decode('B0zGbvA9'); // Example: [12345]

const decodedIds = hashids.decode('B0zGbvA9'); // Example: [12345]

const decodedIds = hashids.decode( 'B0zGbvA9'); ' Example: [12345]

Paso 4: Utilizar hashids en componentes

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>
  );
};

const MyComponent = ({ id }) => {
  const encodedId = hashids ? hashids.encode(id) : '';
  return (
    <div>
      <p>Encoded ID: {encodedId}</p>
      {/* Other JSX content */}
    </div>
  );
};

'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
const MyComponent = ({ id }) =>
If True Then
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'  const encodedId = hashids ? hashids.encode(id) : ''; Return(<div> <p> Encoded ID: {encodedId}</p> {} </div>); };

Ventajas del uso de Hashids en React

• Seguridad: Hashids oculta los identificadores numéricos, mejorando la privacidad de los datos y la herramienta de seguridad que impide la asignación directa a información sensible.
• Facilidad de integración: La sencilla instalación de npm y la API directa hacen que Hashids sea fácil de implementar en aplicaciones React.
• Flexibilidad: La longitud del hash y la sal personalizables proporcionan flexibilidad para adaptar los hashes a las necesidades de seguridad de su aplicación.

Presentación de IronPDF

IronPDF 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.

Características principales

Conversión de HTML a PDF

Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

Conversión de URL a PDF

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.

Manipulación de PDF

Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funciones como añadir páginas, dividir documentos, etc.

Seguridad PDF

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.

Salida de alta calidad

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.

Compatibilidad multiplataforma

IronPDFes compatible con varias plataformas, incluidas Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.

Integración sencilla

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.

Instalación

Para instalar elIronPDF Paquete NPM, utilice el siguiente comando:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

IRON VB CONVERTER ERROR developers@ironsoftware.com

Generar documentos PDF con IronPDF y utilizar el paquete NPM HashIDs

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"

npx create-next-app@latest hashids-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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

cd hashids-pdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd hashids-pdf

Instale los paquetes necesarios:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add hashids

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add hashids

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64 yarn add hashids

Crear un PDF

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();
  }
}

// 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();
  }
}

' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'export default async @function handler(req, res)
'{
'  try
'  {
'	const initHashids = New Hashids('IronPDF @Is Awesome @and Me 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>
  );
}

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>
  );
}

Private Head As import
Private styles As import
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useState, useEffect
End If
from "react"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import Hashids from 'hashids'; export default @function Home() { const [text, setText] = useState(""); const [etext, seteText] = useState(""); const [hashids, setHashids] = useState(Nothing); useEffect(() => { const initHashids = New Hashids('IronPDF @Is Awesome @and Me 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>); }

Código Explicación

1. Toma de números de entrada del usuario a través del cuadro de texto de entrada.

2. Codificar el número de entrada utilizando HashID y mostrarlo.

3. Cuando el usuario hace clic en Generar PDF, el texto introducido se envía a una API de backend, que codifica y genera un documento PDF.

Salida

PDF

Licencia IronPDF

IronPDF.

Coloque aquí la clave de licencia:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

IRON VB CONVERTER ERROR developers@ironsoftware.com

Conclusión

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.