HILFE ZUM KNOTENPUNKT

Hashids NPM (Wie es für Entwickler funktioniert)

Veröffentlicht 24. Oktober 2024

Teilen Sie:

Bei modernen Webanwendungen ist die Gewährleistung von Datensicherheit und Datenschutz von entscheidender Bedeutung. Eine effektive Möglichkeit, sensible Informationen wie Datenbank-IDs oder URLs zu schützen, ist die Verwendung vonHashidsdie Software ist eine JavaScript-Verschlüsselungsbibliothek, die numerische Daten in eindeutige, umkehrbare und verschlüsselte Hashes umwandelt. Dieser Artikel zeigt, wie Sie Hashids nahtlos in Ihre React-Anwendung integrieren können, um Bezeichner zu verschleiern und zu entschlüsseln.

Was ist Hashids?

Hashids ist eine kleine, aber leistungsstarke Bibliothek, die numerische Daten in eine Hash-Zeichenkette umwandelt. Das primäre Ziel ist es, numerische Identifikatoren zu verschleiern, um die Preisgabe sensibler Informationen zu verhindern. Diese Umwandlung ist umkehrbar, sodass die ursprünglichen numerischen Daten bei Bedarf wiederhergestellt werden können. Hashids ist eine JavaScript-Bibliothek zur Erzeugung von YouTube-ähnlichen IDs aus Zahlen, zur Verschlüsselung sensibler Daten oder zur sicheren Offenlegung von Datenbank-IDs für den Benutzer oder einfach zur Verschleierung von IDs aus Zahlen.

Integration von Hashids in Ihre React-App

Um Hashids in Ihre React-Anwendung zu integrieren, gehen Sie folgendermaßen vor:

Schritt 1: Hashids npm installieren

Installieren Sie zunächst Hashids über npm in Ihrem React-Projekt:

npm install hashids
or 
yarn add hashids

Schritt 2: Initialisierung der Hashids-Instanz

Initialisieren Sie in Ihrer React-Komponente oder -Dienstprogrammdatei eine neue Hashids-Instanz mit einem Salt und optional einer Mindest-Hash-Länge:

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

Ersetzen Sie "Ihr Salz hier" durch eine eindeutige Zeichenfolge(salz) die Sie verwenden, um die Hash-Ausgabe anzupassen.

Schritt 3: Daten kodieren und dekodieren

Nach der Initialisierung können Sie Hashids verwenden, um numerische Daten zu kodieren und zu dekodieren. Zum Beispiel die Kodierung einer Datenbank-ID:

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

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

JAVASCRIPT

Und sie muss in die ursprüngliche ID zurückdekodiert werden:

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

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

JAVASCRIPT

Schritt 4: Verwendung von Hashids in Komponenten

Integrieren Sie Hashids bei Bedarf in Ihre React-Komponenten. Zum Beispiel die Übergabe von gehashten IDs als Requisiten:

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

Vorteile der Verwendung von Hashids in React

Sicherheit: Hashids macht numerische IDs unkenntlich und verbessert so den Datenschutz und das Sicherheitstool, das eine direkte Zuordnung zu sensiblen Informationen verhindert.
Einfache Integration: Dank der einfachen npm-Installation und der unkomplizierten API lässt sich Hashids leicht in React-Anwendungen implementieren.
Flexibilität: Anpassbare Hash-Länge und Salt bieten Flexibilität, um Hashes an die Sicherheitsanforderungen Ihrer Anwendung anzupassen.

Einführung in IronPDF

IronPDF for Node.js ist eine leistungsstarke Node.js-PDF-Bibliothek von Iron Software, mit der Entwickler PDFs in ihren .NET-Projekten erzeugen und bearbeiten können. Egal, ob Sie PDFs aus HTML erstellen, bestehende PDFs bearbeiten oder Webseiten in das PDF-Format konvertieren möchten, IronPDF hat alles für Sie.

Hashids NPM(Wie es für Entwickler funktioniert): Abbildung 1 - IronPDF for Node.js: Die Node.js PDF-Bibliothek

Wesentliche Merkmale

Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

Konvertierung von URL in PDF

Generieren Sie PDFs direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.

PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDFist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine breite Palette von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Einrichtung

Zur Installation derIronPDF NPM-Paket, verwenden Sie den folgenden Befehl:

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

Erzeugen von PDF-Dokumenten mit IronPDF und Verwendung des NPM-Pakets HashIDs

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit Hilfe des folgenden Befehls: Siehehier

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

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd hashids-pdf

Installieren Sie die erforderlichen Pakete:

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

Eine PDF-Datei erstellen

Nun lassen Sie uns ein einfaches Beispiel für die Erstellung eines PDFs mit IronPDF erstellen.IronPDF. In Ihrer Next.js-Komponente(z.B. Seiten/index.tsx)fügen Sie den folgenden Code hinzu:

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer eine PDF-Datei erzeugen möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu.

IronPDF benötigt einen Lizenzschlüssel, den Sie von derlizenzseite und fügen Sie ihn in den unten stehenden Code ein.

// 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

Ändern Sie nun den index.js-Code wie folgt, um hashID und IronPDF zu verwenden

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

Code Erläuterung

Nehmen Sie die Eingaben des Benutzers über das Eingabefeld auf.
Verschlüsselung der eingegebenen Zahl mit HashID und Anzeige.
Wenn der Benutzer auf PDF generieren klickt, wird der eingegebene Text an eine Backend-API gesendet, die ein PDF-Dokument kodiert und generiert.

Ausgabe

Hashids NPM(Wie es für Entwickler funktioniert): Abbildung 2

PDF

Hashids NPM(Wie es für Entwickler funktioniert): Abbildung 3

IronPDF-Lizenz

IronPDF.

Geben Sie hier den Lizenzschlüssel ein:

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

Schlussfolgerung

Die Integration von Hashids in Ihre React-Anwendung ist ein praktischer Ansatz, um sensible Daten wie Datenbank-IDs oder URLs zu schützen. Durch die Verwendung von Hashids können Sie sicherstellen, dass die Identifikatoren sicher bleiben und gleichzeitig die Möglichkeit erhalten bleibt, die Originaldaten bei Bedarf abzurufen.

Unabhängig davon, ob Sie eine kleine Anwendung oder ein komplexes Unternehmenssystem entwickeln, bietet Hashids eine zuverlässige Lösung zur Verbesserung des Datenschutzes und der Sicherheit in Ihren React-Projekten und zeichnet sich durch die Verschlüsselung inkrementeller Zahlen in eindeutige Hashes aus. Hashids stellt sicher, dass selbst sich wiederholende Muster in eingegebenen Zahlen zu eindeutigen, sich nicht wiederholenden Hashes führen, um die Datenintegrität und Sicherheit in Anwendungen zu gewährleisten.

IronPDF zeichnet sich als robuste und vielseitige Bibliothek für Node.js-Entwickler aus, die umfassende PDF-Erzeugungs-, -Manipulations- und -Verwaltungsfunktionen für ihre Anwendungen suchen. Ganz gleich, ob Sie Webanwendungen, Desktop-Software oder die Integration von PDF-Funktionen in Unternehmenslösungen entwickeln.

< PREVIOUS
JsdomNPM (Wie es für Entwickler funktioniert)

NÄCHSTES >
memcached npm (Wie es für Entwickler funktioniert)