Hashids NPM (Comment ça marche pour les développeurs)

Dans les applications web modernes, il est essentiel de garantir la sécurité et la confidentialité des données. Un moyen efficace de protéger les informations sensibles telles que les identifiants de base de données ou les URL est d'utiliser la technologieHashidsnodextre, une bibliothèque de cryptage JavaScript qui transforme les données numériques en hachages uniques, réversibles et cryptés. Cet article explore comment vous pouvez intégrer de manière transparente Hashids dans votre application React pour obscurcir et décoder les identifiants.

Qu'est-ce que Hashids ?

Hashids est une bibliothèque petite mais puissante qui convertit les données numériques en chaîne de hachage. L'objectif principal est de masquer les identifiants numériques afin d'éviter l'exposition d'informations sensibles. Cette transformation est réversible, ce qui permet de récupérer les données numériques d'origine en cas de besoin. Hashids est une bibliothèque JavaScript qui permet de générer des identifiants YouTube à partir de nombres, d'encoder des données sensibles ou d'exposer les identifiants de votre base de données à l'utilisateur en toute sécurité, ou simplement d'obscurcir les identifiants à partir de nombres.

Intégrer Hashids dans votre application React

Pour intégrer Hashids dans votre application React, suivez les étapes suivantes :

Étape 1 : Installer Hashids npm

Tout d'abord, installez Hashids via npm dans votre projet React :

npm install hashids
or 
yarn add hashids

Étape 2 : Initialisation de l'instance Hashids

Dans votre composant React ou votre fichier utilitaire, initialisez une nouvelle instance Hashids avec un sel et, éventuellement, une longueur de hachage minimale :

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;

Remplacer \N "your_salt\Nhere"\Npar une chaîne de caractères unique(sel) que vous utilisez pour personnaliser la sortie du hachage.

Étape 3 : Encodage et décodage des données

Une fois initialisés, vous pouvez utiliser les Hashids pour encoder et décoder des données numériques. Par exemple, l'encodage d'un identifiant de base de données :

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

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

Et la décoder en fonction de l'identifiant d'origine :

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

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

Étape 4 : Utiliser les hashids dans les composants

Intégrez les Hashids dans vos composants React lorsque cela est nécessaire. Par exemple, passer des ID hachés en tant que 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>
  );
};

Avantages de l'utilisation des Hashids dans React

• Sécurité : Hashids masque les identifiants numériques, améliorant ainsi la confidentialité et la sécurité des données et empêchant la mise en correspondance directe avec des informations sensibles.
• Facilité d'intégration : L'installation simple de npm et l'API directe rendent Hashids facile à mettre en œuvre dans les applications React.
• Flexibilité : La longueur du hachage et le sel sont personnalisables, ce qui permet d'adapter les hachages aux besoins de sécurité de votre application.

Présentation d'IronPDF

IronPDF for Node.js est une puissante bibliothèque PDF Node.js d'Iron Software qui permet aux développeurs de générer et d'éditer des PDF dans leurs projets .NET. Que vous ayez besoin de créer des PDF à partir de HTML, de manipuler des PDF existants ou de convertir des pages web au format PDF, IronPDF a tout prévu.

Caractéristiques principales

Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

Conversion d'URL en PDF

Générez des PDF directement à partir d'URL, ce qui vous permet de capturer le contenu de pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.

Manipulation des PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF offre des fonctionnalités telles que l'ajout de pages, la division de documents, etc.

Sécurité PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre les accès non autorisés.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDFest compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Installation

Pour installer leIronPDF Pour créer un paquet NPM, utilisez la commande suivante :

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

Générer des documents PDF à l'aide d'IronPDF et utiliser le paquetage NPM HashIDs

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait) à l'aide de la commande suivante : Référerici

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

Ensuite, accédez au répertoire de votre projet :

cd hashids-pdf

Installez les paquets nécessaires :

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

Créer un PDF

Maintenant, créons un exemple simple de génération d'un PDF en utilisant IronPDF. Dans votre composant Next.js(par exemple, pages/index.tsx)ajoutez le code suivant :

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Étant donné qu'IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous.

IronPDF nécessite une clé de licence, vous pouvez l'obtenir à partir de la pagepage de licence et le placer dans le code ci-dessous.

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

Modifiez maintenant le code index.js comme ci-dessous pour utiliser le hashID et 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>
  );
}

Explication du code

1. Prise en compte des chiffres saisis par l'utilisateur dans la zone de texte de saisie.

2. Encodez le nombre saisi à l'aide de HashID et affichez-le.

3. Lorsque l'utilisateur clique sur Générer un PDF, le texte saisi est envoyé à une API dorsale, qui encode et génère un document PDF.

Sortie

PDF (EN ANGLAIS)

Licence d'IronPDF

IronPDF.

Placez la clé de licence ici :

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";

Conclusion

L'intégration de Hashids dans votre application React est une approche pratique pour protéger les données sensibles telles que les identifiants de base de données ou les URL. En utilisant les Hashids, vous pouvez vous assurer que les identifiants restent sécurisés tout en conservant la possibilité de récupérer les données originales en cas de besoin.

Que vous construisiez une petite application ou un système d'entreprise complexe, Hashids offre une solution fiable pour améliorer la confidentialité et la sécurité des données dans vos projets React et excelle dans l'encodage de nombres incrémentés en hachages uniques. Hashids garantit que même les motifs répétitifs des nombres saisis donnent lieu à des hachages distincts et non répétitifs, préservant ainsi l'intégrité et la sécurité des données dans les applications.

IronPDF la bibliothèque PDF se distingue par sa robustesse et sa polyvalence pour les développeurs node.js à la recherche de fonctionnalités complètes de génération, de manipulation et de gestion de PDF au sein de leurs applications. Que vous créiez des applications web, des logiciels de bureau ou que vous intégriez des fonctionnalités PDF dans des solutions d'entreprise.