Rainbow logo
RainbowKit
2.2.8

प्रमाणीकरण

प्रमाणीकरण

अपने आवेदन के लिए प्रमाणित पहुंच प्रदान करना

आप विकल्पतः यह सुनिश्चित कर सकते हैं कि उपयोगकर्ताएं संबंधन प्रक्रिया के दौरान अपने वॉलेट के साथ संदेश पर हस्ताक्षर करते हैं, जिससे साबित होता है कि वे संबद्ध खाते के मालिक हैं और आपको अपने आवेदन के लिए विशेषाधिकार सहित प्रमाणित उपयोगकर्ता सत्र बनाने की अनुमति देते हैं।

जबकि [कस्टम बैक-एंड्स और मेसेज फॉर्मेट्स के साथ एकीकृत करने] की संभवना होती है, (/docs/custom-authentication) RainbowKit Sign-In with Ethereum और NextAuth के लिए प्रथम वर्ग का समर्थन प्रदान करता है।

@rainbow-me/rainbowkit-siwe-next-auth पैकेज को इनस्टॉल करें।

npm install @rainbow-me/rainbowkit-siwe-next-auth

अपने App कौम्पोनॅन्ट में, RainbowKitSiweNextAuthProvider आयात करें।

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';

RainbowKitProvider को RainbowKitSiweNextAuthProvider के साथ रैप करें, सुनिश्चित करें कि यह NextAuth के SessionProvider के अंदर नेस्टेड है ताकि इसे सत्र तक पहुंच हो।

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import { QueryClientProvider, QueryClient, } from "@tanstack/react-query";
const queryClient = new QueryClient();
export default function App({
Component,
pageProps,
}: AppProps<{
session: Session;
}>) {
return (
<WagmiProvider {...etc}>
<SessionProvider refetchInterval={0} session={pageProps.session}>
<QueryClientProvider client={queryClient}>
<RainbowKitSiweNextAuthProvider>
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitSiweNextAuthProvider>
</QueryClientProvider>
</SessionProvider>
</WagmiProvider>;
);
}

RainbowKitSiweNextAuthProvider के स्थान पर, अब आपके उपयोगकर्ता को अपने वॉलेट से जुड़ने के बाद एक संदेश हस्ताक्षरित करके प्रमाणित करने का अनुरोध किया जाएगा।

आप SIWE संदेश विकल्पों को कस्टमाइज कर सकते हैं getSiweMessageOptions prop पर एक फ़ंक्शन पास करके RainbowKitSiweNextAuthProvider

यह फ़ंक्शन हर बार एक नया संदेश बनने पर कॉल किया जाएगा। इस फ़ंक्शन से लौटाए गए विकल्प डिफ़ॉल्ट के साथ मिल जाएंगे।

import { RainbowKitSiweNextAuthProvider, GetSiweMessageOptions, } from '@rainbow-me/rainbowkit-siwe-next-auth';
const getSiweMessageOptions: GetSiweMessageOptions = () => ({
statement: 'Sign in to my RainbowKit app',
});
<RainbowKitSiweNextAuthProvider getSiweMessageOptions={getSiweMessageOptions} >
...
</RainbowKitSiweNextAuthProvider>;

आप NextAuth के getToken फ़ंक्शन के साथ सत्र टोकन एक्सेस कर सकते हैं जिसे next-auth/jwt से आयात किया गया है। यदि उपयोगकर्ता ने सफलतापूर्वक प्रमाणीकरण किया है, तो सत्र टोकन की sub संपत्ति (टोकन का "विषय", यानी उपयोगकर्ता) उपयोगकर्ता का पता होगी।

आप getServerSideProps के माध्यम से सर्वर से सत्र ऑब्जेक्ट को भी पास कर सकते हैं, ताकि NextAuth को इसे ग्राहक पर फिर से हल नहीं करना पड़े।

उदाहरण के लिए:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';
export const getServerSideProps: GetServerSideProps = async context => {
const session = await getSession(context);
const token = await getToken({ req: context.req });
const address = token?.sub ?? null;
// If you have a value for "address" here, your
// server knows the user is authenticated.
// You can then pass any data you want
// to the page component here.
return {
props: {
address,
session,
},
};
};
type AuthenticatedPageProps = InferGetServerSidePropsType<
typeof getServerSideProps
>;
export default function AuthenticatedPage({
address,
}: AuthenticatedPageProps) {
return address ? (
<h1>Authenticated as {address}</h1>
) : (
<h1>Unauthenticated</h1>
);
}

सत्र प्रबंधन के बारे में अधिक जानकारी के लिए, आप निम्नलिखित दस्तावेज़ीकरण का संदर्भ ले सकते हैं: