節點幫助

Hashids NPM（它對開發人員的運作方式）

發佈 2024年10月24日

在現代網路應用中，確保資料安全和隱私是至關重要的。保護敏感資訊（如資料庫ID或URL）的有效方法之一是使用Hashids，一個JavaScript加密庫，可以將數據轉換為獨特的、可逆的和加密的雜湊值。本文探討如何將 Hashids 無縫整合到您的 React 應用程式中，以混淆和解碼識別符號。

什麼是Hashids？

Hashids 是一個小巧但功能強大的庫，可以將數字數據轉換成哈希字串。主要目標是模糊數字識別符，以防止洩露敏感信息。此轉換是可逆的，允許在需要時檢索原始數據。 Hashids 是一個 JavaScript 庫，用來將數字轉換成類似 YouTube 的 ID、編碼敏感數據，或者以安全的方式向用戶暴露您的資料庫 ID，亦或只是將數字的 ID 模糊化。

將 Hashids 整合到您的 React 應用中

要將 Hashids 整合到您的 React 應用程式中，請按照下列步驟進行：

步驟 1：安裝 Hashids npm

首先，在您的 React 專案中透過 npm 安裝 Hashids：

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

VB C#

步驟 2：初始化 Hashids 實例

在您的 React 組件或實用程式文件中，使用 salt 初始化一個新的 Hashids 實例，並且可選擇設置最小哈希長度：

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;

VB C#

將 `'your_salt_here'` 替換為唯一的字串(鹽)您用來自訂雜湊輸出的內容。

步驟3：編碼和解碼數據

初始化後，您可以使用 Hashids 來編碼和解碼數據。例如，編碼資料庫 ID：

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

VB C#

並將其解碼回原始 ID：

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

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

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

VB C#

步驟 4：在組件中使用 Hashids

在需要的地方將 Hashids 整合到您的 React 組件中。例如，將哈希 ID 作為屬性傳遞：

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

VB C#

在 React 中使用 Hashids 的好處

安全性：Hashids 混淆數字 ID，增強數據隱私和安全工具，防止直接映射到敏感信息。
易於整合：簡單的 npm 安裝和直觀的 API 使 Hashids 易於在 React 應用中實施。
靈活性：可自訂的雜湊長度和鹽值提供靈活性，以適應您的應用程式安全需求。

介紹 IronPDF

IronPDF是由 Iron Software 提供的強大 Node.js PDF 庫，允許開發人員在其 .NET 項目中生成和編輯 PDF 文件。無論您需要從 HTML 創建 PDF、操作現有的 PDF 還是將網頁轉換為 PDF 格式，IronPDF 都能滿足您的需求。

Hashids NPM（開發者指南）：圖 1 - IronPDF for Node.js：Node.js PDF 庫

主要功能

HTML 轉 PDF

輕鬆將 HTML 內容轉換成 PDF 文件。此功能特別適合從網頁內容生成動態 PDF。

URL 轉換為 PDF

直接從網址生成PDF，讓您可以程式化地捕獲網頁內容並將其保存為PDF文件。

PDF 操作

輕鬆合併、拆分和操作現有的 PDF 文件。 IronPDF 提供如附加頁面、拆分文檔等功能。

PDF 安全性

透過加密密碼或應用數位簽章來保護您的 PDF 文件。 IronPDF 提供選項來保護您的敏感文件免受未經授權的訪問。

高品質輸出

生成高品質的 PDF 文件，精確還原文字、圖像和格式。 IronPDF 確保您生成的 PDF 保持對原始內容的忠實性。

跨平台相容性

IronPDF與多個平台相容，包括 Windows、Linux 和 macOS，使其適合各種開發環境。

簡單整合

輕鬆使用其 npm 套件將 IronPDF 集成到您的 Node.js 應用程式中。 API 有完善的文檔，使將 PDF 生成功能融入您的項目變得簡單明瞭。

安裝

若要安裝IronPDFNPM 套件，使用以下命令：

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

VB C#

使用IronPDF生成PDF文件並使用HashIDs NPM套件

安裝依賴項：首先，創建一個新的 Next.js 專案(如果您還沒有)使用以下命令：參考這裡

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"

VB C#

接著，導航至您的專案目錄：

cd hashids-pdf

cd hashids-pdf

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

VB C#

安裝所需的軟體包：

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

VB C#

建立 PDF

現在，讓我們創建一個使用生成 PDF 的簡單範例IronPDF. 在您的 Next.js 組件中(例如，pages/index.tsx)，新增以下代碼：

