AIDE SUR LES NœUDS

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

Publié octobre 24, 2024

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;

JAVASCRIPT

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

JAVASCRIPT

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]

JAVASCRIPT

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

JAVASCRIPT

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.

Hashids NPM(Comment ça marche pour les développeurs) : Figure 1 - IronPDF for Node.js : The Node.js PDF Library (en anglais)

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

JAVASCRIPT

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

JAVASCRIPT

Explication du code

Prise en compte des chiffres saisis par l'utilisateur dans la zone de texte de saisie.
Encodez le nombre saisi à l'aide de HashID et affichez-le.
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

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

PDF (EN ANGLAIS)

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

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

JAVASCRIPT

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.

Jordi Bardia

Ingénieur logiciel

LinkedIn | Website

Jordi maîtrise parfaitement Python, C# et C++. Lorsqu'il ne met pas à profit ses compétences chez Iron Software, il se consacre à la programmation de jeux. Partageant des responsabilités en matière de tests de produits, de développement de produits et de recherche, Jordi apporte une valeur ajoutée considérable à l'amélioration continue des produits. Cette expérience variée le stimule et l'engage, et il dit que c'est l'un des aspects qu'il préfère dans son travail chez Iron Software. Jordi a grandi à Miami, en Floride, et a étudié l'informatique et les statistiques à l'université de Floride.

< PRÉCÉDENT
JsdomNPM (Comment ça marche pour les développeurs)

SUIVANT >
memcached npm (Comment ça marche pour les développeurs)