Hashids NPM (Wie es für Entwickler funktioniert)

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 von Hashids, einer JavaScript-Verschlüsselungsbibliothek, die numerische Daten in einzigartige, reversible und verschlüsselte Hashes transformiert. 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

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;

js

Ersetzen Sie `'your_salt_here'` durch eine einzigartige Zeichenkette (Salt), 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

js

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

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

js

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

js

Vorteile der Verwendung von Hashids in React

• Sicherheit: Hashids verschleiern numerische IDs und verbessern die Datenschutz- und Sicherheitsmaßnahmen, indem sie die direkte Zuordnung zu sensiblen Informationen verhindern.
• Einfachheit der Integration: Die einfache npm-Installation und die übersichtliche API machen es leicht, Hashids in React-Anwendungen zu implementieren.
• Flexibilität: Anpassbare Hash-Länge und Salz 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, die es Entwicklern ermöglicht, PDFs in ihren .NET-Projekten zu erzeugen und zu bearbeiten. 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.

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

IronPDF ist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine Vielzahl 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

Um das IronPDF NPM-Paket zu installieren, verwenden Sie den folgenden Befehl:

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

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 zuerst ein neues Next.js-Projekt (falls noch nicht geschehen) mit folgendem Befehl: Siehe hier

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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd hashids-pdf

cd hashids-pdf

Installieren Sie die erforderlichen Pakete:

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

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

Eine PDF-Datei erstellen

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

PDF-Generierungs-API: Der erste Schritt ist die Erstellung einer Backend-API zur Generierung des PDF-Dokuments. 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 erfordert einen Lizenzschlüssel, den Sie von der Lizenzseite erhalten und im folgenden Code platzieren können.

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

js

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

js

Code Erläuterung

1. Nehmen Sie die Eingaben des Benutzers über das Eingabefeld auf.

2. Verschlüsselung der eingegebenen Zahl mit HashID und Anzeige.

3. Wenn der Benutzer auf PDF generieren klickt, wird der eingegebene Text an eine Backend-API gesendet, die ein PDF-Dokument kodiert und generiert.

Ausgabe

PDF

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

js

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 eine robuste und vielseitige Bibliothek für node.js-Entwickler aus, die umfassende Funktionen zur PDF-Erstellung, -Manipulation und -Verwaltung in ihren Anwendungen suchen. Ganz gleich, ob Sie Webanwendungen, Desktop-Software oder die Integration von PDF-Funktionen in Unternehmenslösungen entwickeln.