节点帮助

Hashids NPM（如何为开发人员工作）

发布 2024年十月24日

在现代网络应用中，确保数据安全和隐私至关重要。保护数据库 ID 或 URL 等敏感信息的一种有效方法是使用哈希德该工具是一个 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 组件或实用程序文件中，用盐和可选的最小哈希长度初始化一个新的 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

必要时在 React 组件中集成 Hashids。例如，将散列 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

直接从 URL 生成 PDF，允许您捕获网页内容并以编程方式将其保存为 PDF 文件。

PDF 操作

轻松合并、拆分和操作现有的PDF文档。 IronPdf 提供附加页面、分割文档等功能。

PDF 安全

通过设置密码或应用数字签名来保护您的PDF文档。 IronPDF 提供选项以保护您的敏感文档免受未经授权的访问。

高质量输出

生成高质量的PDF文档，精确渲染文本、图像和格式。 IronPDF 确保您生成的 PDF 保持与原始内容的一致性。

跨平台兼容性

IronPDF兼容多个平台，包括 Windows、Linux 和 macOS，适用于广泛的开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 API 文档详实，使将 PDF 生成功能集成到您的项目中变得简单明了。

安装

安装IronPDF要翻译 NPM 软件包，请使用以下命令：

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需要许可证密钥，您可以从许可证页面Please provide the content you would like translated into Chinese along with the code where it should be placed.

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

' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'export default async @function handler(req, res)
'{
'  try
'  {
'	const initHashids = New Hashids('IronPDF @Is Awesome @and Me 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();
'  }
'}

VB C#

现在修改 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#

结论

在 React 应用程序中集成 Hashids 是保护数据库 ID 或 URL 等敏感数据的实用方法。通过使用 Hashids，您可以确保标识符的安全性，同时保持在需要时检索原始数据的能力。

无论您是在构建小型应用程序还是复杂的企业系统，Hashids 都能为您提供可靠的解决方案，以增强 React 项目中的数据隐私和安全性，并擅长将递增数字编码为唯一的哈希值。 Hashids 可确保输入数字中的重复模式也能产生独特、不重复的哈希值，从而维护应用程序中的数据完整性和安全性。

IronPDF对于在其应用程序中寻求全面 PDF 生成、操作和管理功能的 node.js 开发人员来说，《PDF 文件》是一个功能强大、用途广泛的库。无论您是要构建网络应用程序、桌面软件，还是要将 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

代码解释

输出

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

代码解释

输出

PDF

IronPDF 许可证

结论

在此页面上

报告问题

准备开始了吗？ 版本： 2024.11 刚刚发布

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

准备开始了吗？版本： 2024.11 刚刚发布

试用表格已提交
成功地.

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.