Rainbow logo
RainbowKit
2.2.11

कस्टम प्रमाणीकरण

कस्टम प्रमाणीकरण

अपने स्वयं के प्रमाणीकरण बैक-एंड से कनेक्ट करें

हालांकि RainbowKit Ethereum के साथ साइन-इन और NextAuth के लिए प्रथम श्रेणी की सहायता प्रदान करता है, आप कस्टम बैक-एंड्स और संदेश प्रारूपों के साथ भी एकीकृत कर सकते हैं।

पहले एक प्रमाणीकरण एडाप्टर बनाएं। यह RainbowKit को संदेश बनाने/तैयार करने और आपके बैक-एंड के साथ संवाद करने की अनुमति देता है।

उदाहरण के लिए, हम एक प्रमाणीकरण एडाप्टर बना सकते हैं जो हमें कुछ कस्टम API एंडपॉइंट्स, जैसे iron-session के खिलाफ Ethereum के साथ साइन-इन का उपयोग करने की अनुमति देता है।

import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit';
import { createSiweMessage } from 'viem/siwe';
const authenticationAdapter = createAuthenticationAdapter({
getNonce: async () => {
const response = await fetch('/api/nonce');
return await response.text();
},
createMessage: ({ nonce, address, chainId }) => {
return createSiweMessage({
domain: window.location.host,
address,
statement: 'Sign in with Ethereum to the app.',
uri: window.location.origin,
version: '1',
chainId,
nonce,
});
},
verify: async ({ message, signature }) => {
const verifyRes = await fetch('/api/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message, signature }),
});
return Boolean(verifyRes.ok);
},
signOut: async () => {
await fetch('/api/logout');
},
});

createMessage एक Promise वापस करने का भी समर्थन करता है, जिससे आप सर्वर पर EIP-4361 संदेश बना सकते हैं। अधिक सख्त सुरक्षा के लिए, सर्वर का एन्डपॉइंट सुरक्षा-आवश्यक क्षेत्रों जैसे domain, nonce, और issued-at समय संस्करण को ग्राहक प्रदान-मानों पर भरोसा करने के बजाय आयत या सत्यापित करना चाहिए। अधिक जानकारी के लिए SIWE दस्तावेज़ देखें।

createMessage: async ({ address, chainId }) => {
const response = await fetch('/api/siwe/message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ address, chainId }),
});
if (!response.ok) {
throw new Error('Failed to create message');
}
return await response.text();
},

मान लेते हैं कि आपका एप्लिकेशन पहले से ही किसी तरह से प्रमाणीकरण जीवनचक्र का प्रबंधन कर रहा है, आप अपने कस्टम एडाप्टर के साथ वर्तमान प्रमाणीकरण स्थिति RainbowKitAuthenticationProvider को पास कर सकते हैं, अपने मौजूदा RainbowKitProvider को रैप करते हुए।

import { createAuthenticationAdapter, RainbowKitAuthenticationProvider, RainbowKitProvider, } from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider, } from '@tanstack/react-query';
const authenticationAdapter = createAuthenticationAdapter({
/* See above... */
});
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
// You'll need to resolve AUTHENTICATION_STATUS here
// using your application's authentication system.
// It needs to be either 'loading' (during initial load),
// 'unauthenticated' or 'authenticated'.
return (
<WagmiProvider {...etc}>
<QueryClientProvider client={queryClient}>
<RainbowKitAuthenticationProvider adapter={authenticationAdapter} status={AUTHENTICATION_STATUS} >
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitAuthenticationProvider>
</QueryClientProvider>
</WagmiProvider>
);
}

यदि आपने यहां तक पहुंच कर किसी मौजूदा ओपन सोर्स प्रमाणीकरण लाइब्रेरी के लिए एडाप्टर बनाया है, तो कृपया दूसरों के उपयोग के लिए एक पैकेज बनाने पर विचार करें!