Pengesahan Tersuai

Sambung ke belakang pengesahan anda sendiri

Walaupun RainbowKit menyediakan sokongan kelas pertama untuk Daftar Masuk dengan Ethereum dan NextAuth, anda juga boleh mengintegrasikan dengan latar belakang dan format mesej tersuai.

Mencipta penyesuai tersuai

Mula-mula cipta penyesuai pengesahan. Ini membolehkan RainbowKit membuat/menyediakan mesej dan berkomunikasi dengan belakang anda.

Sebagai contoh, kita boleh membuat penyesuai pengesahan yang membolehkan kita menggunakan Daftar Masuk dengan Ethereum terhadap beberapa titik akhir API tersuai, seperti iron-session.

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');
  },
});

Mengandaikan aplikasi anda sudah menguruskan kitaran hayat pengesahan dengan cara tertentu, anda boleh menghantar status pengesahan semasa bersama penyesuai tersuai anda kepada RainbowKitAuthenticationProvider, membungkus RainbowKitProvider sedia ada anda.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} 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>
  );
}

Jika anda sudah sampai sejauh ini dan mencipta penyesuai untuk perpustakaan pengesahan sumber terbuka sedia ada, sila pertimbangkan untuk mencipta pakej untuk orang lain gunakan!

Tinjauan

Memulakan

Lanjutan

Pengesahan Tersuai

Sambung ke belakang pengesahan anda sendiri

Mencipta penyesuai tersuai

Menyediakan status pengesahan