PDF 生成 API：第一步是建立一個後端 API 來生成 PDF 文件。由於 IronPDF 只能在伺服器端運行，因此我們需要創建一個 API，當用戶想要生成 PDF 時進行調用。在路徑 pages/api/pdf.js 中創建一個文件，並添加以下內容。

IronPDF需要許可金鑰，您可以從授權頁面```html <!DOCTYPE html>

Iron Software Products

Iron Software 產品

技術和產品描述

IronPDF 是一個功能強大的.NET PDF庫，使得生成和編輯PDF文件變得簡單。無論您使用的是C#、VB.NET還是JavaScript，IronPDF都能滿足您的需求。

IronOCR 是一個領先的.NET光學字符識別庫，能夠準確地將圖像轉換為可編輯的文本。這個工具對於需要處理大量掃描文件的開發人員來說非常有用。

IronXL 提供了一個強大的Excel讀取和寫入庫，簡化了處理Excel文件的流程。無論是讀取、修改還是生成，IronXL都能夠輕鬆完成。

IronBarcode and IronQR 能夠快速生成和讀取條形碼和二維碼，適合各種應用場景。

IronZIP 是一個.NET庫，用於創建、編輯和提取ZIP文件，支持高效的文件壓縮和解壓。

IronWord 提供了一個靈活的工具來生成、編輯和閱讀Word文件。它支持所有的Word格式，使得文檔處理變得簡單和可靠。

IronPrint 是一個強大的打印庫，能夠輕鬆地從任何.NET應用程序進行打印操作。

IronWebscraper 是一個方便的工具，可以從Web頁面中提取數據，適用於數據收集和分析。

Iron Suite 包含了所有的Iron Software工具包，提供全面的解決方案，以滿足您的所有需求。


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

現在將 index.js 代碼修改如下，以使用 hashID 和 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>); }

VB C#

程式碼說明

從輸入文本框中取得用戶輸入的數字。
使用 HashID 編碼輸入數字並顯示。
當使用者點擊生成 PDF 時，輸入的文字會被發送到後端 API，該 API 編碼並生成 PDF 文件。

輸出

Hashids NPM（對開發人員的運作方式）：圖2

PDF

Hashids NPM（開發者工作原理）：圖 3

IronPDF 授權

IronPDF.

在此處放置授權金鑰：

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

VB C#

結論

將 Hashids 整合到您的 React 應用程式中，是保護敏感資料（如數據庫 ID 或 URL）的實用方法。通過使用 Hashids，您可以確保識別碼保持安全，同時在需要時保持檢索原始數據的能力。

無論您是在構建小型應用程式還是複雜的企業系統，Hashids 都提供了一個可靠的解決方案，以增強您的 React 項目中的數據隱私和安全性，並且在將遞增的數字編碼為唯一的哈希值方面表現出色。 Hashids 確保即使輸入數字中有重複的模式，仍能生成獨特且不重複的哈希值，維護應用程式中的數據完整性和安全性。

IronPDF在 Node.js 開發者尋求於其應用程式中獲得全面的 PDF 生成、操作和管理功能時，IronPDF 脫穎而出，成為一個強大而多功能的庫。無論您是在構建網路應用程式、桌面軟體，還是將 PDF 功能整合到企業解決方案中。

< 上一頁
JsdomNPM（它如何為開發者工作）

下一個 >
memcached npm（它如何為開發人員工作）

準備開始了嗎？版本: 2024.11 剛剛發布

查看許可證 >

Hashids NPM（它對開發人員的運作方式）

什麼是Hashids？

將 Hashids 整合到您的 React 應用中

步驟 1：安裝 Hashids npm

步驟 2：初始化 Hashids 實例

步驟3：編碼和解碼數據

步驟 4：在組件中使用 Hashids

在 React 中使用 Hashids 的好處

介紹 IronPDF

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用IronPDF生成PDF文件並使用HashIDs NPM套件

建立 PDF

Iron Software 產品

技術和產品描述

程式碼說明

輸出

PDF

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？版本: 2024.11 剛剛發布

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

Hashids NPM（它對開發人員的運作方式）

什麼是Hashids？

將 Hashids 整合到您的 React 應用中

步驟 1：安裝 Hashids npm

步驟 2：初始化 Hashids 實例

步驟3：編碼和解碼數據

步驟 4：在組件中使用 Hashids

在 React 中使用 Hashids 的好處

介紹 IronPDF

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用IronPDF生成PDF文件並使用HashIDs NPM套件

建立 PDF

Iron Software 產品

技術和產品描述

程式碼說明

輸出

PDF

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

準備開始了嗎？版本: 2024.11 剛剛發布

試用表格已提交
成功地.

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.