प्रमाणीकरण
प्रमाणीकरण
अपने आवेदन के लिए प्रमाणित पहुंच प्रदान करना
आप विकल्पतः यह सुनिश्चित कर सकते हैं कि उपयोगकर्ताएं संबंधन प्रक्रिया के दौरान अपने वॉलेट के साथ संदेश पर हस्ताक्षर करते हैं, जिससे साबित होता है कि वे संबद्ध खाते के मालिक हैं और आपको अपने आवेदन के लिए विशेषाधिकार सहित प्रमाणित उपयोगकर्ता सत्र बनाने की अनुमति देते हैं।
जबकि [कस्टम बैक-एंड्स और मेसेज फॉर्मेट्स के साथ एकीकृत करने] की संभवना होती है, (/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;
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>
);
}
सत्र प्रबंधन के बारे में अधिक जानकारी के लिए, आप निम्नलिखित दस्तावेज़ीकरण का संदर्भ ले सकते हैं: