3 मिनट
कैसे सुरक्षित करें API Keys का उपयोग करके Next.js Server Components
Overview
हम Next.js server components का उपयोग करके अपने dapp के फ्रंटेंड में हमारे API कुंजी के एक्सपोज़र को सही तरीके से सुरक्षित कर सकते हैं। हमारी API कुंजी की सुरक्षा को और बढ़ाने के लिए, हम अपनी API कुंजी को कुछ सबग्राफ या सबग्राफ Studio में कुछ डोमेन तक सीमित कर सकते हैं।
इस कुकबुक में, हम यह जानेंगे कि Next.js सर्वर कंपोनेंट कैसे बनाया जाए जो एक सबग्राफ से क्वेरी करता है, साथ ही API कुंजी को फ्रंटएंड से छुपाए रखता है।
चेतावनी
- Next.js सर्वर घटक डिनायल ऑफ़ सर्विस अटैक का उपयोग करके API कुंजियों को समाप्त होने से सुरक्षित नहीं कर सकते।
- The Graph Network gateways में सेवा को बाधित करने के हमलों का पता लगाने और उन्हें रोकने की रणनीतियाँ मौजूद हैं, हालांकि server components का उपयोग करने से ये सुरक्षा कमजोर हो सकती है।
- Next.js server components केंद्रीकरण के जोखिम प्रस्तुत करते हैं क्योंकि सर्वर बंद हो सकता है।
यह क्यों आवश्यक है
एक मानक React एप्लिकेशन में, फ्रंटेंड कोड में शामिल API कुंजियाँ क्लाइंट-साइड पर उजागर हो सकती हैं, जिससे सुरक्षा का जोखिम बढ़ता है। जबकि.env फ़ाइलें सामान्यत: उपयोग की जाती हैं, ये कुंजियों की पूरी सुरक्षा नहीं करतीं क्योंकि React का कोड क्लाइंट साइड पर निष्पादित होता है, जो API कुंजी को हेडर में उजागर करता है। Next.js सर्वर घटक इस मुद्दे का समाधान करते हैं द्वारा संवेदनशील कार्यों को सर्वर-साइड पर संभालना।
क्लाइंट-साइड रेंडरिंग का उपयोग करके सबग्राफ से क्वेरी करना
आवश्यक शर्तें
- Subgraph Studio से एक API कुंजी
- Next.js और React का बुनियादी ज्ञान
- एक मौजूदा Next.js प्रोजेक्ट जो App Router (https://nextjs.org/docs/app). का उपयोग करता है।
स्टेप-बाय-स्टेप कुकबुक
चरण 1: पर्यावरण चर सेट करें
- हमारे Next.js प्रोजेक्ट की जड़ में, एक.env.local फ़ाइल बनाएं।
- हमारा API कुंजी जोड़ें:
API_KEY=<api_key_here>.
चरण 2: एक सर्वर घटक बनाएं
- हमारे components निर्देशिका में, एक नया फ़ाइल बनाएं, ServerComponent.js।
- प्रदान किए गए उदाहरण कोड का उपयोग करके सर्वर घटक सेट करें।
चरण 3: सर्वर-साइड API अनुरोध को लागू करें
ServerComponent.js में, निम्नलिखित कोड जोड़ें:
const API_KEY = process.env.API_KEYexport default async function ServerComponent() { const response = await fetch( `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/HUZDsRpEVP2AvzDCyzDHtdc64dyDxx8FQjzsmqSg4H3B`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query: /* GraphQL */ ` { factories(first: 5) { id poolCount txCount totalVolumeUSD } } `, }), }, ) const responseData = await response.json() const data = responseData.data return ( <div> <h1>Server Component</h1> {data ? ( <ul> {data.factories.map((factory) => ( <li key={factory.id}> <p>ID: {factory.id}</p> <p>Pool Count: {factory.poolCount}</p> <p>Transaction Count: {factory.txCount}</p> <p>Total Volume USD: {factory.totalVolumeUSD}</p> </li> ))} </ul> ) : ( <p>Loading data...</p> )} </div> )}चरण 4: सर्वर घटक का उपयोग करें
- हमारी पृष्ठ फ़ाइल (जैसे, pages/index.js) में ServerComponent आयात करें।
- कंपोनेंट को रेंडर करें:
import ServerComponent from './components/ServerComponent'export default function Home() { return ( <main> <ServerComponent /> </main> )}चरण 5: हमारा Dapp चलाएँ और परीक्षण करें
अपने Next.js एप्लिकेशन को npm run dev का उपयोग करके प्रारंभ करें। सत्यापित करें कि सर्वर कंपोनेंट डेटा प्राप्त कर रहा है बिना API कुंजी को उजागर किए।
निष्कर्ष
Next.js Server Components का उपयोग करके, हमने प्रभावी रूप से API key को क्लाइंट-साइड से छिपा दिया है, जिससे हमारे application की सुरक्षा बढ़ गई है। यह विधि सुनिश्चित करती है कि संवेदनशील संचालन server-side पर संभाले जाएं, जिससे संभावित client-side कमजोरियों से बचाव हो। अंत में, अपनी API कुंजी की सुरक्षा को और बढ़ाने के लिए other API key security measures को अवश्य एक्सप्लोर करें।