Pengesahan
Pengesahan
Menyediakan akses yang disahkan kepada aplikasi anda
Anda boleh secara opsional menguatkuasakan bahawa pengguna menandatangani mesej dengan dompet mereka semasa proses sambungan, membuktikan bahawa mereka memiliki akaun yang disambungkan dan membolehkan anda membuat sesi pengguna yang disahkan dengan akses istimewa ke aplikasi anda.
Meskipun mungkin untuk mengintegrasikan dengan backend dan format pesan kustom, RainbowKit menyediakan dukungan kelas utama untuk Sign-In dengan Ethereum dan NextAuth.
Pasang pakej @rainbow-me/rainbowkit-siwe-next-auth.
npm install @rainbow-me/rainbowkit-siwe-next-auth
Dalam komponen App anda, import RainbowKitSiweNextAuthProvider.
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
Bungkus RainbowKitProvider dengan RainbowKitSiweNextAuthProvider, pastikan ia bersarang di dalam SessionProvider NextAuth agar ia mempunyai akses kepada sesi.
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>;
);
}
Dengan RainbowKitSiweNextAuthProvider di tempatnya, pengguna anda kini akan diminta untuk mengesahkan dengan menandatangani mesej sebaik sahaja mereka telah menyambungkan dompet mereka.
Anda boleh menyesuaikan pilihan mesej SIWE dengan menyerahkan fungsi kepada prop getSiweMessageOptions pada RainbowKitSiweNextAuthProvider.
Fungsi ini akan dipanggil setiap kali mesej baru dicipta. Pilihan yang dikembalikan daripada fungsi ini akan digabungkan dengan tetapan lalai.
import {
RainbowKitSiweNextAuthProvider,
GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';
const getSiweMessageOptions: GetSiweMessageOptions = () => ({
statement: 'Sign in to my RainbowKit app',
});
<RainbowKitSiweNextAuthProvider
getSiweMessageOptions={getSiweMessageOptions}
>
...
</RainbowKitSiweNextAuthProvider>;
Anda boleh mengakses token sesi dengan fungsi getToken NextAuth yang diimport dari next-auth/jwt. Sekiranya pengguna telah berjaya mengesahkan, sifat sub token sesi ("subjek" token, iaitu pengguna) akan menjadi alamat pengguna.
Anda juga boleh memindahkan objek sesi yang telah diselesaikan dari pelayan melalui getServerSideProps supaya NextAuth tidak perlu menyelesaikannya lagi pada pelanggan.
Sebagai contoh:
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>
);
}
Untuk maklumat lanjut mengenai pengurusan sesi, anda boleh merujuk kepada dokumentasi berikut:
